I have a form with an onsubmit
attribute. I need to bind a new submit event and I need this one to be executed before any existing submit functions.
The following code demonstrates the problem.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Test</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
jQuery(function($) {
// a plugin
$('form').submit(function() {
alert("Second");
});
// an other plugin
$('form').submit(function() {
alert("Third");
});
// this event must always be executed as first event
$('form').submit(function() {
alert("Always First");
});
});
</script>
</head>
<body>
<form onsubmit="javascript:alert('Fourth');">
<p>
<input type="submit">
</p>
</form>
</body>
</html>
If you execute the script, first you get "Second", then "First".
Is is possible to bind a new submit event and specify whether the function must be called before any existing event?
Constraints:
onsubmit
attribute contains a quite complex logic written by RailsAny idea?
The inline submit event fires first, you could get a reference to it, nullify the onsubmit
attribute on the form
element, and then bind your new submit event, this one will execute your old submit handler:
jQuery(function($) {
var form = $('form'), oldSubmit = form[0].onsubmit;
form[0].onsubmit = null;
$('form').submit(function() {
alert("First");
oldSubmit.call(this); // preserve the context
});
});
Note that I use the call
method to invoke your old submit handler, this is to preserve the this
keyword inside that function, it will be the form
element itself.
If your original onsubmit
handler has some validation behavior, you can get its return value by var ret = oldSubmit.call(this);
Check the above example here.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With