Hide Text boxes until users needs them

**Rsmastermind** · Nov 3 '08, 07:22 AM

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="myOptionalT extBox" name="myOptiona lTextBox" 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 ="showTextBo x" onclick="showBu tton();"/>[/HTML]
now write inside the script tag call this function

Code:

function showButton(){

var textBox=document.getElementById("myOptionalTextBox");
textBox.style.display='block';
}

this willshow the textbox on click of the button.

**acoder** · Nov 3 '08, 08:14 AM

Be careful with the spelling though: "dispaly" should be "display".

**jerrydigital** · Nov 3 '08, 05:08 PM

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

Code:

<html><head><title>Welcome - Registration</title>
<script type="text/javascript">
<!--
function validate_form ( )
{
valid = true;
if ( document.registration.firstname.value == "")
{
alert ( "Please fill in the 'First Name' box." );
document.registration.firstname.focus();
return false;
}
return valid;
}
//-->
</script>

</head>

<form method="post" action="register_users.asp" name="registration" onsubmit="return validate_form ( );">

<p><pre>
<h3><font color="navy">Step 1: User Information</font></h3>
<p><b><font face="comic sans ms">First Name:	<input type="text" name="firstname" size="25"/>

<form method="post" action="register_users.asp" name="registration" onsubmit="return validate_form ( );">

</p>
<h3><font color="navy">Step 2:Reward Account Information</font></h3>

<p>Company Provider:	 <select name="reward">
<option selected="rewardprogram">Please choose an Reward Program</option>
<option value="reward1">reward1</option>
<option value="reward2">reward2</option>
</select>
Rewards Member Account #:<input type="text" name="accountnumber" size="25"/>
<i>Are you a member of additional programs?  If so, <a href="additionalreward">Click here</a></i></font></b>
</p>

</font></b></p>
<input type="submit" value="Click here to Register"/>
<input type="reset" value="Erase and Start Over"/></p>
</form>
</body>
</html>

**acoder** · Nov 3 '08, 06:34 PM

Originally posted by jerrydigital

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.

**jerrydigital** · Nov 3 '08, 07:25 PM

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

**acoder** · Nov 3 '08, 08:05 PM

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.

**jerrydigital** · Nov 3 '08, 09:57 PM

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.

Code:

<html><head><title>Welcome - Registration</title>
<script type="text/javascript">
<!--
function validate_form ( )
{
valid = true;
if ( document.registration.firstname.value == "")
{
alert ( "Please fill in the 'First Name' box." );
document.registration.firstname.focus();
return false;
}
return valid;
}
function showButton() 
{
car textBox=document.getElementById("myOptionalTextBox");
textBox.style.display='block';
}
//-->
</script>

</head>

<form method="post" action="register_users.asp" name="registration" onsubmit="return validate_form ( );">

<p><pre>
<h3><font color="navy">Step 1: User Information</font></h3>
<p><b><font face="comic sans ms">First Name:	<input type="text" name="firstname" size="25"/>

<form method="post" action="register_users.asp" name="registration" onsubmit="return validate_form ( );">

</p>
<h3><font color="navy">Step 2:Reward Account Information</font></h3>

<p>Company Provider:	 <select name="reward">
<option selected="rewardprogram">Please choose an Reward Program</option>
<option value="reward1">reward1</option>
<option value="reward2">reward2</option>
</select>
Rewards Member Account #:<input type="text" name="accountnumber" size="25"/>
<i>Are you a member of additional programs?  If so, Click add
<input type="text" Id="myOptionalTextBox" name="myOptionalTextBox" style="display:none;" value="" />
<input type="button" Id="showTextBox" onclick="showButton();"/>
</p>

</font></b></p>
<input type="submit" value="Click here to Register"/>
<input type="reset" value="Erase and Start Over"/></p>
</form>
</body>
</html>

**acoder** · Nov 4 '08, 08:12 AM

On line 17, car textBox should be var textBox.

**jerrydigital** · Nov 4 '08, 04:23 PM

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.

**acoder** · Nov 4 '08, 05:47 PM

Originally posted by jerrydigital

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.

Originally posted by jerrydigital

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:

Code:

var txt = document.createElement("input");
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).

**jerrydigital** · Dec 10 '08, 05:54 PM

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

Jerry

**acoder** · Dec 10 '08, 09:17 PM

Let me know what you need removing and I'll sort it out for you.

**jerrydigital** · Dec 11 '08, 07:49 PM

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.

**acoder** · Dec 12 '08, 10:41 AM

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.

Hide Text boxes until users needs them

Hide Text boxes until users needs them

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment