Print Page | Close Window

If Yes display text box

Printed From: Web Wiz Forums
Category: General Discussion
Forum Name: Web Design Discussion
Forum Description: Discussion on web design and development subjects.
URL: https://forums.webwiz.net/forum_posts.asp?TID=26295
Printed Date: 29 March 2026 at 9:21am
Software Version: Web Wiz Forums 12.08 - https://www.webwizforums.com


Topic: If Yes display text box
Posted By: iSec
Subject: If Yes display text box
Date Posted: 24 September 2008 at 8:21pm
Hi,
 
Does anyone know how to create a javascript function with a drop down of two options (Yes/No)... if the users selects Yes a text box is displayed and the user can type a text...?


-------------
"When it gets dark enough, you can see the stars"
-Charles A. Beard



Replies:
Posted By: jamie.townsend
Date Posted: 25 September 2008 at 9:43am
Try something like this:
 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title>Untitled Page</title>

<script language="javascript">

function chkFrm()

{

if (document.getElementById("Select1").value == "Yes")

{

document.getElementById("Text1").readOnly = false;

}

else

{

document.getElementById("Text1").readOnly = true;

}

}

</script>

</head>

<body>

<form method="post" action="#" name="form1">

<select id="Select1" onchange="chkFrm()">

<option value="No">No</option>

<option value="Yes">Yes</option>

</select>

<input id="Text1" type="text" readonly/>

</form>

</body>

</html>


Posted By: jamie.townsend
Date Posted: 25 September 2008 at 10:00am
Or, if you want to hide the textbox altogether wrap it in a div that is hidden:
 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title>Untitled Page</title>

<script language="javascript">

function chkFrm()

{

if (document.getElementById("Select1").value == "Yes")

{

document.getElementById("hiddenBox").style.visibility = "visible";

}

else

{

document.getElementById("hiddenBox").style.visibility = "hidden";

}

}

</script>

</head>

<body>

<form method="post" action="#" name="form1">

<select id="Select1" onchange="chkFrm()">

<option value="No">No</option>

<option value="Yes">Yes</option>

</select>

<div id="hiddenBox" style="visibility:hidden">

<input id="Text1" type="text" />

</div>

</form>

</body>

</html>



Posted By: iSec
Date Posted: 25 September 2008 at 9:55pm
Jamie,

Great work... it works exactly the way I wanted it. Thanks so much!


-------------
"When it gets dark enough, you can see the stars"
-Charles A. Beard


Posted By: jamie.townsend
Date Posted: 26 September 2008 at 8:23am
Great !


Posted By: yamushk
Date Posted: 02 December 2008 at 8:18am
Thank you, this works great. But I have a lot of "yes/no" questions in my forms and it doesn't seem to work for the second time (only one per form or per page - I didn't check).

For example:

Do you like pasta? (yes /no)
If yes - a text input will appear: Do you prefer it with or without sauce? ____

bla bla bla - a lot of other questions

Are you married? (yes/no)
If yes - a text input will appear: Spouse name: _______

- all the above is in the same form and page.

I'm sorry, I really don't know js - so I'm just trying to figure it out as I go...

Thanks!



Posted By: jamie.townsend
Date Posted: 03 December 2008 at 12:08am
If you have multiple yes/no then you need to build on the chkForm function, copy all the code inside of it and change the value inside ("") to the name of the new yes/no and textbox. You will need this for every instance.


Posted By: yamushk
Date Posted: 03 December 2008 at 12:51am
Thank for your reply, but I didn't understand exactly... I did try to copy the script again into the form, and change the names of the variables, but it didn't work...

"Copy all the code" (which code? the HTML?) "inside of it" (inside what? the script?) and change the value inside ("") - which value? Inside which "("")"?

Sorry if I am asking trivial questions - as I mentioned before - I'm quite new to js... Embarrassed

Thanks Clown
Clown


Posted By: yamushk
Date Posted: 03 December 2008 at 12:52am
("") is that "hiddenBox" and "Select1"?


Posted By: jamie.townsend
Date Posted: 03 December 2008 at 1:42pm
try this:
 

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd - http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<html xmlns=" http://www.w3.org/1999/xhtml - http://www.w3.org/1999/xhtml ">
<head>
<title>Untitled Page</title>
<script language="javascript">
function chkFrm()
{
if (document.getElementById("Select1").value == "Yes")
{
document.getElementById("hiddenBox").style.visibility = "visible";
}
else
{
document.getElementById("hiddenBox").style.visibility = "hidden";
}
if (document.getElementById("Select2").value == "Yes")
{
document.getElementById("hiddenBox2").style.visibility = "visible";
}
else
{
document.getElementById("hiddenBox2").style.visibility = "hidden";
}
}
</script>
</head>
<body>
<form method="post" action="#" name="form1">
Do you like pasta ?
<select id="Select1" onchange="chkFrm()">
<option value="No">No</option>
<option value="Yes">Yes</option>
</select>
<div id="hiddenBox" style="visibility:hidden">
Do you prefer it with or without sauce?  <input id="Text1" type="text" />
</div>
<br /><br />
Are you married ?
<select id="Select2" onchange="chkFrm()">
<option value="No">No</option>
<option value="Yes">Yes</option>
</select>
<div id="hiddenBox2" style="visibility:hidden">
Spouse name?  <input id="Text1" type="text" />
</div>
</form>
</body>
</html>
 


Posted By: yamushk
Date Posted: 07 December 2008 at 5:11pm
Wow - thanks a lot, Jamie Townsend! I have never gotten such a complete and quick answer on a forum!

Cheers!
Thumbs Up


Posted By: jamie.townsend
Date Posted: 07 December 2008 at 5:27pm
no problems :)


Posted By: shakir
Date Posted: 31 December 2008 at 2:01pm
open a notepad file and copy past all the script with html code. Then save the file as html save and name. Then double click the file will open in default browser then check it


Posted By: bf1848
Date Posted: 23 January 2009 at 7:50pm

how can i modify this code to let the hidden field be a dropdown menu instead of a textbox?



Posted By: Monie
Date Posted: 25 January 2009 at 3:33pm
Just change the text input to a drop down menu and give them the same ID!
But just for your info, hiding a text field (without disabling them first) will be submitted together with your form submit process.


-------------
"I have not failed. I've just found 1001 ways that won't work!



Print Page | Close Window

Forum Software by Web Wiz Forums® version 12.08 - https://www.webwizforums.com
Copyright ©2001-2026 Web Wiz Ltd. - https://www.webwiz.net