By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
424,689 Members | 1,759 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 424,689 IT Pros & Developers. It's quick & easy.

Drop down menu option selected displays a textbox and a button

P: 1
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
Share this Question
Share on Google+
1 Reply


acoder
Expert Mod 15k+
P: 16,027
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.