How can I listen to the form submit event in javascript?
Why do people always use jQuery when it isn't necessary?
Why can't people just use simple JavaScript?
var ele = /*Your Form Element*/;if(ele.addEventListener){ ele.addEventListener("submit", callback, false); //Modern browsers}else if(ele.attachEvent){ ele.attachEvent('onsubmit', callback); //Old IE}callback is a function that you want to call when the form is being submitted.
About EventTarget.addEventListener, check out this documentation on MDN.
To cancel the native submit event (prevent the form from being submitted), use .preventDefault() in your callback function,
document.querySelector("#myForm").addEventListener("submit", function(e){ if(!isValid){ e.preventDefault(); //stop form from submitting }});Listening to the submit event with libraries
If for some reason that you've decided a library is necessary (you're already using one or you don't want to deal with cross-browser issues), here's a list of ways to listen to the submit event in common libraries:
jQuery
$(ele).submit(callback);Where
eleis the form element reference, andcallbackbeing the callback function reference. Reference
AngularJS (1.x)
<form ng-submit="callback()">$scope.callback = function(){ /*...*/ };Very straightforward, where
$scopeis the scope provided by the framework inside your controller. ReferenceReact
<form onSubmit={this.handleSubmit}>class YourComponent extends Component { // stuff handleSubmit(event) { // do whatever you need here // if you need to stop the submit event and // perform/dispatch your own actions event.preventDefault(); } // more stuff}Simply pass in a handler to the
onSubmitprop. ReferenceOther frameworks/libraries
Refer to the documentation of your framework.
Validation
You can always do your validation in JavaScript, but with HTML5 we also have native validation.
<!-- Must be a 5 digit number --><input type="number" required pattern="\d{5}">You don't even need any JavaScript! Whenever native validation is not supported, you can fallback to a JavaScript validator.
This is the simplest way you can have your own javascript function be called when an onSubmit occurs.
HTML
<form> <input type="text" name="name"> <input type="submit" name="submit"></form>JavaScript
window.onload = function() { var form = document.querySelector("form"); form.onsubmit = submitted.bind(form);}function submitted(event) { event.preventDefault();}
Based on your requirements you can also do the following without libraries like jQuery:
Add this to your head:
window.onload = function () { document.getElementById("frmSubmit").onsubmit = function onSubmit(form) { var isValid = true; //validate your elems here isValid = false; if (!isValid) { alert("Please check your fields!"); return false; } else { //you are good to go return true; } }}And your form may still look something like:
<form id="frmSubmit" action="/Submit"> <input type="submit" value="Submit" /> </form>