How To Submit Form Using jQuery
Last Updated : Mar 11, 2024
IN - jQuery | Written & Updated By - Ashish
In this article we will show you the solution of how to submit form using jQuery, when a user tries to submit a form, the element receives the submit event. It is only compatible with <form> elements.
Forms can be submitted by pressing Enter while a certain list of areas have focus, or by explicitly clicking an <input type="submit">, <input type="image">, or <button type="submit">.
With Internet Explorer, there is no bubbling of the JavaScript submit event.
jQuery 1.4, that has normalized the event's behavior, will, nevertheless, ensure that scripts which rely upon event delegation will submit event function uniformly across browsers.
A form's submission triggers the submit event. Only <form> elements may be utilized with this event.
A submit() method attaches or starts a function that runs whenever a submit event happens. An attempt to submit a form by a user triggers the jQuery submit event.
This occurrence only involves the <form> element. When a particular form element has focus, the submit button can be clicked or the enter key on the keyboard can be used to submit the form.
The submit() method associates a running function with the submit event when it occurs.
Step By Step Guide On How To Submit Form Using jQuery :-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>submit demo</title>
<style>
p {
margin: 0;
color: blue;
}
div,p {
margin-left: 10px;
}
span {
color: red;
}
</style>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<p>Type 'javatpoint' 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>
- The first step is to write <HTML>, which tells the browser what version of HTML we're using. A tag is the first element of an HTML document.
- Use the <head> tag to describe the project's heading. In contrast to the final brackets, which are closed, the title and final brackets both are open. External style sheets, also known as step-by-step style sheets, appear on a webpage based on the URL or path.
- Next, we create the font size and weight in style.
- Then we style by closing our heads.
- The <body> tag, which describes the webpage's body, is then placed after this. This is where the website's content is written.
- Then we create a form, under the form we create text and submit.
- Then we close the form.
- The <script> tag was then added. The script tag also includes the javascript google API run or an explanation of the code or file we used.
- The script is then closed.
- After that we close program using </center></body></html>
Conclusion :-
You can attach a function to run whenever a submit event occurs or submit events using the jQuery submit() method.
Only the form elements may be used with this technique.
You must find the submit event in order to submit the form using the jQuery click event. Let's submit a form both with and without the use of a click event.
I hope this article on how to submit form using jQuery helps you and the steps and method mentioned above are easy to follow and implement.
About Ashish
