In jQuery Submit Form example, I have covered different methods of submitting a HTML form using jQuery API. If you are looking for AJAX Form POST, check this : Ajax Form Post
Below is the sample HTML Form:
<form name="myForm" id="testForm" method="POST" action="send.php"> UserName: <input type="text" name="user" value="test" /> <br/> Password: <input type="password" name="password" value="test"/> <br/> </form>
Form is Submitted using any of the below example. .submit() method is used to submit a Form.
//1) Submit Form using Form's ID
$("#testForm").submit();
//2 Submit Form using Form's Name
$("form[name='myForm']").submit();
//3 Submit Form using Form's Index.
$("form:first").submit();
jQuery Form Submit Event Handler
We can attach event handler to .submit() function. When the form is submitted event handler is called. Form submission can be controlled by the return type of the event handler. If it returns ‘true‘, then the form is submitted. If it return ‘false‘, then the form is not submitted.
$("#testForm").submit(function()
{
alert('Form is submitting');
return true;
});
Note: When event handler is provided in the .submit() function, It does not invoke Form Submit, It binds only event handler. To invoke form submit, you need to call .submit() without any arguments. See the example.
jQuery Submit Form Example
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
</head>
<body align="center">
<div align="center">
<h1>Jquery Form Submit Demo</h1>
<form name="myForm" id="testForm" method="POST" action="send.php">
UserName: <input type="text" name="user" value="test" /> <br/>
Password: <input type="password" name="password" value="test"/> <br/>
</form>
<br/>
<input type="button" id="submit1" value="Submit by Form ID" />
<input type="button" id="submit2" value="Submit by Form Name" />
<input type="button" id="submit3" value="Submit by Form Index" />
<input type="button" id="submit4" value="Submit with Event Handler" />
</div>
</body>
<script>
$(document).ready(function()
{
$("#submit1").click(function()
{
$("#testForm").submit();
});
$("#submit2").click(function()
{
$("form[name='myForm']").submit();
});
$("#submit3").click(function()
{
$("form:first").submit();
});
$("#submit4").click(function()
{
$("#testForm").submit(function()
{
alert('Form is submitting');
return true;
});
$("#testForm").submit(); //invoke form submission
});
});
</script>
</html>
Reference: Jquery Documentation
