Home »
jQuery »
jQuery Examples
Submit a form using jQuery
Learn, how to submit a form using jQuery?
Submitted by Pratishtha Saxena, on February 09, 2023
There are different types of buttons in HTML. Whenever we are using a button in a form, where we have to submit the form data to the backend using ajax, always make sure to use the button type as 'submit', i.e., <button type = 'submit'>. But this is not the only thing we need to do. In order to submit the form, jQuery submit() method is used.
jQuery submit() Method
The submit() method helps to submit the inputs of the form fields. In other words, we can say that the submit event gets triggered whenever the form is submitted by the user. Some kind of function can also be attached in order to perform other tasks. This method only works for a form element.
Syntax:
$('selector').submit();
$('selector').submit(function);
It takes one optional parameter – function. The function is the custom function that can be defined to do some tasks when this method gets triggered. The example given below allows us to submit the form when the appropriate submit button is clicked. Once you get the alert it is assured that the form has been submitted.
jQuery example to submit a form
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<title>Document</title>
</head>
<body>
<h2>Submit a form using jQuery</h2>
<h4>Click the submit button to Submit the form fields.</h4>
<hr>
<h3><u>Fill the FORM</u></h3>
<form>
First Name: <input type="text"><br><br>
Last Name: <input type="text"><br><br>
Email ID: <input type="text"><br><br>
Contact: <input type="text"><br><br>
<button type="submit">Submit</button>
</form>
<hr>
<h4 id="one"></h4>
</body>
<script type="text/javascript">
$(document).ready(function(){
$('button').click(function(){
$('form').submit();
alert('Form Submitted');
});
});
</script>
</html>
Output:
