How to use jQuery submit() Method to submit a form

Use jQuery Submit Method – .submit(), to submit any form. The submit method can only be used for the form tag.

Syntax of jQuery Submit Method

The .submit() has 2 syntaxes.

a. Submit Method without Parameter

$(selector).submit();

Example: jQuery Form Submit without Parameter

The form contains one input control and a select control. There is a button placed outside the form tag.

On the button click event I will call $(“#form_id”).submit() that will submit the form.

<form id="form1" action="">
    Name: <input type="text" id="name1" value="Yogi">
    Age: <select id="age1">
        <option value="21-40">21-40</option>
        <option value="41-60">41-60</option>
        <option value="61-80">61-80</option>
    </select>
</form>

<button id="button1">Submit Form</button>

$("#form1").submit(function () {
    alert("Form 1 Submitted");
});

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

b. Submit Method with Function Parameter

$(selector).submit(function(event){
//....
});

Example: jQuery Form Submit with Function Parameter

In this case I have a form and there is a submit button which is placed inside the form.

On the submit button click the form .submit() method is called and it gets submitted.

<form id="form2" action="">
    Name: <input type="text" id="name2" value="Yogi">
    Age: <select id="age2">
        <option value="21-40">21-40</option>
        <option value="41-60">41-60</option>
        <option value="61-80">61-80</option>
    </select>
    <input type="submit" value="Submit">
</form>

$("#form2").submit(function () {
    alert("Form 2 Submitted");
});

Prevent Form Submission by .preventDefault()

Use .preventDefault() to prevent the form submission. See the below code with does this thing.

<form id="form3" action="">
    Name: <input type="text" id="name3" value="Yogi">
    Age: <select id="age3">
        <option value="21-40">21-40</option>
        <option value="41-60">41-60</option>
        <option value="61-80">61-80</option>
    </select>
    <input type="submit" value="Submit">
</form>

$("#form3").submit(function (event) {
    event.preventDefault();
    alert("Submit prevented");
});

Using form id, name, class or tag

Suppose you have a form in your page:

<form id="form_id" class="form_class" name="form_name">
</form>

In order to submit a form you can use any one out of these four –

$("#form_id").submit();

$(".form_class").submit();

$("form[name='form_name']").submit();

$("form").submit();

jQuery Form Validation

In order to validate my form I can write validation codes inside the .submit() method.

I will return true only if the validation passes and in that case the form will be submitted.

If the validation fails then I will return false and thus the form will be prevented from submitting.

This is my form:

<form id="form4" action="">
    Name: <input type="text" id="name4">
    Age: <select id="age4">
        <option value="Select">Select</option>
        <option value="21-40">21-40</option>
        <option value="41-60">41-60</option>
        <option value="61-80">61-80</option>
    </select>
    <input type="submit" value="Submit">
</form>

I will apply jQuery form validation codes that will be placed inside the .submit() method of the form.

On these validation codes I will make sure that the name field is not empty and the select box has proper ages selected.

This is my jQuery Form Validation codes:

$("#form4").submit(function (event) {
    if (($("#name").val() != "") && ($("#age4").val() != "Select")) {
        alert("Form Submitted")
        return true;
    }
    else {
        alert("Submit prevented")
        return false;
    }
});

In the same way you can also do the jQuery Validation of Email, Number, Checkbox and prevent bad values from submitting with your form.

Download the source codes: