How to trigger and handle form submission in jQuery?
Question
I am trying to trigger a form submit and handle it using jquery. Below is my code:
<html>
<body>
<form>
<input value="hello" name="check">
<input type="submit" value="abc">
</form>
</body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$("form").trigger("submit", (event) => {
console.log(event)
event.preventDefault();
})
</script>
</html>
However, when I run this code, my form submits in an infinite loop. I was expecting the console to print the event object and stop submission from happening. What is wrong in my code and how can I fix this?
2 answers
solution1
4 ACCPTED 2018-10-04 12:08:41
The trigger call doesn't take a function for its second argument, so you can't use preventDeafult in that way, unfortunately. The second argument for trigger takes in extra parameters which will be passed onto the handler.
You can, however, write another bit of code to intercept the form submission:
// this code handles the event from the form submission $('form').submit(e => { e.preventDefault(); console.log('Within submit'); }); // this codes triggers the form submission $("form").trigger("submit")
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <form> <input value="hello" name="check"> <input type="submit" value="abc"> </form>
To expand on how the second argument to trigger works, here's an example which shows the arguments which have been passed into the submit function. You can see that each item of the array passed to trigger has been passed as an argument to submit , as well as the actual event.
// this code handles the event from the form submission $('form').submit(function(e) { e.preventDefault(); console.log('Within submit'); console.dir(arguments); }); // this codes triggers the form submission $("form").trigger("submit", ['more', 'arguments', 'for', 'submit'])
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <form> <input value="hello" name="check"> <input type="submit" value="abc"> </form>
solution2
0 2018-10-04 12:35:34
jQuery submit() function triggers when a user tries to submit a form. jQuery submit form method attaches a handler, which executes when the submit event is fired.
The syntax for submit form using jQuery submit() function:
jQuery .submit() API documentation
jQuery .submit() simple example
This signature is used without any arguments. This method is a shortcut for .trigger( "submit" ) .
It is used as (DOM_OBJECT).submit(handler)
Where the handler is a function, which is executed when the form is submitted. This method is a shortcut for .on( "submit", handler ) .
Following example demonstrates submit() function usage for form submission using jQuery.
$("form").submit(function(event) {
$("span").text("Submitted Successfully...").show();
event.preventDefault();
});
You may have noticed event.preventDefault() in the above code. You will see an alert, if you try the above example after removing this line. We used alert() method as the default action. So the event.preventDefault() is required in the code to prevent this default action.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.