473,385 Members | 1,813 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

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

Hide Text boxes until users needs them

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
15 4109
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
16,027 Expert Mod 8TB
Be careful with the spelling though: "dispaly" should be "display".
Nov 3 '08 #3
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
16,027 Expert Mod 8TB
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
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
16,027 Expert Mod 8TB
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
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
16,027 Expert Mod 8TB
On line 17, car textBox should be var textBox.
Nov 4 '08 #9
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
16,027 Expert Mod 8TB
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
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
16,027 Expert Mod 8TB
Let me know what you need removing and I'll sort it out for you.
Dec 10 '08 #13
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
16,027 Expert Mod 8TB
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
thank you, i appreciate your help. this is a lesson learned. take care.

jerry
Dec 12 '08 #16

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

Similar topics

13
by: mr_burns | last post by:
hi, is it possible to change the contents of a combo box when the contents of another are changed. for example, if i had a combo box called garments containing shirts, trousers and hats, when...
19
by: dmiller23462 | last post by:
Hi guys....I have absolutely NO IDEA what I'm doing with Javascript but my end result is I need two text boxes to stay hidden until a particular option is selected....I've cobbled together the...
7
by: Mark | last post by:
Hi All, I have a report which is based on a query which is used to produce QC check sheets. I have quite a few text boxes which are used to display questions depending on the value of one...
0
by: Greg | last post by:
I am working on an application that requires working with numbers in scientific notation. I am using SqlServer as the database and I have created strongly typed data adapters and datasets. The...
8
by: Galina | last post by:
Hello I have 6 dependent list boxes on my ASP page:  Faculty;  Lecturer;  Course;  Course occurrence;  Group;  Week commencing date. When faculty is selected, lists of lecturers and...
2
by: | last post by:
I have a page where I have 3 combo boxes listed in a column. sort of like: combo1 combo2 combo3 Based on which one is clicked, the others are supposed to hide (i.e. combobox.visible =...
64
by: Bayazee | last post by:
hi can we hide a python code ? if i want to write a commercial software can i hide my source code from users access ? we can conver it to pyc but this file can decompiled ... so ...!! do you...
2
by: jarekz | last post by:
Hello friends. This is my first post here. Please forgive me any mistakes. Could you help me solve the problem that I have in MS Access 2003? I downloaded this template from Microsoft:...
6
by: =?Utf-8?B?Sm9obiBBdXN0aW4=?= | last post by:
I have an app that displays about 20 items of data in text boxes. Very occasionally I need to allow these to be used for data entry, but the bulk of the time they are solely for information. They...
0
by: taylorcarr | last post by:
A Canon printer is a smart device known for being advanced, efficient, and reliable. It is designed for home, office, and hybrid workspace use and can also be used for a variety of purposes. However,...
0
by: Charles Arthur | last post by:
How do i turn on java script on a villaon, callus and itel keypad mobile phone
0
by: aa123db | last post by:
Variable and constants Use var or let for variables and const fror constants. Var foo ='bar'; Let foo ='bar';const baz ='bar'; Functions function $name$ ($parameters$) { } ...
0
by: ryjfgjl | last post by:
If we have dozens or hundreds of excel to import into the database, if we use the excel import function provided by database editors such as navicat, it will be extremely tedious and time-consuming...
1
by: nemocccc | last post by:
hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?
1
by: Sonnysonu | last post by:
This is the data of csv file 1 2 3 1 2 3 1 2 3 1 2 3 2 3 2 3 3 the lengths should be different i have to store the data by column-wise with in the specific length. suppose the i have to...
0
by: Hystou | last post by:
There are some requirements for setting up RAID: 1. The motherboard and BIOS support RAID configuration. 2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...
0
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can...
0
jinu1996
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven...

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.