...
PDA

Disable Submit until form is complete

ashleypower
10-27-2003, 06:48 PM
I have a form in which all fields must be complete. I've written a simple code that determines whether or not all fields have been completed. If all the fields are completed, then you are sent to a new page.

The button will let you know if you have an empty field, but even if there are empty fields, it sends you to the next page. For now, i've made the validation script and the script that sends you to the next page separate buttons. I'd like this all to be taken care of with one button click.

Is there any way that I can put both of these scripts on one submit button?

Here's my code:

============================================
<SCRIPT LANGUAGE="JavaScript">
<!--

function go() {
window.location='frame.htm';
}

function checkit() {

if(document.soac.FirstName.value =="") {
alert("Please enter first name");
return false;
}

if(document.soac.LastName.value =="") {
alert("Please enter last name");
return false;
}

if(document.soac.MailAddress.value =="") {
alert("Please enter your address");
return false;
}

if(document.soac.email.value.indexOf("@") == -1 || document.soac.email.value == "") {
alert("Please enter email address.");
document.soac.email.focus();
return false;
}

if(document.soac.email.value != document.soac.emailconfirm.value) {
alert("Confirm E-mail address.");
return false;
}

if(document.soac.PhoneNumber.value =="") {
alert("Please enter your phone number");
return false;
}

if(document.soac.HighschoolAttend.value =="") {
alert("Please enter your Highschool");
return false;
}

if(document.soac.FatherOccupation.value =="") {
alert("Please enter your Father's Occupation");
return false;
}

if(document.soac.MotherOccupation.value =="") {
alert("Please enter your Mother's Occupation");
return false;
} else {
alert("COMPLETE!");
}

}

function checkCR(evt) {

var evt = (evt) ? evt : ((event) ? event : null);

var node = (evt.target) ? evt.target : ((evt.srcElement) ? evt.srcElement : null);

if ((evt.keyCode == 13) && (node.type=="text")) {return false;}

}

document.onkeypress = checkCR;

//-->
</SCRIPT>
===========================================
Any help appreciated. Please keep in mind that I am kinda new to JavaScripting...Thanks.
Kor
10-28-2003, 08:25 AM
The way you must call a verifying function from submit is to use a return true/false condition, which will deny the submit process until the conditions are fulfiled:


<script>
function verify(){
if (condition fulfiled){return true}
else if (condition failed){return false}
}
</script>

<form onsubmit = "return verify()">
adios
10-28-2003, 06:02 PM
Ashley...here's a simple validator, with some commenting and a few tricks. Hope it helps. :)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
<title>untitled</title>
<script type="text/javascript" language="javascript">

function checkit(oForm) //get form object
{
var msg = ''; //msg starts as empty string

if (oForm.FirstName.value == "") //if error, add to string (+=)
msg += "\nNo ~ First Name ~ entered";

if (oForm.LastName.value == "")
msg += "\nNo ~ Last Name ~ entered";

if (oForm.MailAddress.value == "")
msg += "\nNo ~ Mailing Address ~ entered";

if (oForm.email.value == "")
msg += "\nNo ~ E-mail address ~ entered";

if (oForm.email.value != "" && oForm.email.value.indexOf("@") == -1)
msg += "\nInvalid ~ E-mail address ~";

if (oForm.email.value != "" && oForm.email.value != oForm.emailconfirm.value)
msg += "\n~ Confirm E-mail address ~ is different";

if (oForm.PhoneNumber.value == "")
msg += "\nNo ~ Phone Number ~ entered";

if (oForm.HighschoolAttend.value == "")
msg += "\nNo ~ High School Attended ~ entered";

if (oForm.FatherOccupation.value == "")
msg += "\nNo ~ Father's Occupation ~ entered";

if (oForm.MotherOccupation.value == "")
msg += "\nNo ~ Mother's Occupation ~ entered";

if (msg != '') //any errors?
{
msg = 'The following errors were detected:\n\n' + msg;
msg += '\n\n\nPlease complete and re-submit. Thank you.\n';
alert(msg);
return false; //stop submission
}
return confirm('Complete! Submit this data?'); //do it - or not
}


function checkCR(evt)
{
var evt = (evt) ? evt : (event) ? event : null;
var node = (evt.target) ? evt.target : (evt.srcElement) ? evt.srcElement : null;
if (evt && node && evt.keyCode == 13 && node.type == 'text')
return false;
}

document.onkeypress = checkCR;

</script>
</head>
<body>
<form action="javascript:alert('submitted')" method="post" onsubmit="return checkit(this)"><!-- pass form object(this) -->
<input type="text" name="FirstName" value="">____First Name<br /><br />
<input type="text" name="LastName" value="">____Last Name<br /><br />
<input type="text" name="MailAddress" value="">____Mailing Address<br /><br />
<input type="text" name="email" value="">____E-mail address<br /><br />
<input type="text" name="emailconfirm" value="">____Confirm E-mail address<br /><br />
<input type="text" name="PhoneNumber" value="">____Phone Number<br /><br />
<input type="text" name="HighschoolAttend" value="">____High School Attended<br /><br />
<input type="text" name="FatherOccupation" value="">____Father's Occupation<br /><br />
<input type="text" name="MotherOccupation" value="">____Mother's Occupation<br /><br /><br />
<input type="reset" value="clear" onclick="return confirm('Clear all entries?')">
<input type="submit" value="done">
</form>
</body>
</html>
ashleypower
10-28-2003, 07:19 PM
This is awesome dude, exactly what I was looking for, thanks!

One question...I don't understand the oForm...i've seen it before...sorry if that's dumb, im new to this...
adios
10-28-2003, 07:38 PM
Not at all. Was new myself once. This:

<form........onsubmit="return checkit(this)">

...passes the Form object, which represents the form for scripting purposes, to the validator function. It does it because onsubmit is actually a property of Form (a variable, Form.onsubmit). Any JavaScript code running in that property - like a call to a function - can reference that 'owning object' with this. So instead of jumping over to the function, only to need a reference to 'find' the form object that you just left, you 'take it with you'. Notice: no form name necessary.

The 'o' ?

function checkit(oForm)

...just identifies it as a variable holding an object. Makes it easier to keep track as your programs get more involved.

var sMsg ------------------> string
var bWhich ----------------> boolean
var iLoop ------------------> integer

EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum