asked on

Textbox appear when combo box option is selected.

I have a form setup with a combo box and a text box so people can select a search type and enter search criteria. I would like to setup a second text box that will only show up when the person selects on let's say 'Land Appraised Value' from the combo box. I will then use the two text boxes in my main page to search a range of data in the database. What is the easiest way to create this type of script? I know vbscript and asp (this page is asp) but I do not know too much about javascript. Please describe anything in detail for me. Thanks.

====================================

<form action="results.asp" method="get">
<table class="searchform" border="0" width="300" id="SearchTable">
      <tr>
            <td align="center">1). Select Search Type:</td>
      </tr>
      <tr>
            <td align="center">
                  <select size="1" name="Field">
                  <option value="ParcelNo" selected>Parcel Number</option>
                  <option value="Street">911 Address</option>
                  <option value="Name">Subdivision</option>
                  <option value="NDesc">Neighborhood</option>
                  <option value="LandAprValue">Land Appraised Value</option>
                  <option value="ImprovAprValue">Improvement Appraised Value</option>
                  <option value="OwnerName">Owner Name</option>
                  <option value="OwnerMailAdd">Owner Mailing Address</option>
                  <option value="City">Owner City</option>
                  <option value="State">Owner State</option>
                  <option value="Zip">Owner Zip</option>
                  </select>
            </td>
      </tr>
      <tr>
            <td align="center">2). Enter Search Criteria:</td>
      </tr>
      <tr>
            <td align="center"> <input type="text" name="Query" size="28"></td>
      </tr>
      <tr>
            <td align="center"><input type="submit" value="Search Database"></td>
      </tr>
</table>
</form>

COBOLdinosaur

Just put the additional field in a hidden div and then display it off of the onchange event:
<form action="results.asp" method="get">
<table class="searchform" border="0" width="300" id="SearchTable">
<tr>
<td align="center">1). Select Search Type:</td>
</tr>
<tr>
<td align="center">
<select size="1" name="Field"
onchang="if(this.selectedIndex==4)document.getElementById('newfield').style.display='block'">
<option value="ParcelNo" selected>Parcel Number</option>
<option value="Street">911 Address</option>
<option value="Name">Subdivision</option>
<option value="NDesc">Neighborhood</option>
<option value="LandAprValue">Land Appraised Value</option>
<option value="ImprovAprValue">Improvement Appraised Value</option>
<option value="OwnerName">Owner Name</option>
<option value="OwnerMailAdd">Owner Mailing Address</option>
<option value="City">Owner City</option>
<option value="State">Owner State</option>
<option value="Zip">Owner Zip</option>
</select>
</td>
</tr>
<tr>
<td align="center">2). Enter Search Criteria:</td>
</tr>
<tr>
<td align="center"> <input type="text" name="Query" size="28"></td>
<div id="newfield" style="display:none">
<input type="text" name="Query2" size="28"></div>
</tr>
<tr>
<td align="center"><input type="submit" value="Search Database"></td>
</tr>
</table>
</form>

Cd&

molard

ASKER

I used parts of your code and others on the net and came up with the following.

<script type="text/javascript" language="javascript">
function showHide(sel, id1, id2, id3)
{
var opt = sel.options[sel.selectedIndex];
var targ1 = document.getElementById(id1);
var targ2 = document.getElementById(id2);
var targ3 = document.getElementById(id3);
if (opt.value == "LandAprValue")
{
       targ1.style.display = "";
            targ2.style.display = "";
            targ3.style.display = "none";
      }
else if (opt.value == "ImprovAprValue")
{
       targ1.style.display = "";
       targ2.style.display = "";
       targ3.style.display = "none";
}
else
{
       targ1.style.display = "none";
       targ2.style.display = "none";
       targ3.style.display = "";
}
}
</script>

</head>

<body>
<center>
<form action="results.asp" method="get">
<table class="searchform" border="0" width="300" id="SearchTable"
            cellspacing="10" cellpadding="5">
      <tr>
            <td align="center">1). Select Search Type:</td>
      </tr>
      <tr>
            <td align="center">
                  <select size="1" name="Field" onChange="showHide(this,'max_val','min_val','Query');">
                  <option value="ParcelNo" selected>Parcel Number</option>
                  <option value="Street">911 Address</option>
                  <option value="Name">Subdivision</option>
                  <option value="NDesc">Neighborhood</option>
                  <option value="LandAprValue">Land Appraised Value</option>
                  <option value="ImprovAprValue">Improvement Appraised Value</option>
                  <option value="OwnerName">Owner Name</option>
                  <option value="OwnerMailAdd">Owner Mailing Address</option>
                  <option value="City">Owner City</option>
                  <option value="State">Owner State</option>
                  <option value="Zip">Owner Zip</option>
                  </select>
            </td>
      </tr>
      <tr>
            <td align="center">2). Enter Search Criteria:</td>
      </tr>
      <tr>
            <td align="center">
                  <input type="text" name="Query" size="28" style="display:block;" />
                  <div id='min_val'style="display:none;" >
                        Minimum <br>
                        <input type="text" name="min" size="28" />
                  </div><br>
                  <div id='max_val' style="display:none;">
                        Maximum <br>
                        <input type="text" name="max" size="28" />
                  </div>
            </td>
      </tr>
      <tr>
            <td align="center"><input type="submit" value="Search Database"></td>
      </tr>
      <tr>
            <td align="center">Having trouble? Try the<br>
            <a href="tips.asp">search tips and help</a> area.</td>
      </tr>
</table>
</form>

I have changed the form a little bit. I have a normal text box that appears but if a user selects land appraised value or improvement appraised value the first text box dissapears and two new ones come up. The two new ones have the minimum and maximum for prices to search the database by. The problem is that when I submit this form all three query strings show up in the address. I want it to hide these text boxes and the query string associated with it. Can you help me with this or do you know a better way to do it? I will raise the points later. Thanks again.

ASKER CERTIFIED SOLUTION

COBOLdinosaur

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial