Web Design Discussion - If Yes display text box

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

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!