show/hide text field from select (drop down)

Gotaka4 · January 3rd, 2005, 03:04 PM

Hi,
I browsed through 25 pages of threads on this forum plus google last night to find the solution, but I wasn't able to.
I am new to Javascript, as a matter of fact, never wrote a single javascript line:

What I am trying to do is add a textfield right after a drop down menu only if the user selects a specific option, that being the custom field.

Here is my select statement:
-------------------------------------------

<select class="text" name="companyname">

      <?php
do {
?>
      <option value="<?php echo $row_1['name']?>"<?php if (!(strcmp($row_1['name'], $row_1['name']))) {echo "SELECTED";} ?>><?php echo $row_1['name']?></option>
      <?php
} while ($row_1= mysql_fetch_assoc($company1));
  $rows = mysql_num_rows($company1);
  if($rows > 0) {
      mysql_data_seek($company1, 0);
      $row_1= mysql_fetch_assoc($company1);
  }
?>
      <option value="NULL" Selected>Select Company name</option>
      <option value="Not in this List">Custom</option>

</select>

-----------------------------------------------

Any help would be appreciated.

rodmcleay · January 4th, 2005, 12:00 AM

There are two things you need to work out here.

First you need determine when the dropdown list has the Custom value selected/OR NOT.
Second you need to show/HIDE the textbox.

Code:

<script language="JavaScript">
function testCustom(selObj)
{
if(selObj.options[selObj.selectedIndex].value == 'Not in this List')
{
//Show the textbox
document.yourtextboxname.style.visibility = 'visible';
document.yourtextboxname.style.display = '';
}
else
{
//Hide the textbox
document.yourtextboxname.style.visibility = 'hidden';
document.yourtextboxname.style.display = 'none';

}
}
</script>

The select control needs to have a onchange event

Code:

onChange="javascript:testCustom(this);"

I have not tested the syntax which is important as javascript is case sensitive.
But this should get you started.
To find out more search for these issues seperately.
IE Show Hide textbox in javascript
AND Get Selected Value in Javascript

======================================
They say, best men are molded out of faults,
And, for the most, become much more the better
For being a little bad.
======================================

Gotaka4 · January 4th, 2005, 11:56 AM

Thanks for replying.
Unfortunately it hasn't worked yet. I put the script in the <head> section, created a textfield named it custom, and then changed the "yourtextboxname" to "custom." in the script. Also added the onchange event.

still nothing happenining.
Do you think it has to do with the fact that the menu is pulling dynamic data?

rodmcleay · January 4th, 2005, 08:36 PM

No, it is not related to the data being dynamic.
Did you put the client side event in the <Select> tag?

Code:

<select class="text" name="companyname" onChange="javascript:testCustom(this);"
>

Put an alert command in the javascript function to see that it is at least getting that far.

Code:

alert('Made IT');

======================================
They say, best men are molded out of faults,
And, for the most, become much more the better
For being a little bad.
======================================

rodmcleay · January 4th, 2005, 08:41 PM

Here is another example of the show hide part.
http://www.codepedia.com/1/How_To_Ja...n_Button_Click
You should break this problem down and see which parts are working and which are not.
1, Is the onchange event occuring?
2, Is the test to match the 'Not in this List' text working as it should?
3, Is the show hide aspect working?

======================================
They say, best men are molded out of faults,
And, for the most, become much more the better
For being a little bad.
======================================

Gotaka4 · January 5th, 2005, 03:33 PM

Thanks.
I will work on it today to see how it goes.

elaine · December 7th, 2005, 05:44 AM

i couldn't get this to work either.
there is an example that works here
http://www.sitepoint.com/forums/prin...d.php?t=319080