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

Hide Text boxes until users needs them

P: 67
Hello,

I am trying to have a section of my form that allows users to "click here" to add additional account numbers. If they "click here", then an additional text box will appear. But, if they don't "click here", they will never see these additional text boxes. Anyone know what kind of script is necessary for this? Thanks for any help.
Nov 3 '08 #1
Share this Question
Share on Google+
15 Replies


P: 93
Hi friend you need not to do so many things.The text box you want as optional you need to add few things.

[HTML]<input type="text" Id="myOptionalTextBox" name="myOptionalTextBox" style="dispaly:none;" value="" />[/HTML]If you will write style="dispaly:none;" it will not display the textbox by default on the page

Now second thing call this function on the onclick of the button,
like
[HTML]<input type="button" Id ="showTextBox" onclick="showButton();"/>[/HTML]
now write inside the script tag call this function

Expand|Select|Wrap|Line Numbers
  1. function showButton(){
  2.  
  3. var textBox=document.getElementById("myOptionalTextBox");
  4. textBox.style.display='block';
  5. }
this willshow the textbox on click of the button.
Nov 3 '08 #2

acoder
Expert Mod 15k+
P: 16,027
Be careful with the spelling though: "dispaly" should be "display".
Nov 3 '08 #3

P: 67
thank you for your guidance. I am still a bit confused. I have a small form code below that I am using. Could you show me how to input this into my code to make it work?

Exactly what I am trying to do is allow the user to click the "Click here" link to allow two text boxes to appear just as they do originally so the user can enter additional information.

Also, the user might have 4 different accounts to enter. Would it be possible to keep allowing them to "click here" to get more text boxes to show OR would it be easier for them to "click here" once and then say 6 text boxes show up.

Thank you so much for your help

Expand|Select|Wrap|Line Numbers
  1. <html><head><title>Welcome - Registration</title>
  2. <script type="text/javascript">
  3. <!--
  4. function validate_form ( )
  5. {
  6. valid = true;
  7. if ( document.registration.firstname.value == "")
  8. {
  9. alert ( "Please fill in the 'First Name' box." );
  10. document.registration.firstname.focus();
  11. return false;
  12. }
  13. return valid;
  14. }
  15. //-->
  16. </script>
  17.  
  18. </head>
  19.  
  20. <form method="post" action="register_users.asp" name="registration" onsubmit="return validate_form ( );">
  21.  
  22. <p><pre>
  23. <h3><font color="navy">Step 1: User Information</font></h3>
  24. <p><b><font face="comic sans ms">First Name:    <input type="text" name="firstname" size="25"/>
  25.  
  26. <form method="post" action="register_users.asp" name="registration" onsubmit="return validate_form ( );">
  27.  
  28. </p>
  29. <h3><font color="navy">Step 2:Reward Account Information</font></h3>
  30.  
  31. <p>Company Provider:     <select name="reward">
  32. <option selected="rewardprogram">Please choose an Reward Program</option>
  33. <option value="reward1">reward1</option>
  34. <option value="reward2">reward2</option>
  35. </select>
  36. Rewards Member Account #:<input type="text" name="accountnumber" size="25"/>
  37. <i>Are you a member of additional programs?  If so, <a href="additionalreward">Click here</a></i></font></b>
  38. </p>
  39.  
  40. </font></b></p>
  41. <input type="submit" value="Click here to Register"/>
  42. <input type="reset" value="Erase and Start Over"/></p>
  43. </form>
  44. </body>
  45. </html>
Nov 3 '08 #4

acoder
Expert Mod 15k+
P: 16,027
Also, the user might have 4 different accounts to enter. Would it be possible to keep allowing them to "click here" to get more text boxes to show OR would it be easier for them to "click here" once and then say 6 text boxes show up.
You may be better off creating elements as and when required unless 6 is the maximum.

Have the text boxes in the markup, but hide them using "style='display: none'". You may use a button in place of the link to display, but if you must have a link, add on onclick to call the function which shows the text boxes.
Nov 3 '08 #5

P: 67
thanks for the reply. where should i put the hidden text box code on my asp page?

I tried to implement your suggestions but i believe I am putting them in the wrong places.

thanks
Nov 3 '08 #6

acoder
Expert Mod 15k+
P: 16,027
The JavaScript code you can put where you have the rest of the code in the head.

As for the text boxes, put them where you want them to appear.
Nov 3 '08 #7

