CODEWITHSUNDEEP
javascript
norris1023
norris1023

Reputation: 633

Show me a Simple javascript onSubmit handler

Hello again everyone i am working on this

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Form</title>
<script type="text/javascript">
</script>
</head>
<body>
<h2>**Form**</h2>
<form  name=form method="post" action="javascript" subject=RSVP" enctype="text/plain" >
<input type=text name="first" size="20"> First Name<BR>
<input type=text name="last" size="20"> Last Name<BR>
<input type="text" name="email" size="20"> E-Mail<BR><BR>
<input type="submit" value="Submit">
<input type="reset" value="Clear Form"><br>
</form>
 </body>
 </html>

I am getting really confused here.. I need to have a onsubmit form handler and a create validation script. Ok now if I am right the validation script is the the function that needs to be placed right? sorry i know some of you guys might think this is easy but I am still learning. Now I have examples in my book of it but they only due one at a time. Is there a way you can do a onsubmit of all or does it have to be one at a time? thanks

ok I have this one i am working on..

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
   <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
   <head>
   <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title>Form</title>
   <script type="text/javascript">
    <!--
   function validate_form()
    {
valid = true;

    if ( document.contact_form.contact_first.value == "" )
    {
            alert ( "Please fill in the 'Your Name' box." );
            valid = false;
     }

    return valid;
     }

 //-->

 </script>
 </head>
  <body>
 <h2>**Form**</h2>
 <form  name="contact_form"  method="post" action="javascript" onSubmit="return  validate_form();"> 
 <input type=text name="contact_first" size="20"> First Name<BR>
 <input type=text name="contact_last" size="20"> Last Name<BR>
 <input type="text" name="contact_email" size="20"> E-Mail<BR><BR>
 <input type="submit" value="Submit">
 <input type="reset" value="Clear Form"><br>
 </form>



 </body>

</html>

now Can i just copy the function for the other two or how do i do the one for the email?

Upvotes: 5

Views: 19126

Answers (4)

Tomgrohl
Tomgrohl

Reputation: 1767

I've added an example here of how to do it:

http://jsfiddle.net/tomgrohl/JMkAP/

I added an onsubmit handler to the form:

<form method="post" action="javascript" enctype="text/plain" onsubmit="return valForm(this);">

And added this at the top of the page, a simple validation function:

<script type="text/javascript">
function valForm( form ){

    var firstVal, lastVal, emailVal, error = '';

    firstVal= form.first.value;  
    lastVal= form.last.value;
    emailVal= form.email.value;

    //OR
    //firstVal= document.getElementById('first').value;  
    //lastVal= document.getElementById('last').value;
    //emailVal= document.getElementById('email').value;

    if( firstVal.length == 0){
        error += 'First name is required\n';
    }

    if( lastVal.length == 0){
        error += 'Last name is required\n';
    }

    if( emailVal.length == 0){
        error += 'Email is required\n';
    }

    if( error ){
        alert( error );
        return false;
    }

    return true;
}
</script>

Upvotes: 7

mcgrailm
mcgrailm

Reputation: 17640

might I suggest you use jQuery and jQuery validate to validate your form no need to re-invent the wheel

be sure to check out validator's demo

Upvotes: 0

Alex K.
Alex K.

Reputation: 175776

I need to have a onsubmit form handler

You said it; <form onsubmit="return myValidate(this);" .... >

myValidate is your validation function that returns true|false indicating whether or not you want the form to be submitted to its handler script (which your also missing).

Upvotes: 0

Cheeso
Cheeso

Reputation: 192477

OnSubmit is invoked once for the form.

You can validate all the form fields in one onSubmit function, during one call to that function.

function myOnSubmitHandler(theForm) { 
    if (theForm.data1.value == "") { 
        alert("This field is empty.");
        return false; // suppress form submission
    } else {
        return true; // A-OK, form will be submitted
    }
}

in HTML:

<form method="POST" ACTION="SomethingOnServer.php" 
      onSubmit="return myOnSubmitHandler(this);">

Upvotes: 1

Related Questions