Form Changes Based on Dropdown Selection

[lynsey93]

Hello!

 

I have never done Javascript, but I am creating a form on my site that I believe will need it.

 

I'd like to have a drop down box at the top of the form that has the options of text or image, and then if text is selected a text box appears next or if image is selected then an upload box appears next, without having to submit the form. Can this be done?

 

Thank you!

[zavaboy]

It can be done. Here's an example:

 

JavaScript:

ddChange = function(val){
   if (val=='text'){
     document.getElementById('mytext').style.display='inline';
     document.getElementById('myimage').style.display='none';
   }else if (val=='image'){
     document.getElementById('mytext').style.display='none';
     document.getElementById('myimage').style.display='inline';
   }else{
     document.getElementById('mytext').style.display='none';
     document.getElementById('myimage').style.display='none';
   }
}

 

HTML:

<select name="myselect" onchange="ddChange(this.value)">
  <option value="">Please Select</option>
  <option value="text">Text</option>
  <option value="image">Image</option>
</select>
<input type="text" id="mytext" name="mytext" style="display:none" />
<input type="file" id="myimage" name="myimage" style="display:none" />

 

jsFiddle: http://jsfiddle.net/xbRh8/

[lynsey93]

Thank you!