P: 67
Thanks for your help.

I have the code below but i believe i am inserting the javascript function incorrectly. Any ideas how to make this work. Right now, now of my javascript is working.

Expand|Select|Wrap|Line Numbers
  1. <html><head><title>Welcome - Registration</title>
  2. <script type="text/javascript">
  3. <!--
  4. function validate_form ( )
  5. {
  6. valid = true;
  7. if ( document.registration.firstname.value == "")
  8. {
  9. alert ( "Please fill in the 'First Name' box." );
  10. document.registration.firstname.focus();
  11. return false;
  12. }
  13. return valid;
  14. }
  15. function showButton() 
  16. {
  17. car textBox=document.getElementById("myOptionalTextBox");
  18. textBox.style.display='block';
  19. }
  20. //-->
  21. </script>
  22.  
  23. </head>
  24.  
  25. <form method="post" action="register_users.asp" name="registration" onsubmit="return validate_form ( );">
  26.  
  27. <p><pre>
  28. <h3><font color="navy">Step 1: User Information</font></h3>
  29. <p><b><font face="comic sans ms">First Name:    <input type="text" name="firstname" size="25"/>
  30.  
  31. <form method="post" action="register_users.asp" name="registration" onsubmit="return validate_form ( );">
  32.  
  33. </p>
  34. <h3><font color="navy">Step 2:Reward Account Information</font></h3>
  35.  
  36. <p>Company Provider:     <select name="reward">
  37. <option selected="rewardprogram">Please choose an Reward Program</option>
  38. <option value="reward1">reward1</option>
  39. <option value="reward2">reward2</option>
  40. </select>
  41. Rewards Member Account #:<input type="text" name="accountnumber" size="25"/>
  42. <i>Are you a member of additional programs?  If so, Click add
  43. <input type="text" Id="myOptionalTextBox" name="myOptionalTextBox" style="display:none;" value="" />
  44. <input type="button" Id="showTextBox" onclick="showButton();"/>
  45. </p>
  46.  
  47. </font></b></p>
  48. <input type="submit" value="Click here to Register"/>
  49. <input type="reset" value="Erase and Start Over"/></p>
  50. </form>
  51. </body>
  52. </html>
Nov 3 '08 #8

acoder
Expert Mod 15k+
P: 16,027
On line 17, car textBox should be var textBox.
Nov 4 '08 #9

P: 67
wow, thanks. that works.

I have two more questions to go with this. First, how do I get this page to show two hidden boxes when the "add optional text box" button is clicked? I would like this since the user will be adding an account name and account number.

And, I am only allowed to click it once right now. How do I allow the user to continue clicking this add box button to add more accounts?


Thanks for all your help.
Nov 4 '08 #10

acoder
Expert Mod 15k+
P: 16,027
I have two more questions to go with this. First, how do I get this page to show two hidden boxes when the "add optional text box" button is clicked? I would like this since the user will be adding an account name and account number.
Add another text box where you want it to appear with unique ID and then in the JavaScript, add two more lines to first get this new element via its ID and then display.

And, I am only allowed to click it once right now. How do I allow the user to continue clicking this add box button to add more accounts?
To do that, if you want flexibility to allow for an unlimited number of text boxes, you would need to create text boxes rather than show them. To create a text box:
Expand|Select|Wrap|Line Numbers
  1. var txt = document.createElement("input");
  2. txt.type = "text";
Then you'd set its other properties and finally add it to the body. You can use appendChild() or insertBefore() (look them up).
Nov 4 '08 #11

P: 67
is there a way to edit my previous posts? there's some info i would like to delete. thanks

Jerry
Dec 10 '08 #12

acoder
Expert Mod 15k+
P: 16,027
Let me know what you need removing and I'll sort it out for you.
Dec 10 '08 #13

P: 67
hi,

i would like to delete posts 4 and 8 where i mention the company website. reason being, when you google the website, it comes to this page and i would not like it to.
Dec 11 '08 #14

acoder
Expert Mod 15k+
P: 16,027
I've removed them. You'll have to wait until the site's re-indexed before it disappears off the search.

This, you could say, is a lesson. When posting code or anything for that matter, make sure the code doesn't contain anything that you don't want appearing in searches.
Dec 12 '08 #15

P: 67
thank you, i appreciate your help. this is a lesson learned. take care.

jerry
Dec 12 '08 #16

Post your reply

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