| Author |
 Topic Search  Topic Options
|
iSec 
Senior Member
Joined: 13 February 2005
Status: Offline
Points: 1140
|
 Topic: If Yes display text box
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
|
 |
jamie.townsend
Groupie
Joined: 07 December 2007
Location: England
Status: Offline
Points: 114
|
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>
|
|
|
jamie.townsend
Groupie
Joined: 07 December 2007
Location: England
Status: Offline
Points: 114
|
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>
|
|
|
iSec
Senior Member
Joined: 13 February 2005
Status: Offline
Points: 1140
|
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
|
|
jamie.townsend
Groupie
Joined: 07 December 2007
Location: England
Status: Offline
Points: 114
|
Posted: 26 September 2008 at 8:23am |
|
Great !
|
|
yamushk
Newbie
Joined: 02 December 2008
Status: Offline
Points: 4
|
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!
|
|
jamie.townsend
Groupie
Joined: 07 December 2007
Location: England
Status: Offline
Points: 114
|
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.
|
|
yamushk
Newbie
Joined: 02 December 2008
Status: Offline
Points: 4
|
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...  Thanks 
|
|
If Yes display text box