[Sapro]

I have an email form and I'd like to add a form field based on a previous answer. For example, I have a dropdown list of options for "how do you hear about us?" including "Radio Ad" "Magazine Ad" "Google Search" or "Other" ... if someone selects "Other", I want an additional text field to appear below that field for the user to explain what "other" means.

If the user selects any other option in the dropdown, I don't want the field to be present. I know this can be done with javascript but I don't know how... I searched this forum but I guess I wasn't using the right keywords.

[Dean]

Code:

<script type='text/javascript'>
function update_it(t)
{
	var d = document.getElementById('op-c-in');
	var i = document.getElementById('op_c_in');

	if (t.value == 'c')
	{
		d.style.display = 'block';
		i.focus();
	}
	else
	{
		d.style.display = 'none';
		i.blur();
	}
}
</script>

<form name='myform'>
<table border='0' cellspacing='0' cellpadding='0'>
 <tr>
  <td align='center' valign='middle'><input type='radio' name='option' value='a' onclick='update_it(this)' checked /></td>
  <td align='left' valign='top'>Option A</td>
 </tr>
 <tr>
  <td align='center' valign='middle'><input type='radio' name='option' value='b' onclick='update_it(this)' /></td>
  <td align='left' valign='top'>Option A</td>
 </tr>
 <tr>
  <td align='center' valign='middle'><input type='radio' name='option' value='c' onclick='update_it(this)' /></td>
  <td align='left' valign='top'>
   Option C
   <div id='op-c-in' style='display:none'>
    <input type='text' name='op_c_in' id='op_c_in' value='' size='30' />
   </div>
  </td>
 </tr>
</table></from>

[Sapro]

That works with the radio buttons, what do I need to modify to make it work with a dropdown?

Also I'm not sure I modified the script appropriately to make this work...

Code:

<script type='text/javascript'>
function update_it(t)
{
	var d = document.getElementById('op-c-in');
	var i = document.getElementById('op_c_in');

	if (t.value == 'other')
	{
		d.style.display = 'block';
		i.focus();
	}
	else
	{
		d.style.display = 'none';
		i.blur();
	}
}
</script>
<form>
<select name="how_found" id="how_found">
                  <option selected onclick='update_it(this)' value="blank"> - Select - </option>
                  <option value="marlinmag" onclick='update_it(this)'>Marlin Magazine</option>
                  <option value="sportfishingmag" onclick='update_it(this)'>Sportfishing Magazine</option>
                  <option value="saltwatersportmag" onclick='update_it(this)'>Saltwater Sportsman Magazine</option>
                  <option value="IGFA" onclick='update_it(this)'>IGFA Record Book</option>
                  <option value="yahoo" onclick='update_it(this)'>Yahoo! Search</option>
                  <option value="google" onclick='update_it(this)'>Google Search</option>
                  <option value="msn" onclick='update_it(this)'>MSN Search</option>
                  <option value="aol" onclick='update_it(this)'>AOL Search</option>
                  <option value="dogpile" onclick='update_it(this)'>Dogpile Search</option>
                  <option value="other" onclick='update_it(this)'>Other</option>
                                </select>
								   <div id='op-c-in' style='display:none'>
    <input type='text' name='op_c_in' id='op_c_in' value='' size='30' />
   </div></form>

[UnrealEd]

you have to use the onChange event:

Code:

<script type='text/javascript'>
function update_it(t)
{
	var d = document.getElementById('op-c-in');
	var i = document.getElementById('op_c_in');

	if (t.options[t.selectedIndex].value == 'other')
	{
		d.style.display = 'block';
		i.focus();
	}
	else
	{
		d.style.display = 'none';
		i.blur();
	}
}
</script>
<form>
<select name="how_found" id="how_found" onchange="update_it(this)">
                  <option selected value="blank"> - Select - </option>
                  <option value="marlinmag">Marlin Magazine</option>
                  <option value="sportfishingmag">Sportfishing Magazine</option>
                  <option value="saltwatersportmag">Saltwater Sportsman Magazine</option>
                  <option value="IGFA">IGFA Record Book</option>
                  <option value="yahoo">Yahoo! Search</option>
                  <option value="google">Google Search</option>
                  <option value="msn">MSN Search</option>
                  <option value="aol">AOL Search</option>
                  <option value="dogpile">Dogpile Search</option>
                  <option value="other">Other</option>
                                </select>
								   <div id='op-c-in' style='display:none'>
    <input type='text' name='op_c_in' id='op_c_in' value='' size='30' />
   </div></form>

give it a try, it worked for me a couple of years ago

UnrealEd