Help! show hide input on select

[szafranman]

I am using Dreamweaver from CS5 with coldfusion 9. I am trying to make a text input field hidden on load and appear when a certain value is selected from the menu. That is when I select "Commercial" from the Property type list I want the "Company Name" input text field box to appear. I have a code in place now but when I go to load the page the text input field is hidden and will not appear no matter what value from the list I select.

I was hoping someone could look over my code and point out my (more than likely) stupid mistake. Thanks in advance!!!

HEAD

<!-- InstanceBeginEditable name="head" -->

<script type="text/javascript">

function showHideInput(ddValue,txtFld) {

  if(toLowerCase(ddValue) == "commercial") {

     document.customer[txtFld].style.display = '';

     }

  else {

    document.customer[txtFld].style.display = 'none';

    document.customer[txtFld].value = '';

    }

}

</script>

<script src="SpryAssets/SpryValidationTextField.js" type="text/javascript"></script>

<script src="SpryAssets/SpryValidationPassword.js" type="text/javascript"></script>

<script src="SpryAssets/SpryValidationSelect.js" type="text/javascript"></script>

<script src="SpryAssets/SpryValidationConfirm.js" type="text/javascript"></script>

<link href="SpryAssets/SpryValidationTextField.css" rel="stylesheet" type="text/css" />

<link href="SpryAssets/SpryValidationPassword.css" rel="stylesheet" type="text/css" />

<link href="SpryAssets/SpryValidationSelect.css" rel="stylesheet" type="text/css">

<link href="SpryAssets/SpryValidationConfirm.css" rel="stylesheet" type="text/css">

<script type="text/javascript">

<!-- InstanceEndEditable --></head>

BODY

<h1>Welcome to our sign up Page!</h1>

<p>Please fill out the form below to register with out site and gain access to our members account page.</p>

<form name="customer" action="<cfoutput>#CurrentPage#</cfoutput>" method="POST" id="customer"><table width="auto" border="0" align="center">

  <tr>

<td><label for="propertytype">

  <div align="right">Property Type:</div>

</label></td>

    <td><select name="propertytype" id="propertytype" accesskey="n" tabindex="02" onChange="showHideInput(this.options[this.selectedIndex].this,'companyname');">

      <option selected>Residential</option>

      <option value="commercial">Commercial</option>

      <option >Other</option>

    </select></td>

  </tr>

  <tr>

  <td><label for="companyname">Company Name:</label></td>

    <td><input name="companyname" type="text" id="companyname" accesskey="n" tabindex="03" style="display:none;"></td>

   </tr>

[David_Powers · Accepted solution]

There are several problems with your code. First of all, you weren't getting the value of the selected option. Also, you don't pass the value to toLowerCase(). Instead, JavaScript uses dot notation like this: ddValue.toLowerCase(). Another problem is that you were hiding the field, but not the label. I have amended your code like this:

<script type="text/javascript">
function showHideInput(ddValue) {
  var field = document.getElementById('companyname');
  var row = field.parentNode.parentNode;
  if(ddValue.toLowerCase() == "commercial") {
     row.style.display = '';
  } else {
    row.style.display = 'none';
    field.value = '';
  }
}
</script>

The onChange event handler now looks like this:

onChange="showHideInput(this.options[this.selectedIndex].value);"

Finally, the row that you want to hide looks like this:

<tr style="display:none">
  <td><label for="companyname">Company Name:</label></td>
  <td><input name="companyname" type="text" id="companyname" accesskey="n" tabindex="03"></td>
</tr>

Note that the style attribute has been moved to the <tr> tag.

[szafranman]

WOW! David Thank you so much your new code work like a champ.