[SOLVED] Show/Hide

[dare87]

I have a page that I want people to select what they want and have it show the correct form.

 

I have the <select> that has all the options, and the value matches the name of the form. What would be the best way to show/hide the appropriate form?

 

Thanks

 

CODE:

 

<h2>To submit customers to a DNC list, please select from the following:</h2>
<form name="dnc">
<select>
	<option value="NONE">Select One</option>
	<option value="1">Don't Contact</option>
	<option value="2">Deceased</option>
	<option value="3">Don't Mail/Phone</option>
	<option value="4">Don't Mail</option>
	<option value="5">Don't Phone</option>
	<option value="6">Don't Email</option>
	<option value="7">Don't Email/Mail</option>
	<option value="8">Don't Email/Phone</option>
</select>
</form>
<!-----Don't Contact----->
<form name="1">
<table>
<tr>
	<td colspan="2"><center><strong>Don't Contact</strong></center></td>
</tr>
<tr>
	<td>First Name:</td>
	<td><input name="first_name" size="20" value=""> Last Name: <input name="last_name" size="20" value=""></td>
</tr>
    <tr>
	<td>Address:</td>
	<td><input name="address" size="35" value=""></td>
</tr>
    <tr>
	<td>City:</td>
	<td><input name="city" size="20" value=""> State: <input name="state" size="2" value="" maxlength="2"> Zip:<input name="zip" size="5" value="" maxlength="5"></td>
</tr>
    <tr>
	<td>Phone:</td>
	<td><input name="phone" size="10" value="" maxlength="10"></td>
</tr>
    <tr>
	<td>Email:</td>
	<td><input name="email" size="20" value="" maxlength="50"></td>
</tr>
    <tr>
    	<td> </td>
        <td><input type="reset" value="Reset"><input type="submit" value="Submit"></td>
    </tr>
    <tr>
    	<td colspan="2"><center><span style="font-style:italic; font-size:10px">* All Fields Required</span></center></td>
    </tr>
</table>
</form>
<!----Deceased---->
<form name="2">
<table>
<tr>
	<td colspan="2"><center><strong>Deceased</strong></center></td>
</tr>
<tr>
	<td>First Name:</td>
	<td><input name="first_name" size="20" value=""> Last Name: <input name="last_name" size="20" value=""></td>
</tr>
    <tr>
	<td>Address:</td>
	<td><input name="address" size="35" value=""></td>
</tr>
    <tr>
	<td>City:</td>
	<td><input name="city" size="20" value=""> State: <input name="state" size="2" value="" maxlength="2"> Zip:<input name="zip" size="5" value="" maxlength="5"></td>
</tr>
    <tr>
    	<td> </td>
        <td><input type="reset" value="Reset"><input type="submit" value="Submit"></td>
    </tr>
    <tr>
    	<td colspan="2"><center><span style="font-style:italic; font-size:10px">* All Fields Required</span></center></td>
    </tr>
</table>
</form>
<!-----Don't Mail/Phone----->
<form name="3">
<table>
<tr>
	<td colspan="2"><center><strong>Don't Mail/Phone</strong></center></td>
</tr>
    <tr>
	<td>Address:</td>
	<td><input name="address" size="35" value=""></td>
</tr>
    <tr>
	<td>City:</td>
	<td><input name="city" size="20" value=""> State: <input name="state" size="2" value="" maxlength="2"> Zip:<input name="zip" size="5" value="" maxlength="5"></td>
</tr>
    <tr>
	<td>Phone:</td>
	<td><input name="phone" size="10" value="" maxlength="10"></td>
</tr>
    <tr>
    	<td> </td>
        <td><input type="reset" value="Reset"><input type="submit" value="Submit"></td>
    </tr>
    <tr>
    	<td colspan="2"><center><span style="font-style:italic; font-size:10px">* All Fields Required</span></center></td>
    </tr>
</table>
</form>
<!-----Don't Mail----->
<form name="4">
<table>
<tr>
	<td colspan="2"><center><strong>Don't Mail</strong></center></td>
</tr>
    <tr>
	<td>Address:</td>
	<td><input name="address" size="35" value=""></td>
