dare87 Posted March 19, 2008 Share Posted March 19, 2008 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> Quote Link to comment Share on other sites More sharing options...
sKunKbad Posted March 19, 2008 Share Posted March 19, 2008 You can use a simple ajax request. Search around for "ajax basics". Quote Link to comment Share on other sites More sharing options...
dare87 Posted March 19, 2008 Author Share Posted March 19, 2008 is there a way to do it with php? Quote Link to comment Share on other sites More sharing options...
unsider Posted March 20, 2008 Share Posted March 20, 2008 I think so, don't hold me on that, but using AJAX is soo much easier and more effective. Quote Link to comment Share on other sites More sharing options...
haku Posted March 20, 2008 Share Posted March 20, 2008 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. Quote Link to comment Share on other sites More sharing options...
dare87 Posted March 20, 2008 Author Share Posted March 20, 2008 is there an example that I can look at? Quote Link to comment Share on other sites More sharing options...
haku Posted March 20, 2008 Share Posted March 20, 2008 There are lots. Google is your friend. Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.