Introduction:

Here we are going to explain what is submit() event or how to use submit() event or why to use submit() event or how to check validation before submitting form with example.

Description: 

jQuery submit() event occurs when a form is submitted. This event is only attached to the <form> element. Forms can be submitted either by clicking on the submit button or by pressing the enter button on the keyboard when that certain form elements have focus. The submit() method execute the submit event, or attaches a function to run when a submit event occurs.

 Syntax:

Trigger the submit event for the form elements:

 

$(selector).submit()

  • Example of jQuery submit() event


Let's see an example to of jQuery submit() event.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>submit demo</title>
    <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
    <style type="text/css">
        p {
            margin: 0;
            color: blue;
        }
        span {
            color: red;
        }
    </style>
 
</head>
<body>
    <p>Type something to submit this form finally.</p>
    <span id="msg"></span>
    <form action="javascript:void(0)">
        <div>
            <input type="text" id="Name">
            <input type="submit">
        </div>
    </form>
 
    <span></span>
    <script type="text/javascript">
    $("form").submit(function (event) {
       if ($("#Name").val() != "") {
            $("#msg").text("Submitted Successfully.").show();
            return;
          }
         else {           
        $("#msg").text("form is not valid without entering value in textbox !").show().fadeOut(2000);
           
         }
            event.preventDefault();
        });
    </script>
</body>
</html>


As shown in the above program, $("form").submit(function (event) line specifies the event which will occur when form is submitted.

When user enter something in the text box then show message form Submitted Successfully .if text box is blank or empty then show form is not valid without entering value in textbox  message.

When you run the above example, you would get the following output:

 Use jQuery submit() event 

    I hope it will help to you.

comments


Leave a comment

Make sure you enter the (*) required information where indicated. HTML code is not allowed.

You may also like