Radio Button Clicked, Another Radio Becomes Mandatory 1

[berkshirea]

Hi guys, I've got the code below.

The first line 'Yes' or 'No' is mandatory. When 'Yes' is clicked, the 2nd line (No, Probably or Yes) becomes mandatory. If 'No' is clicked on the first line, the 2nd line is not mandatory.

I've been trying and I can't get it to work as I want it to. Any help is appreciated. Thanks guys!

<script>
function myTest() {		
		 document.getElementById("fruity").required = true;
		 document.getElementById("fruityJuice").required = true;
		 }
</script>

<form id="form1" name="form1" method="POST" action="test.html">
<!-- question 1 below is mandatory-->
Yes  <input name="fruity" id="fruity" type="radio" value="Yes" /> 
No   <input name="fruity" id="fruity" type="radio" value="No" />
<p>

<!-- question 2 below is mandatory if 'Yes' was clicked in question 1. if 'No', not mandatory   -->
No <input name="fruityJuice" id="fruityJuice" type="radio" value="No" />  
Probably <input name="fruityJuice" id="fruityJuice" type="radio" value="Probably" />  
Yes   <input name="fruityJuice" id="fruityJuice" type="radio" value="Yes" />

<input onclick="return myTest();" type="submit" name="Submit" value="Submit" />
</form>

 

[feherke]

Hi

Please note that
[ul]
[li]The [tt]id[/tt] attributes must be unique per document.[/li]
[li]If the form is submitted without clicking the Submit button, then button's [tt]onclick[/tt] event may or may not be triggered, depending on the browser.[/li]
[/ul]

So I would do it like this :

[b]<script>[/b]
[COLOR=orange]addEventListener[/color][teal]([/teal][i][green]'load'[/green][/i][teal],[/teal] handle_question_1_change[teal])[/teal]

[b]function[/b] [COLOR=orange]handle_question_1_change[/color][teal]()[/teal]
[teal]{[/teal]
  document[teal].[/teal][COLOR=orange]querySelectorAll[/color][teal]([/teal][i][green]'form#form1 input[name="fruity"]'[/green][/i][teal]).[/teal][COLOR=orange]forEach[/color][teal]([/teal][b]function[/b][teal]([/teal]input[teal]) {[/teal]
    input[teal].[/teal][COLOR=orange]addEventListener[/color][teal]([/teal][i][green]'change'[/green][/i][teal],[/teal] change_question_2_requiredness[teal])[/teal]
  [teal]})[/teal]
[teal]}[/teal]

[b]function[/b] [COLOR=orange]change_question_2_requiredness[/color][teal]([/teal]event[teal])[/teal]
[teal]{[/teal]
  document[teal].[/teal][COLOR=orange]querySelectorAll[/color][teal]([/teal][i][green]'form#form1 input[name="fruityJuice"]'[/green][/i][teal]).[/teal][COLOR=orange]forEach[/color][teal]([/teal][b]function[/b][teal]([/teal]input[teal]) {[/teal]
    input[teal].[/teal]required [teal]=[/teal] event[teal].[/teal]target[teal].[/teal]value [teal]==[/teal] [i][green]'Yes'[/green][/i]
  [teal]})[/teal]
[teal]}[/teal]
[b]</script>[/b]

[b]<form[/b] [maroon]id[/maroon][teal]=[/teal][i][green]"form1"[/green][/i] [maroon]name[/maroon][teal]=[/teal][i][green]"form1"[/green][/i] [maroon]method[/maroon][teal]=[/teal][i][green]"POST"[/green][/i] [maroon]action[/maroon][teal]=[/teal][i][green]"test.html"[/green][/i][b]>[/b]
[gray]<!-- question 1 below is mandatory-->[/gray]
Yes  [b]<input[/b] [maroon]name[/maroon][teal]=[/teal][i][green]"fruity"[/green][/i] [maroon]type[/maroon][teal]=[/teal][i][green]"radio"[/green][/i] [maroon]value[/maroon][teal]=[/teal][i][green]"Yes"[/green][/i] [maroon]required[/maroon][teal]=[/teal][i][green]"required"[/green][/i] [b]/>[/b] 
No   [b]<input[/b] [maroon]name[/maroon][teal]=[/teal][i][green]"fruity"[/green][/i] [maroon]type[/maroon][teal]=[/teal][i][green]"radio"[/green][/i] [maroon]value[/maroon][teal]=[/teal][i][green]"No"[/green][/i] [maroon]required[/maroon][teal]=[/teal][i][green]"required"[/green][/i] [b]/>[/b]
[b]<p>[/b]

[gray]<!-- question 2 below is mandatory if 'Yes' was clicked in question 1. if 'No', not mandatory   -->[/gray]
No [b]<input[/b] [maroon]name[/maroon][teal]=[/teal][i][green]"fruityJuice"[/green][/i] [maroon]type[/maroon][teal]=[/teal][i][green]"radio"[/green][/i] [maroon]value[/maroon][teal]=[/teal][i][green]"No"[/green][/i] [b]/>[/b]  
Probably [b]<input[/b] [maroon]name[/maroon][teal]=[/teal][i][green]"fruityJuice"[/green][/i] [maroon]type[/maroon][teal]=[/teal][i][green]"radio"[/green][/i] [maroon]value[/maroon][teal]=[/teal][i][green]"Probably"[/green][/i] [b]/>[/b]  
Yes   [b]<input[/b] [maroon]name[/maroon][teal]=[/teal][i][green]"fruityJuice"[/green][/i] [maroon]type[/maroon][teal]=[/teal][i][green]"radio"[/green][/i] [maroon]value[/maroon][teal]=[/teal][i][green]"Yes"[/green][/i] [b]/>[/b]

[b]<input[/b] [maroon]type[/maroon][teal]=[/teal][i][green]"submit"[/green][/i] [maroon]name[/maroon][teal]=[/teal][i][green]"Submit"[/green][/i] [maroon]value[/maroon][teal]=[/teal][i][green]"Submit"[/green][/i] [b]/>[/b]
[b]</form>[/b]

See it in action on JSFiddle :

https://jsfiddle.net/0c3jva2k/

Feherke.
feherke.github.io

 

[berkshirea]

Wow! Thanks very much Feherke! That's exactly what I needed. Have a very good day!