Submit event in jQuery


In this lesson, you will learn about the submit event in the jQuery.

Introduction to Submit Event in jQuery

Whenever a user enters input values of the form and submits it by clicking on the submit button, or by pressing enter, the submit event is fired by the web browser. You can catch this event to execute a code when the form is submitted. For example, you can validate the data being entered into the form fields to ensure that they are entered as required, and if there is anything wrong, jQuery can stop the form submission and notify the user about the problem. If the data being entered is correct, then the form is submitted to the web server.

The syntax of the submit event is:

.submit(function(){})

The function is executed each time the form is submitted. This function is an optional parameter.

This signature is a short form of .on("submit", function(){});

To execute this function when the form is submitted, you have to select the form, then use jQuery submit() function.

Example of Submit event in jQuery

Let’s understand submit an event using a simple example. In this example, we will use a form that has two input fields for username and password. When the user clicks on the submit button, a simple function is executed to ensure that there is no field is left empty.

Submit Form

If the user hasn’t entered anything and hit the submit button on the form, the following error message will appear.

Submit Form
Submit Form

The HTML

<div id="container">
   <form action="#" id="form1" method="post">
      <label for="uname">Username</label>
      <input type="text" name="uname" id="uname" ><br><br>
      <label for="pass">Password</label>
      <input type="text" name="pass" id="pass"><br><br>
      <input type="submit" name="submit" value="submit">
   </form>
</div>

The CSS

#container {
	margin: 20px;
	padding: 10px;
	border: 1px solid #ccc;
	width: 400px;
}

label {
	width: 100px;
	display: block;
}

input {
	width: 80%;

The jQuery

<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js" >
    </script> 
<script>
    $(document).ready(function() {
        $("#form1").submit(function() {
            if ($("#uname").val() == "") {
                alert("Please enter your username");

            }
            if ($("#pass").val() == "") {
                alert("You can't leave the password field empty");

            }
            return false;
        });
    }); 
</script>

The submit event is fired before the actual form submission, which enables you to stop the form submission by calling .preventDefault() on the form or by return false from our function.

You can also attach the submit event to a simple button by calling .submit() function without any parameter for a selected web element.

For example, you can write:

$("#div_btn").click(function() {
    $("form1").submit();
});

The submit event is one of the most useful events of the jQuery and applies only to forms, so you must select a form either by using its ID name provided in the <form> of the HTML or if there is just one form on the web page you can also use $("form").submit(function(){}); to execute the code for submit event.

In case, you feel any difficulty to understand this lesson, or have any related question, feel free to post in the comment section below.

jQuery Focus Event Tutorial Home jQuery Change Event

 

Tutorials Panel

About Tutorials Panel

programming tutorial and source code for Software Engineers and developers. https://twitter.com/TutorialsPanel

View all posts by Tutorials Panel →

Leave a Reply