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 TouchToneTommy on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!
Gray (Unclickable) Submit Button (until Info in Form is Filled Out)?
- Thread starter Chinyere
- Start date
Yes.
Here would be your initial state:
You'd need a validation function:
You'd call your validation function on each form element's onblur or onchange event, like so:
Whenever you change a field, the validation function is called. If any field is not valid, you can display a message to the user (or not, whatever you want). If it passes all tests, the button becomes enabled, and the user can then click on it.
*cLFlaVA
----------------------------
[tt]insert funny quotation here.[/tt]
Here would be your initial state:
Code:
<input type="submit" name="sub_button" disabled />You'd need a validation function:
Code:
function validate( the_form ) {
// some validation tests here
if (something is not valid) return false;
if (something else is not valid) return false;
the_form.sub_button.disabled = false;
}You'd call your validation function on each form element's onblur or onchange event, like so:
Code:
<input type="text" name="first_name" onchange="return validate();" />Whenever you change a field, the validation function is called. If any field is not valid, you can display a message to the user (or not, whatever you want). If it passes all tests, the button becomes enabled, and the user can then click on it.
*cLFlaVA
----------------------------
[tt]insert funny quotation here.[/tt]
You may also want to include <form onsubmit="return validate(this)"> to keep the form from being submitted by pressing enter in a field.
Also, I think cLFlaVA meant to type this:
Adam
"Computers make it easier to do a lot of things, but most of the things they make it easier to do don't need to be done." Andy Rooney.
Also, I think cLFlaVA meant to type this:
Code:
<input type="text" name="first_name" onchange="return validate([b]this.form[/b]);" />Adam
"Computers make it easier to do a lot of things, but most of the things they make it easier to do don't need to be done." Andy Rooney.
- Thread starter
- #5
- Thread starter
- #7
Hi cFLAVA, anyone,
May I get a *concrete* example of the form validation and input? I have been trying using the code this morning and I must be doing something wrong...![[dazed]](/data/assets/smilies/dazed.gif "[dazed] [dazed]")
My form contains fields for name, e-mail, company, title, address, etc. ...
Any help would be greatly appreciated. Thanks.
Chinyere![[afro2]](/data/assets/smilies/afro2.gif "[afro2] [afro2]")
May I get a *concrete* example of the form validation and input? I have been trying using the code this morning and I must be doing something wrong...
My form contains fields for name, e-mail, company, title, address, etc. ...
Any help would be greatly appreciated. Thanks.
Chinyere
Here is a simplified example. You'll have to write your own validation rules.
*cLFlaVA
----------------------------
[tt]insert funny quotation here.[/tt]
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "[URL unfurl="true"]http://www.w3.org/TR/html4/strict.dtd">[/URL]
<html>
<head>
<title>new document</title>
<script language="javascript" type="text/javascript">
<!--
function validate() {
var isNotValid = false;
var flds = new Array('name', 'address', 'city');
var e = document.forms['f'].elements;
for (var i = 0; i < flds.length; i++ ) {
if (e[ flds[ i ] ].value.length == 0) isNotValid = true;
}
e['sub'].disabled = isNotValid;
}
-->
</script>
</head>
<body>
<form name="f">
<fieldset>
<input type="text" name="name" onchange="validate(this.form);" />
<label for="t1">Is My Name</label><br />
<input type="text" name="address" onchange="validate(this.form);" />
<label for="t1">Is My Address</label><br />
<input type="text" name="city" onchange="validate(this.form);" />
<label for="t1">Is My City</label><br />
<input type="submit" value="Submit" name="sub" disabled />
</fieldset>
</form>
</body>
</html>*cLFlaVA
----------------------------
[tt]insert funny quotation here.[/tt]
- Thread starter
- #9
- Status
Similar threads
- Locked
- Question
