Conditional form field

[siric]

Hi,

 

I want to create a form that has a conditional question, but cannot find anything anywhere to help.

 

Basically,

 

Do you () drive to work () use public transportation

 

If the answer is "use public transportation", I want to display another radio button question

 

Do you primarily use the

() train () bus () other

 

I understand that it can be done using Javascript and CSS,.

Can anyone assist?

 

Thanks

 

SiRiC

[F1Fan]

That is correct, you can use JS and CSS to do this. First, you should use radio buttons. Name all the radio buttons in the same section the same, and just change the value appropriately. Then, you can add an onclick event that calls a JS function. That function would check which button was selected, and then show or create the additional radio button selections you want to display.

 

You could use CSS to display and/or hide various sections of other radio buttons, depending on what was selected. Or you could use JS to actually create the new radio buttons, but the previous option would be easier.

[siric]

Thanks F1Fan,

 

Is it possible that you can show some code as I am by no means a javascript expert.

 

 

thanks

[F1Fan]

Javascript:

function checkTransType(selectedType){
  if (selectedType == 'drive'){
    document.getElementById('driveDiv').style.display = 'block';
    document.getElementById('publicDiv').style.display = 'none';
  } else{
    document.getElementById('driveDiv').style.display = 'none';
    document.getElementById('publicDiv').style.display = 'block';
  }
}

 

HTML:

Do you <input type="radio" name="transType" value="drive" onclick="checkTransType(this.value)"> drive to work or 
<input type="radio" name="transType" value="public" onclick="checkTransType(this.value)"> use public transportation<br><br>
<div id="driveDiv" style="display:none;">
Do you primarily use the
<input type="radio" name="publicType" value="train"> train, 
<input type="radio" name="publicType" value="bus"> bus, or 
<input type="radio" name="publicType" value="other"> other
</div>
<div id="publicDiv" style="display:none;">
Do you drive a
<input type="radio" name="driveType" value="car"> car, 
<input type="radio" name="driveType" value="truck"> truck, or 
<input type="radio" name="driveType" value="other"> other
</div>

[siric]

F1Fan,

 

Great.  Just needed to swap around the divIds but works perfectly.

 

Much thanks.

 

SiRiC

[F1Fan]

Oh yeah, oops!

[Reckoner]

Hello, thanks for providing the code -  it works great, but this is my first time that I've been trying to mess with javascript.  However, I'm not sure how you add OTHER conditions. For example, how would I set up a condition so that if people check "no" then other fields are displayed.  And if YES is checked

 

Can you possibly provide an example where there a few more conditions listed out?? that way I can really see how it works...

 

Sorry for being so confusing... but any help would be GREATLY appreciated