What is the event to catch form submission in Javascript?

问题

A couple of questions here:

I was wondering what event do I use to execute some javascript on form submission (to do some validation)?
Once I have done my validation, how do I then submit the form in javascript ?

Cheers...

回答1:

Let's say you have a form named myForm:

var form = document.getElementById('myForm');

To catch submission:

try {
    form.addEventListener("submit", someFunction, false);
} catch(e) {
    form.attachEvent("onsubmit", someFunction); //Internet Explorer 8-
}

Note: If you want to stop the form from submitting, you make someFunction return false.

To submit the form:

form.submit();

回答2:

You can use addEventListener(event, callback) but it's never been properly supported by Internet Explorer.

IE uses attachEvent(event, callback) instead.

I strongly recommend using a prebuilt addEvent function (lots available out there) or a library like jQuery, Prototype, Mootools, etc. since they all have excellent event handling functions built-in.

回答3:

If you use jquery, it has a nice built-in form submission event hook that can make life very easy. Check out the following:

http://docs.jquery.com/Events/submit

回答4:

1) Are you looking for OnSubmit event?

2) You can call a function like validate() on onsubmit event and return false if validation fails. If false returned return false from the onsubmit function.

may be like,

<form name="test" OnSubmit = "return Submit()">

function Submit()
{
return Validate()
}

function Validate()
{
//Validation code goes here
}

回答5:

I took a look at the comments by Serhiy on Sasha's post. The JsFiddle example Serhiy provided was interesting, and I wanted to write an answer that describes the behavior that Serhiy mentioned:

Let's say you have a form named myForm:

var form = document.getElementById('myForm');

To catch submission when using a submit button (<input type='submit' >):

try {
    form.addEventListener("submit", validationFunction, false);
} catch(e) {
    form.attachEvent("onsubmit", validationFunction); //Internet Explorer 8-
}

Note: If you want to stop the form from submitting, you make validationFunction return false.

To submit the form via javascript:

form.submit();

NOTE: If you use an <input type="button" onclick="form.submit()" />, the onsubmit event handlers added with the attachEvent will not be called. Therefore, you should use something like:

or alternatively if you have a button:

You can add javascript to attach to the button's click event. var btnValidateAndSubmit = document.getElementById("btnValidateAndSubmit");

try {
    btnValidateAndSubmit .addEventListener("click", validationAndSubmitFunction, false);
} catch(e) {
    btnValidateAndSubmit .attachEvent("onclick", validationAndSubmitFunction); //Internet Explorer 8-
}

Finally, let's say you are working off a SharePoint web form for editing a list item, and you want to add custom validation to the web form. You can add the following javascript to the web form to add custom validation to the onclick for the OK buttons.

var oElements = document.getElementsByTagName("input");
for  (var i=0; i< oElements.length; i++)
{
   var elementName = oElements[i].getAttribute("Title");
   var elementType = oElements[i].getAttribute("type");
   var elementValue = oElements[i].value;

   if (elementType=="button" && elementValue=="OK") 
   {
    var okbutton = oElements[i];

   // alert("typeof okbutton.onclick = "+typeof okbutton.onclick);
    if (typeof okbutton.onclick == "function")
    {
        var previousfunction = okbutton.onclick;

        okbutton.onclick = function()
        {
            if (validateForm())
            {
                previousfunction();
            }
        };

    }
    else
    {
        var aspnetForm = document.getElementById("aspnetForm");
        aspnetForm.attachEvent("onsubmit",validateForm);

         okbutton.onclick = function()
        {
            if (validateForm())
            {
                aspnetForm.submit();
            }
        };
    }


    }
}

来源：https://stackoverflow.com/questions/931470/what-is-the-event-to-catch-form-submission-in-javascript

标签

javascript

javascript-events

validation