</tr>
    <tr>
	<td>City:</td>
	<td><input name="city" size="20" value=""> State: <input name="state" size="2" value="" maxlength="2"> Zip:<input name="zip" size="5" value="" maxlength="5"></td>
</tr>
    <tr>
    	<td> </td>
        <td><input type="reset" value="Reset"><input type="submit" value="Submit"></td>
    </tr>
    <tr>
    	<td colspan="2"><center><span style="font-style:italic; font-size:10px">* All Fields Required</span></center></td>
    </tr>
</table>
</form>
<!-----Don't Phone----->
<form name="5">
<table>
<tr>
	<td colspan="2"><center><strong>Don't Phone</strong></center></td>
</tr>
    <tr>
	<td>Phone:</td>
	<td><input name="phone" size="10" value="" maxlength="10"></td>
</tr>
    <tr>
    	<td> </td>
        <td><input type="reset" value="Reset"><input type="submit" value="Submit"></td>
    </tr>
    <tr>
    	<td colspan="2"><center><span style="font-style:italic; font-size:10px">* All Fields Required</span></center></td>
    </tr>
</table>
</form>
<!-----Don't Email----->
<form name="6">
<table>
<tr>
	<td colspan="2"><center><strong>Don't Email</strong></center></td>
</tr>
    <tr>
	<td>Email:</td>
	<td><input name="email" size="40" value="" maxlength="50"></td>
</tr>
    <tr>
    	<td> </td>
        <td><input type="reset" value="Reset"><input type="submit" value="Submit"></td>
    </tr>
    <tr>
    	<td colspan="2"><center><span style="font-style:italic; font-size:10px">* All Fields Required</span></center></td>
    </tr>
</table>
</form>
<!-----Don't Email/Mail----->
<form name="7">
<table>
<tr>
	<td colspan="2"><center><strong>Don't Email/Mail</strong></center></td>
</tr>
    <tr>
	<td>Address:</td>
	<td><input name="address" size="35" value=""></td>
</tr>
    <tr>
	<td>City:</td>
	<td><input name="city" size="20" value=""> State: <input name="state" size="2" value="" maxlength="2"> Zip:<input name="zip" size="5" value="" maxlength="5"></td>
</tr>
    <tr>
	<td>Email:</td>
	<td><input name="email" size="20" value="" maxlength="50"></td>
</tr>
    <tr>
    	<td> </td>
        <td><input type="reset" value="Reset"><input type="submit" value="Submit"></td>
    </tr>
    <tr>
    	<td colspan="2"><center><span style="font-style:italic; font-size:10px">* All Fields Required</span></center></td>
    </tr>
</table>
</form>
<!-----Don't Email/Phone----->
<form name="8">
<table>
<tr>
	<td colspan="2"><center><strong>Don't Email/Phone</strong></center></td>
</tr>
    <tr>
	<td>Phone:</td>
	<td><input name="phone" size="10" value="" maxlength="10"></td>
</tr>
    <tr>
	<td>Email:</td>
	<td><input name="email" size="20" value="" maxlength="50"></td>
</tr>
    <tr>
    	<td> </td>
        <td><input type="reset" value="Reset"><input type="submit" value="Submit"></td>
    </tr>
    <tr>
    	<td colspan="2"><center><span style="font-style:italic; font-size:10px">* All Fields Required</span></center></td>
    </tr>
</table>
</form>

[sKunKbad]

You can use a simple ajax request. Search around for "ajax basics".

[dare87]

is there a way to do it with php?

 

[unsider]

I think so, don't hold me on that, but using AJAX is soo much easier and more effective.

[haku]

You can do it with PHP, but it will require a page reload after the person selects something. You need javascript to be able to do what you want. Ajax is just a method of using javascript to make a request to the server and have it display the results in a section of the page without reloading the whole page. Its a lingo word right now. You don't necessarily need ajax for this though, you can do it with javascript and no call to the server in the background (which is the basis of an ajax request).

 

Load your page with the CSS for all the forms set to display:none. Then you use javascript to watch the drop down menu and when a selection is made, its changes the appropriate form to display:block.

[dare87]

is there an example that I can look at?

[haku]

There are lots. Google is your friend.