jQuery submit the form on button click example; Through this tutorial, you will learn how to submit the form on button click using jQuery submit() method.
jQuery Form Submit On Button Click
Let’s use the jQuery submit() function to submit form on button click in jQuery:
- jQuery submit() Event Method
- Syntax of jQuery submit() Event Method
- Parameters of jQuery submit() Event Method
- Example jQuery Form Submit On Button Click
jQuery submit() Event Method
jQuery form submit event occurs when a form is submitted. And also jQuery form submits event can only be used on HTML elements.
This event can only be used on HTML elements. The submit () method triggers the submit event or appends the function to run when the submitted event occurs.
Syntax of jQuery submit() Event Method
$(selector).submit()
It triggers the submit event for selected elements.
$(selector).submit(function)
Parameters of jQuery submit() Event Method
| Parameter | Description |
| Function | It is an optional parameter. It is used to specify the function to run when the submit event is executed. |
Example jQuery Form Submit On Button Click
Let’s see an example of jquery submit form on button click event with demonstrate jQuery submit().
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jquery submit form on button click event</title>
<style>
p {
margin: 0;
color: blue;
}
div,p {
margin-left: 10px;
}
span {
color: red;
}
</style>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
</head>
<body>
<p>Type 'test' to submit this form finally.</p>
<form action="javascript:alert( 'success!' );">
<div>
<input type="text">
<input type="submit">
</div>
</form>
<span></span>
<script>
$( "form" ).submit(function( event ) {
if ( $( "input:first" ).val() === "javatpoint" ) {
$( "span" ).text( "Submitted Successfully." ).show();
return;
}
$( "span" ).text( "Not valid!" ).show().fadeOut( 2000 );
event.preventDefault();
});
</script>
</body>
</html>
Recommended jQuery Tutorials
Recommended:-Jquery Selector by .class | name | #id | Elements
Recommended:-Get the Current Page URL in jQuery
Recommended:-jQuery Ajax Get() Method Example
Recommended:-jQuery Get Data Text, Id, Attribute Value By Example
Recommended:-Set data attribute value jquery
Recommended:-select multiple class in jquery
Recommended:-How to Remove Attribute Of Html Elements In jQuery
Recommended:-Get radio button value jquery by id, name, class
Recommended:-jQuery scrolltop animate example
Recommended:-jQuery – Remove Elements From array jQuery
Recommended:-Array to Comma Separated String jQuery
Recommended:-jQuery Ajax Form Submit with FormData Example
Recommended:-jQuery Form Validation Custom Error Message
