Jump to content

[SOLVED] Show/Hide


dare87

Recommended Posts

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>

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.