Tek-Tips is the largest IT community on the Internet today!
Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!
-
Congratulations strongm on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!
Hiding a form field until another filed value is a certain value
- Thread starter chellweg
- Start date
BillyRayPreachersSon
Programmer
Sure... You'd have to put onBlur() events on your form fields, then run JavaScript to hide/show the other form field. Something like this:
If you enter "1" on box 1, and "2" in box 2, box 3 shows up.. Otherwise box 3 remains hidden.
Hope this helps!
Dan
Code:
<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
function checkFormValues()
{
var f1Value = document.getElementById('field1').value;
var f2Value = document.getElementById('field2').value;
var f3 = document.getElementById('field3');
if (f1Value == '1' && f2Value == '2')
f3.style.visibility = 'visible';
else
f3.style.visibility = 'hidden';
}
</SCRIPT>
</HEAD>
<BODY>
<FORM>
Field 1: <INPUT TYPE="text" ID="field1" onBlur="checkFormValues();"><BR>
Field 2: <INPUT TYPE="text" ID="field2" onBlur="checkFormValues();"><BR>
Field 3: <INPUT TYPE="text" ID="field3" STYLE="visibility:hidden;"><BR>
</FORM>
</BODY>
</HTML>If you enter "1" on box 1, and "2" in box 2, box 3 shows up.. Otherwise box 3 remains hidden.
Hope this helps!
Dan
Try this:
<html>
<head>
<title> New Document </title>
<script language="javascript">
function test()
{
if(document.myform.text1.value=="test"
{
document.myform.text2.style.display='block';
}
}
</script>
</head>
<body>
<form name="myform">
<input type="text" name="text1" onblur="javascript:test()">
<input type="text" name="text2" style="display:none">
<input type="submit">
</form>
</body>
</html>
J~
<html>
<head>
<title> New Document </title>
<script language="javascript">
function test()
{
if(document.myform.text1.value=="test"
{
document.myform.text2.style.display='block';
}
}
</script>
</head>
<body>
<form name="myform">
<input type="text" name="text1" onblur="javascript:test()">
<input type="text" name="text2" style="display:none">
<input type="submit">
</form>
</body>
</html>
J~
- Thread starter
- #4
MichiganRon
MIS
I have one piece of advice for using the above code: Be sure that your page works in NS and IE.
For instance, the
property cannot be changed at runtime (after the page has loaded) in NS, but it can in IE. So chappi's suggestion might work in IE, but it probably won't in NS. I'm not sure if the
property can be changed at runtime. You'll need to test it out.
Good luck,
-Ron
-We all play from the same deck of cards, it's how we play the hand we are dealt which makes us who we are.
For instance, the
Code:
display
Code:
visibilityGood luck,
-Ron
-We all play from the same deck of cards, it's how we play the hand we are dealt which makes us who we are.
MichiganRon
MIS
To hide the title and the form field, place both items in a
tag and hide the span instead of the individual field:
Note: I moved the
and
attributes from the field to the span tag. Also, all tags and attributes need to be lowercase for your page to be XHTML compliant. I made the appropriate changes to the line that I altered.
Hope that does what you want.
-Ron
-We all play from the same deck of cards, it's how we play the hand we are dealt which makes us who we are.
Code:
<span></span>
Code:
<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
function checkFormValues()
{
var f1Value = document.getElementById('field1').value;
var f2Value = document.getElementById('field2').value;
var f3 = document.getElementById('field3');
if (f1Value == '1' && f2Value == '2')
f3.style.visibility = 'visible';
else
f3.style.visibility = 'hidden';
}
</SCRIPT>
</HEAD>
<BODY>
<FORM>
Field 1: <INPUT TYPE="text" ID="field1" onBlur="checkFormValues();"><BR>
Field 2: <INPUT TYPE="text" ID="field2" onBlur="checkFormValues();"><BR>
Code:
<span id="field3" style="visibility:hidden;">Field 3: <input type="text"><br /></span>
Code:
</FORM>
</BODY>
</HTML>Note: I moved the
Code:
id="field3"
Code:
style="visibility:hidden;"Hope that does what you want.
-Ron
-We all play from the same deck of cards, it's how we play the hand we are dealt which makes us who we are.
- Thread starter
- #7
Here is my updated code with the form fields I need, but it does not seem to work now... I am guessing I am using the wrong operator for "OR"
<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
function checkFormValues()
{
var f1Value = document.getElementById('urgency').value;
var f2 = document.getElementById('phone').value;
var f3 = document.getElementById('timetocall');
if (f1Value == 'We will be needing help in the near future.' | We need help immediately!)
f2.style.visibility = 'visible';
f3.style.visibility = 'visible';
else
f2.style.visibility = 'hidden';
f3.style.visibility = 'hidden';
}
</SCRIPT>
</HEAD>
<BODY>
<FORM>
<p><select size="1" name="urgency">
<option>We might be needing help in the near future.</option>
<option>We will be needing help in the near future.</option>
<option>We need help immediately!</option>
</select><br>
<span id="timetocall" style="visibility:hidden;">Best time to call: <input type="text"><br /></span>
<span id="phone" style="visibility:hidden;">Phone Number: <input type="text"><br /></span>
</p>
</FORM>
</BODY>
</HTML>
<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
function checkFormValues()
{
var f1Value = document.getElementById('urgency').value;
var f2 = document.getElementById('phone').value;
var f3 = document.getElementById('timetocall');
if (f1Value == 'We will be needing help in the near future.' | We need help immediately!)
f2.style.visibility = 'visible';
f3.style.visibility = 'visible';
else
f2.style.visibility = 'hidden';
f3.style.visibility = 'hidden';
}
</SCRIPT>
</HEAD>
<BODY>
<FORM>
<p><select size="1" name="urgency">
<option>We might be needing help in the near future.</option>
<option>We will be needing help in the near future.</option>
<option>We need help immediately!</option>
</select><br>
<span id="timetocall" style="visibility:hidden;">Best time to call: <input type="text"><br /></span>
<span id="phone" style="visibility:hidden;">Phone Number: <input type="text"><br /></span>
</p>
</FORM>
</BODY>
</HTML>
MichiganRon
MIS
There are two "||" (pipes) in an OR. Try this:
-Ron
-We all play from the same deck of cards, it's how we play the hand we are dealt which makes us who we are.
Code:
<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
function checkFormValues()
{
var f1Value = document.getElementById('urgency').value;
var f2 = document.getElementById('phone').value;
var f3 = document.getElementById('timetocall');
if (
Code:
f1Value == 'We will be needing help in the near future.' || f1Value == 'We need help immediately!')
Code:
f2.style.visibility = 'visible';
f3.style.visibility = 'visible';
else
f2.style.visibility = 'hidden';
f3.style.visibility = 'hidden';
}
</SCRIPT>
</HEAD>
<BODY>
<FORM>
<p><select size="1" name="urgency">
<option>We might be needing help in the near future.</option>
<option>We will be needing help in the near future.</option>
<option>We need help immediately!</option>
</select><br>
<span id="timetocall" style="visibility:hidden;">Best time to call: <input type="text"><br /></span>
<span id="phone" style="visibility:hidden;">Phone Number: <input type="text"><br /></span>
</p>
</FORM>
</BODY>
</HTML>-Ron
-We all play from the same deck of cards, it's how we play the hand we are dealt which makes us who we are.
- Thread starter
- #9
No Go.. Code Changed to this:
<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
function checkFormValues()
{
var f1Value = document.getElementById('urgency').value;
var f2 = document.getElementById('phone').value;
var f3 = document.getElementById('timetocall');
if (f1Value == 'We will be needing help in the near future.') || f1Value == ('We need help immediately!')
f2.style.visibility = 'visible';
f3.style.visibility = 'visible';
else
f2.style.visibility = 'hidden';
f3.style.visibility = 'hidden';
}
</SCRIPT>
</HEAD>
<BODY>
<FORM>
<p><select size="1" name="urgency" onBlur="checkFormValues();">
<option>We might be needing help in the near future.</option>
<option>We will be needing help in the near future.</option>
<option>We need help immediately!</option>
</select><br>
<span id="timetocall" style="visibility:hidden;">Best time to call: <input type="text"><br /></span>
<span id="phone" style="visibility:hidden;">Phone Number: <input type="text"><br /></span>
</p>
</FORM>
</BODY>
</HTML>
<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
function checkFormValues()
{
var f1Value = document.getElementById('urgency').value;
var f2 = document.getElementById('phone').value;
var f3 = document.getElementById('timetocall');
if (f1Value == 'We will be needing help in the near future.') || f1Value == ('We need help immediately!')
f2.style.visibility = 'visible';
f3.style.visibility = 'visible';
else
f2.style.visibility = 'hidden';
f3.style.visibility = 'hidden';
}
</SCRIPT>
</HEAD>
<BODY>
<FORM>
<p><select size="1" name="urgency" onBlur="checkFormValues();">
<option>We might be needing help in the near future.</option>
<option>We will be needing help in the near future.</option>
<option>We need help immediately!</option>
</select><br>
<span id="timetocall" style="visibility:hidden;">Best time to call: <input type="text"><br /></span>
<span id="phone" style="visibility:hidden;">Phone Number: <input type="text"><br /></span>
</p>
</FORM>
</BODY>
</HTML>
MichiganRon
MIS
You can't close the parenthesis of the
statement and then add another condition. Also, you're missing some brackets:
-Ron
-We all play from the same deck of cards, it's how we play the hand we are dealt which makes us who we are.
Code:
if
Code:
function checkFormValues()
{
var f1Value = document.getElementById('urgency').value;
var f2 = document.getElementById('phone').value;
var f3 = document.getElementById('timetocall');
if
Code:
(f1Value == 'We will be needing help in the near future.' || f1Value == 'We need help immediately!'){
Code:
f2.style.visibility = 'visible';
f3.style.visibility = 'visible';
Code:
}
Code:
else
Code:
{
Code:
f2.style.visibility = 'hidden';
f3.style.visibility = 'hidden';
}-Ron
-We all play from the same deck of cards, it's how we play the hand we are dealt which makes us who we are.
- Thread starter
- #11
The code compiles correctly now, but when you change the drop down, it produces a style error. Current code:
<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
function checkFormValues()
{
var f1Value = document.getElementById('urgency').value;
var f2 = document.getElementById('phone').value;
var f3 = document.getElementById('timetocall');
if (f1Value == 'We will be needing help in the near future.' || f1Value == 'We need help immediately!')
{ f2.style.visibility = 'visible';
f3.style.visibility = 'visible';}
else{
f2.style.visibility = 'hidden';
f3.style.visibility = 'hidden';}
}
</SCRIPT>
</HEAD>
<BODY>
<FORM>
<p><select size="1" name="urgency" onBlur="checkFormValues();">
<option>We might be needing help in the near future.</option>
<option>We will be needing help in the near future.</option>
<option>We need help immediately!</option>
</select><br>
<span id="timetocall" style="visibility:hidden;">Best time to call: <input type="text"><br /></span>
<span id="phone" style="visibility:hidden;">Phone Number: <input type="text"><br /></span>
</p>
</FORM>
</BODY>
</HTML>
<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
function checkFormValues()
{
var f1Value = document.getElementById('urgency').value;
var f2 = document.getElementById('phone').value;
var f3 = document.getElementById('timetocall');
if (f1Value == 'We will be needing help in the near future.' || f1Value == 'We need help immediately!')
{ f2.style.visibility = 'visible';
f3.style.visibility = 'visible';}
else{
f2.style.visibility = 'hidden';
f3.style.visibility = 'hidden';}
}
</SCRIPT>
</HEAD>
<BODY>
<FORM>
<p><select size="1" name="urgency" onBlur="checkFormValues();">
<option>We might be needing help in the near future.</option>
<option>We will be needing help in the near future.</option>
<option>We need help immediately!</option>
</select><br>
<span id="timetocall" style="visibility:hidden;">Best time to call: <input type="text"><br /></span>
<span id="phone" style="visibility:hidden;">Phone Number: <input type="text"><br /></span>
</p>
</FORM>
</BODY>
</HTML>
MichiganRon
MIS
Okay, here you go...
You must assign a value to each "option" in the drop down box. That is the value you will be referencing in the javascript, not the text which is displayed.
I made a few different changes this time, so I won't be referencing my changes in a different color like before.
I have two pieces of advice:
1. When you post code to tek-tips, enclose the code in
[/code] tags to make it more readable.
2. Refine your javascript to work in more browsers. Different versions of IE & NS reference the Document Object Model (DOM) in different ways. The above code will not work in all browsers. I found a good example of code that will work here (
Good luck,
-Ron
-We all play from the same deck of cards, it's how we play the hand we are dealt which makes us who we are.
You must assign a value to each "option" in the drop down box. That is the value you will be referencing in the javascript, not the text which is displayed.
I made a few different changes this time, so I won't be referencing my changes in a different color like before.
Code:
<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
function checkFormValues()
{
var f1Value = document.getElementById('urgency').value;
var f2 = document.getElementById('phone');
var f3 = document.getElementById('timetocall');
if (f1Value == "2" || f1Value == "3"){
f2.style.visibility = "visible";
f3.style.visibility = "visible";
}else{
f2.style.visibility = "hidden";
f3.style.visibility = "hidden";
}
}
</SCRIPT>
</HEAD>
<BODY>
<FORM>
<p><select size="1" name="urgency" onChange="checkFormValues();">
<option value="1">We might be needing help in the near future.</option>
<option value="2">We will be needing help in the near future.</option>
<option value="3">We need help immediately!</option>
</select><br>
<span id="timetocall" style="visibility:hidden;">Best time to call: <input type="text"><br /></span>
<span id="phone" style="visibility:hidden;">Phone Number: <input type="text"><br /></span>
</p>
</FORM>
</BODY>
</HTML>I have two pieces of advice:
1. When you post code to tek-tips, enclose the code in
Code:
[code]2. Refine your javascript to work in more browsers. Different versions of IE & NS reference the Document Object Model (DOM) in different ways. The above code will not work in all browsers. I found a good example of code that will work here (
Good luck,
-Ron
-We all play from the same deck of cards, it's how we play the hand we are dealt which makes us who we are.
- Status
Similar threads
- Question
- Locked
- Question