471,872 Members | 1,249 Online
Bytes | Software Development & Data Engineering Community
Post +

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 471,872 software developers and data experts.

Drop down menu option selected displays a textbox and a button

I have a form with a drop down box. If you select an option in the drop down box (depending which option is selected) one or two textbox(es) and a submit button display.
I would like to keep the textbox(es) and the submit button showing until another option is selected. Also the data that's submitted is showing on the form page.

Here's an example - I need the code below to do this:
1. I go to the page - I see a drop down box.
2. I select the first option - I see the drop down box, a textbox, and a submit button. I submit the info - the drop down box, the same textbox, and the submit button are still visible, with the data below the submit button.
3. I select the second option - I see the drop down box, two textboxes, and a submit button. I submit the info - the drop down box, the same two textboxes, and the submit button are still there with the data below the button, until I select the first option etc.

Here's what I have so far, it works but when I submit the textbox(es) don't show any longer but rather just the drop down box and the data submitted. Thanks for the help in advance.

Expand|Select|Wrap|Line Numbers
  1. <script type="text/javascript">
  2.  
  3. function toggle(show)
  4. {
  5.     if (this.currvisible) {
  6.         document.getElementById(currvisible).style.display = 'none';
  7.     }
  8.  
  9.     if (show) {
  10.         document.getElementById(show).style.display = '';
  11.         this.currvisible = show;
  12.     }
  13. }
  14.  
  15. </script>
  16.  
Expand|Select|Wrap|Line Numbers
  1. <form method="post" action="index.jsp">
  2.  
  3. <table cellpadding="0" cellspacing="0">
  4.     <tr>
  5.       <td>Make a Selection</td>
  6.    </tr>
  7.    <tr>
  8.       <td>
  9.         <select onchange="toggle(this.options[this.selectedIndex].value);">
  10.             <option value=''></option>
  11.             <option value="d1">d1</option>
  12.             <option value="d2">d2</option>
  13.        </select>
  14.       </td>
  15.       </tr>
  16. </table>
  17. <div id="d1" style="display: none;">
  18.    <table cellpadding="0" cellspacing="0">
  19.      <tr>
  20.          <td>Phone Number</td>
  21.       </tr>
  22.        <tr>
  23.            <td><input name="phoneNumber" /></td>
  24.        </tr>
  25.         <tr>
  26.            <td><input name="submit" type="submit" value="Submit" /></td>
  27.         </tr>
  28.    </table>
  29. </div>
  30.  
  31. <div id="d2" style="display: none;">
  32.        <table cellpadding="0" cellspacing="0">
  33.            <tr>
  34.     <td>Phone Number</td>
  35.            </tr>
  36.     <tr>
  37.         <td><input name="phoneNumber" /></td>
  38.     </tr>
  39.     <tr>
  40.         <td>Email Address</td>
  41.     </tr>
  42.     <tr>
  43.         <td><input name="emailAdress" /></td>
  44.     </tr>
  45.     <tr>
  46.         <td><input name="submit" type="submit" value="Submit" /></td>
  47.     </tr>
  48.   </table>
  49. </div>
  50.   <table>
  51.       <tr>
  52.           <td><c:out value="${param.results}"  /></td>
  53.       </tr>
  54.  </table>
  55. </form>
  56.  
Jun 16 '07 #1
1 4909
acoder
16,027 Expert Mod 8TB
Welcome to TSDN!

You could consider AJAX that would allow you to get the data from the server without unloading and reloading the page.
Jun 18 '07 #2

Post your reply

Sign in to post your reply or Sign up for a free account.

Similar topics

1 post views Thread by ehm | last post: by
6 posts views Thread by Greg Scharlemann | last post: by
1 post views Thread by Greg Scharlemann | last post: by
19 posts views Thread by mart2006 | last post: by
10 posts views Thread by mart2006 | last post: by
NeoPa
reply views Thread by NeoPa | last post: by
aboka
reply views Thread by aboka | last post: by

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.