Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New Coder
    Join Date
    Mar 2003
    Posts
    61
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Disable Submit until form is complete

    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.

  • #2
    Kor
    Kor is offline
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts
    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()">
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*

  • #3
    Senior Coder
    Join Date
    Jun 2002
    Posts
    1,404
    Thanks
    2
    Thanked 32 Times in 32 Posts
    Ashley...here's a simple validator, with some commenting and a few tricks. Hope it helps.
    Code:
    <!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&#58;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>

  • #4
    New Coder
    Join Date
    Mar 2003
    Posts
    61
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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...

  • #5
    Senior Coder
    Join Date
    Jun 2002
    Posts
    1,404
    Thanks
    2
    Thanked 32 Times in 32 Posts
    Not at all. Was new myself once. This:
    Code:
    <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


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •