...

View Full Version : OnClick Form Field Change / Hide & Un-hide Field



dargpat
08-25-2008, 06:50 PM
I'm a noob I know ...so bare with me... but I need a javascript function that works onclick

I have 6 fields to a form

Fields 1 - 5 are viewable and 6 hidden on page load

I need a function if the user changes a value in field 3 to a certain value

then field 4 will be nulled and disabled

and field 6 will become viewable to enter info into

I hope this is understandable

Thanks
Darrel

Philip M
08-25-2008, 07:32 PM
Here you are:-



1<input type = "text" id = "field1"><br>
2<input type = "text" id = "field2"><br>
3<input type = "text" id = "field3" onchange = "disableField4()"><br>
<div id = "div1" style.display = "block">
4<input type = "text" id = "field4" ><br>
</div>
5<input type = "text" id = "field5"><br>
<div id = "div2" style="visibility: hidden">
6<input type = "text" id = "field6" > <br>
</div>

<script type = "text/javascript">
function disableField4() {
if (document.getElementById("field3").value == "12345") {
document.getElementById("field4").value = ""; // in case user fills in field4 before field3
document.getElementById("div1").style.display = "none";
document.getElementById("div2").style.visibility='visible';
}
}
</script>


The whole aim of practical politics is to keep the populace alarmed (and hence clamorous to be led to safety)
by menacing it with an endless series of hobgoblins, all of them imaginary.
H.L. Mencken 1880-1956, American Editor, Author, Critic, Humorist

Cranford
08-25-2008, 08:13 PM
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Any Title</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript">

var testVal = "hello";

function compare(nField){

if (nField.value == testVal)
{
var nFields = document.forms[0].getElementsByTagName('label');
nFields[3].style.display = "none";
nFields[3].lastChild.disabled = true;
nFields[5].className = "showField";
}
}

</script>
<style type="text/css">

body {background-color:#eae3c6;margin-top:60px}
form {width:620px;margin:auto;font-family:times;font-size:12pt}
fieldset {width:610px;background-color:#f0fff0;border:1px solid #87ceeb}
legend {font-family:times;font-size:14pt;color:#00008b;background-color:#87ceeb;padding-left:3px;padding-right:3px;margin-bottom:5px}
label {display:block;margin-left:5px}
input {text-align:right}
.altField {display:none}
.showField {display:block}
.submitBtn {font-family:tahoma;font-size:10pt;display:block;text-align:center;margin-left:auto;margin-right:auto;margin-top:5px;margin-bottom:5px}

</style>
</head>
<body>
<form action="" method="post">
<fieldset>
<legend>Form</legend>
<label> One <input type="text" size="10" value="1"></label>
<label> Two <input type="text" size="10" value="2"></label>
<label> Three <input type="text" size="10" value="3" onblur="compare(this)"></label>
<label> Four <input type="text" size="10" value="4"></label>
<label> Five <input type="text" size="10" value="5"></label>
<label class="altField"> Six <input type="text" size="10" value="6"></label>
<input type="submit" name="submit" value="Submit" class="submitBtn">
</fieldset>
</form>
</body>
</html>

dargpat
08-25-2008, 08:53 PM
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Any Title</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript">

var testVal = "hello";

function compare(nField){

if (nField.value == testVal)
{
var nFields = document.forms[0].getElementsByTagName('label');
nFields[3].style.display = "none";
nFields[3].lastChild.disabled = true;
nFields[5].className = "showField";
}
}

</script>
<style type="text/css">

body {background-color:#eae3c6;margin-top:60px}
form {width:620px;margin:auto;font-family:times;font-size:12pt}
fieldset {width:610px;background-color:#f0fff0;border:1px solid #87ceeb}
legend {font-family:times;font-size:14pt;color:#00008b;background-color:#87ceeb;padding-left:3px;padding-right:3px;margin-bottom:5px}
label {display:block;margin-left:5px}
input {text-align:right}
.altField {display:none}
.showField {display:block}
.submitBtn {font-family:tahoma;font-size:10pt;display:block;text-align:center;margin-left:auto;margin-right:auto;margin-top:5px;margin-bottom:5px}

</style>
</head>
<body>
<form action="" method="post">
<fieldset>
<legend>Form</legend>
<label> One <input type="text" size="10" value="1"></label>
<label> Two <input type="text" size="10" value="2"></label>
<label> Three <input type="text" size="10" value="3" onblur="compare(this)"></label>
<label> Four <input type="text" size="10" value="4"></label>
<label> Five <input type="text" size="10" value="5"></label>
<label class="altField"> Six <input type="text" size="10" value="6"></label>
<input type="submit" name="submit" value="Submit" class="submitBtn">
</fieldset>
</form>
</body>
</html>



Thanks Cranford
Exactly What I was looking for (Nice demo)

Cranford
08-25-2008, 09:02 PM
You're welcome.

Philip M
08-26-2008, 08:07 AM
Thanks Cranford
Exactly What I was looking for (Nice demo)


I don't like to say it :o but your script does not work. :eek:

var testVal = "hello";
if (nField.value == testVal)

But if hello is entered the value of nField becomes hello3.

Suggest alter testVal to = "hello3" - then it works.

Also, if the user fills in field4 before typing hello into field3 that value is not erased and is submitted with the form.


I have nothing but confidence in you. And very little of that.
Groucho Marx (1890 - 1977)

dargpat
08-26-2008, 12:32 PM
I don't like to say it :o but your script does not work. :eek:

var testVal = "hello";
if (nField.value == testVal)

But if hello is entered the value of nField becomes hello3.

Suggest alter testVal to = "hello3" - then it works.

Also, if the user fills in field4 before typing hello into field3 that value is not erased and is submitted with the form.


I have nothing but confidence in you. And very little of that.
Groucho Marx (1890 - 1977)

Not sure what you did but it worked for me and I ironed it all out in PHP ..so it still gave me a heads up what I need to do ..and so did yours also ..so thank you too:) ..my biggest concern was if the user needed field 6 or not ...didn't matter really if field 4 was nulled or not ...

Darrel

Cranford
08-26-2008, 03:50 PM
@dargpat
Please read your PMs.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum