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>

Web Languages and Standards

Last Comment

COBOLdinosaur

8/22/2022 - Mon

COBOLdinosaur

1/24/2005

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

1/24/2005

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

1/25/2005

THIS SOLUTION ONLY AVAILABLE TO MEMBERS.

View this solution by signing up for a free trial.

Members can start a 7-Day free trial and enjoy unlimited access to the platform.

See Pricing Options

Start Free Trial

GET A PERSONALIZED SOLUTION

Ask your own question & get feedback from real experts

Find out why thousands trust the EE community with their toughest problems.

Experts Exchange is like having an extremely knowledgeable team sitting and waiting for your call. Couldn't do my job half as well as I do without it!

James Murphy