Parent Child Radio Buttons 1

[damipera]

hi guys, can you help me out please.

if i have:

parentradiobutton1
parentradiobutton2
parentradiobutton3
-childrediobutton1
-childrediobutton2
-childrediobutton3
parentradiobutton4
parentradiobutton5

how do i make childrediobuttons mandatory if parentradiobutton3 is selected?

thanks for any ideas guys.

 

[feherke]

Hi

Based on the few information you provided, it sounds like you want something like this :

[b]<form[/b] [maroon]action[/maroon][teal]=[/teal][i][green]""[/green][/i] [maroon]id[/maroon][teal]=[/teal][i][green]"the-form"[/green][/i][b]>[/b]
[b]<input[/b] [maroon]type[/maroon][teal]=[/teal][i][green]"radio"[/green][/i] [maroon]name[/maroon][teal]=[/teal][i][green]"parent"[/green][/i] [maroon]value[/maroon][teal]=[/teal][i][green]"parentradiobutton1"[/green][/i][b]>[/b]
[b]<input[/b] [maroon]type[/maroon][teal]=[/teal][i][green]"radio"[/green][/i] [maroon]name[/maroon][teal]=[/teal][i][green]"parent"[/green][/i] [maroon]value[/maroon][teal]=[/teal][i][green]"parentradiobutton2"[/green][/i][b]>[/b]
[b]<input[/b] [maroon]type[/maroon][teal]=[/teal][i][green]"radio"[/green][/i] [maroon]name[/maroon][teal]=[/teal][i][green]"parent"[/green][/i] [maroon]value[/maroon][teal]=[/teal][i][green]"parentradiobutton3"[/green][/i] [maroon]id[/maroon][teal]=[/teal][i][green]"the-3rd"[/green][/i][b]>[/b]
[b]<span[/b] [maroon]id[/maroon][teal]=[/teal][i][green]"children"[/green][/i][b]>[/b]
  [b]<input[/b] [maroon]type[/maroon][teal]=[/teal][i][green]"radio"[/green][/i] [maroon]name[/maroon][teal]=[/teal][i][green]"child"[/green][/i] [maroon]value[/maroon][teal]=[/teal][i][green]"childrediobutton1"[/green][/i][b]>[/b]
  [b]<input[/b] [maroon]type[/maroon][teal]=[/teal][i][green]"radio"[/green][/i] [maroon]name[/maroon][teal]=[/teal][i][green]"child"[/green][/i] [maroon]value[/maroon][teal]=[/teal][i][green]"childrediobutton2"[/green][/i][b]>[/b]
  [b]<input[/b] [maroon]type[/maroon][teal]=[/teal][i][green]"radio"[/green][/i] [maroon]name[/maroon][teal]=[/teal][i][green]"child"[/green][/i] [maroon]value[/maroon][teal]=[/teal][i][green]"childrediobutton3"[/green][/i][b]>[/b]
[b]</span>[/b]
[b]<input[/b] [maroon]type[/maroon][teal]=[/teal][i][green]"radio"[/green][/i] [maroon]name[/maroon][teal]=[/teal][i][green]"parent"[/green][/i] [maroon]value[/maroon][teal]=[/teal][i][green]"parentradiobutton4"[/green][/i][b]>[/b]
[b]<input[/b] [maroon]type[/maroon][teal]=[/teal][i][green]"radio"[/green][/i] [maroon]name[/maroon][teal]=[/teal][i][green]"parent"[/green][/i] [maroon]value[/maroon][teal]=[/teal][i][green]"parentradiobutton5"[/green][/i][b]>[/b]
[b]<input[/b] [maroon]type[/maroon][teal]=[/teal][i][green]"submit"[/green][/i][b]>[/b]
[b]</form>[/b]

document[teal].[/teal][COLOR=orange]getElementById[/color][teal]([/teal][i][green]'the-form'[/green][/i][teal]).[/teal][COLOR=orange]addEventListener[/color][teal]([/teal][i][green]'submit'[/green][/i][teal],[/teal] [b]function[/b][teal]([/teal]event[teal]) {[/teal]
  [b]if[/b] [teal]([/teal]document[teal].[/teal][COLOR=orange]getElementById[/color][teal]([/teal][i][green]'the-3rd'[/green][/i][teal]).[/teal]checked [teal]&& ![/teal] document[teal].[/teal][COLOR=orange]querySelector[/color][teal]([/teal][i][green]'span#children input:checked'[/green][/i][teal])) {[/teal]
    event[teal].[/teal][COLOR=orange]preventDefault[/color][teal]()[/teal]
    [COLOR=orange]alert[/color][teal]([/teal][i][green]'ERROR : Must check a child too'[/green][/i][teal])[/teal]
  [teal]}[/teal]
[teal]},[/teal] [b]false[/b][teal])[/teal]

See it in action here :

http://jsfiddle.net/1de0ty9q/

Note that I kept it simple intentionally. I reality I would use more generic code, that would handle any number of radio buttons with children.


Feherke.
feherke.github.io

 

[damipera]

hi feherke, thanks for that. but how would i modify the code if instead of radiobuttons for the 3 childradio buttons, they are now checkboxes? thanks for your help

 

[feherke]

Hi

Just change the [tt]input[/tt]'s [tt]type[/tt] to [tt]checkbox[/tt] in the HTML. The JavaScript will keep working as the selector to query checked checkboxes is the same [tt]input:checked[/tt]. So if 1 or more checkboxes will be checked, will let it submit, otherwise will pop the [tt]alert()[/tt].


Feherke.
feherke.github.io

 

[damipera]

hi feherke,
what if checkboxes have different names?

 

[feherke]

Hi

So far the script doesn't care about names. It check whether any [tt]input[/tt] inside that [tt]span[/tt] is checked.

If your validation rule is more complex and some matching by parent vs. children names is involved, we can adjust the script.


Feherke.
feherke.github.io

 

[damipera]

hi feherke,

this is what i have so far and i can't make it to work. when i click the 3rd radio button, the form doesn't alert me that i need to tick one or more of the checkboxes underneath it. i'm not sure what i'm doing wrong, what am i missing?

thanks for your help.

<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml">[/URL]
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>

<style type="text/css">
span#children { background-color: yellow; }
</style>

<script language="javascript">
document.getElementById('the-form').addEventListener('submit', function(event) {
  if (document.getElementById('the-3rd').checked && ! document.querySelector('span#children input:checked')) {
  	event.preventDefault()
	  alert('ERROR : Must check a child too')
  }
}, false)
</script>
</head>

<body>

<form action="" id="the-form">
<input type="radio" name="parent" value="parentradiobutton1">
<br />
<input type="radio" name="parent" value="parentradiobutton2">
<br />
<input type="radio" name="parent" value="parentradiobutton3" id="the-3rd">
<span id="children"> <br />
&nbsp;&nbsp;&nbsp;
<input name="child1" type="checkbox" id="child1" value="childrediobutton1">
<br />
&nbsp;&nbsp;&nbsp;
<input name="child2" type="checkbox" id="child2" value="childrediobutton2">
<br />
&nbsp;&nbsp;&nbsp;
<input name="child3" type="checkbox" id="child3" value="childrediobutton3">
</span> <br />
<input type="radio" name="parent" value="parentradiobutton4">
<br />
<input type="radio" name="parent" value="parentradiobutton5">
<br />
<input type="submit">
</form>
</body>
</html>

 

[feherke]

Hi

Oops. That part is unfortunately masked by the way JSFiddle works.

The way you wrote it, the JavaScript code is executed before the document itself being rendered, so the JavaScript code queries for document elements to attach event handlers too when those document elements not exist yet. You have to either :
[ul]
[li]Move the [tt]<script>[/tt] .. [tt]</script>[/tt] part to the end of file, right before the closing [tt]</body>[/tt] tag.[/li]
[li]Call the JavaScript code after the document was rendered :[ul]
[li]Ancient way ( this is how JSFiddle does it ) :

[highlight]window[teal].[/teal]onload [teal]=[/teal] [b]function[/b][teal]() {[/teal][/highlight]
  document[teal].[/teal][COLOR=orange]getElementById[/color][teal]([/teal][i][green]'the-form'[/green][/i][teal]).[/teal][COLOR=orange]addEventListener[/color][teal]([/teal][i][green]'submit'[/green][/i][teal],[/teal] [b]function[/b][teal]([/teal]event[teal]) {[/teal]
    [b]if[/b] [teal]([/teal]document[teal].[/teal][COLOR=orange]getElementById[/color][teal]([/teal][i][green]'the-3rd'[/green][/i][teal]).[/teal]checked [teal]&& ![/teal] document[teal].[/teal][COLOR=orange]querySelector[/color][teal]([/teal][i][green]'span#children input:checked'[/green][/i][teal])) {[/teal]
      event[teal].[/teal][COLOR=orange]preventDefault[/color][teal]()[/teal]
      [COLOR=orange]alert[/color][teal]([/teal][i][green]'ERROR : Must check a child too'[/green][/i][teal])[/teal]
    [teal]}[/teal]
  [teal]},[/teal] [b]false[/b][teal])[/teal]
[highlight][teal]}[/teal][/highlight]

[/li]
[li]Modern way :

[highlight]document[teal].[/teal][COLOR=orange]addEventListener[/color][teal]([/teal][i][green]'DOMContentLoaded'[/green][/i][teal],[/teal] [b]function[/b][teal]() {[/teal][/highlight]
  document[teal].[/teal][COLOR=orange]getElementById[/color][teal]([/teal][i][green]'the-form'[/green][/i][teal]).[/teal][COLOR=orange]addEventListener[/color][teal]([/teal][i][green]'submit'[/green][/i][teal],[/teal] [b]function[/b][teal]([/teal]event[teal]) {[/teal]
    [b]if[/b] [teal]([/teal]document[teal].[/teal][COLOR=orange]getElementById[/color][teal]([/teal][i][green]'the-3rd'[/green][/i][teal]).[/teal]checked [teal]&& ![/teal] document[teal].[/teal][COLOR=orange]querySelector[/color][teal]([/teal][i][green]'span#children input:checked'[/green][/i][teal])) {[/teal]
      event[teal].[/teal][COLOR=orange]preventDefault[/color][teal]()[/teal]
      [COLOR=orange]alert[/color][teal]([/teal][i][green]'ERROR : Must check a child too'[/green][/i][teal])[/teal]
    [teal]}[/teal]
  [teal]},[/teal] [b]false[/b][teal])[/teal]
[highlight][teal]},[/teal] [b]false[/b][teal])[/teal][/highlight]

[/li][/ul][/li]
[/ul]

Feherke.
feherke.github.io

 

[damipera]

hi feherke, YOU ARE AWESOME!!! thanks very much!