469,612 Members | 1,639 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 469,612 developers. It's quick & easy.

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 4806
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
reply views Thread by devrayhaan | last post: by
reply views Thread by gheharukoh7 | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.