Skip to main content
S
szafranman
Known Participant
January 7, 2011
Answered

Help! show hide input on select

  • January 7, 2011
  • 1 reply
  • 1054 views

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>

This topic has been closed for replies.
Correct answer David_Powers

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.

1 reply

David_Powers
David_PowersCorrect answer
Inspiring
January 7, 2011

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.

S
szafranmanAuthor
Known Participant
January 7, 2011

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

Terms & ConditionsAccessibility statement
Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices