Jquery: form.submit() works but form.submit(handler) doesn't

Question

I have only one form in my html.

<form role="form" class="form-horizontal" id="WebToLeadForm" action="http://Sujay-Y510p:80/suitecrm/index.php?entryPoint=WebToLeadCapture" method="POST" name="WebToLeadForm">
    <div class="form-body">
        <div class="form-group form-control-group form-md-line-input">
            <label class="col-md-2 control-label" for="form_control_1">Salutation</label>
            <div class="col-md-10">
                <select class="form-control" id="salutation" name="salutation">
                    <option value="" disabled selected>Select your option</option>
                    <option value="">Ms</option>
                    <option value="">Mr</option>
                    <option value="">Mrs</option>
                    <option value="">Doctor</option>
                    <option value="">Prof</option>
                </select>
                <div class="form-control-focus">
                </div>
            </div>
        </div>
        <div class="form-group form-md-line-input">
            <label class="col-md-2 control-label" for="name">First Name</label>
            <div class="col-md-10">
                <input class="form-control" id="first_name" placeholder="Enter your name" type="text" name="first_name">
                <div class="form-control-focus">
                </div>
            </div>
        </div>
        <div class="form-group form-md-line-input">
            <label class="col-md-2 control-label" for="form_control_1">Last Name</label>
            <div class="col-md-10">
                <input class="form-control" id="last_name" name="last_name" placeholder="Enter your name" type="text">
                <div class="form-control-focus">
                </div>
            </div>
        </div>
        <div class="form-group form-md-line-input">
            <label class="col-md-2 control-label" for="form_control_1">Mobile</label>
            <div class="col-md-10">
                <input class="form-control" id="phone_mobile" name="phone_mobile" placeholder="Enter your name" type="text">
                <div class="form-control-focus">
                </div>
            </div>
        </div>
        <div class="form-group form-md-line-input">
            <label class="col-md-2 control-label" for="form_control_1">Email Address</label>
            <div class="col-md-10">
                <input class="form-control" id="email1" name="email1" placeholder="Enter your email" type="email" onchange="validateEmailAdd();">
                <div class="form-control-focus">
                </div>
            </div>
        </div>
    </div>
    <div class="form-actions">
        <div class="row">
            <div class="col-md-offset-2 col-md-10">
                <button type="button" class="btn default">Cancel</button>
                <button type="button" class="btn blue" id="submitButton">Submit</button>
            </div>
        </div>
        <div class="row">
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
        </div>
    </div>
    <tr>
        <td style="display: none;">
            <input id="campaign_id" type="hidden" name="campaign_id" value="34101a86-12b1-bec3-2c18-560ed4c48ddb" />
        </td>
    </tr>
    <tr>
        <td style="display: none;">
            <input id="assigned_user_id" type="hidden" name="assigned_user_id" value="1" />
        </td>
    </tr>
    <tr>
        <td style="display: none;">
            <input id="req_id" type="hidden" name="req_id" value="last_name;" />
        </td>
    </tr>
</form>

In my script when I write the below mentioned code it submits properly. It takes me to the response page.

$('form').submit();

but when I write the below code it doesn't even enter the function. No submit takes place. It doesn't even display the alert.

$('form').submit(function (e) {
    e.preventDefault();
    alert('inside');
});

What could be the issue?

Answer 1

I guess I got your issue. You don't have a submitButton to process the submission of the form.

<button type="button" class="btn blue" id="submitButton">Submit</button>

Change the above code to:

<input type="submit" class="btn blue" id="submitButton" />

Working Snippet

 $('form').submit(function (e) { e.preventDefault(); alert('inside'); }); 

 <script src="https://code.jquery.com/jquery-1.9.1.js"></script> <form role="form" class="form-horizontal" id="WebToLeadForm" action="http://Sujay-Y510p:80/suitecrm/index.php?entryPoint=WebToLeadCapture" method="POST" name="WebToLeadForm"> <div class="form-body"> <div class="form-group form-control-group form-md-line-input"> <label class="col-md-2 control-label" for="form_control_1">Salutation</label> <div class="col-md-10"> <select class="form-control" id="salutation" name="salutation"> <option value="" disabled selected>Select your option</option> <option value="">Ms</option> <option value="">Mr</option> <option value="">Mrs</option> <option value="">Doctor</option> <option value="">Prof</option> </select> <div class="form-control-focus"> </div> </div> </div> <div class="form-group form-md-line-input"> <label class="col-md-2 control-label" for="name">First Name</label> <div class="col-md-10"> <input class="form-control" id="first_name" placeholder="Enter your name" type="text" name="first_name"> <div class="form-control-focus"> </div> </div> </div> <div class="form-group form-md-line-input"> <label class="col-md-2 control-label" for="form_control_1">Last Name</label> <div class="col-md-10"> <input class="form-control" id="last_name" name="last_name" placeholder="Enter your name" type="text"> <div class="form-control-focus"> </div> </div> </div> <div class="form-group form-md-line-input"> <label class="col-md-2 control-label" for="form_control_1">Mobile</label> <div class="col-md-10"> <input class="form-control" id="phone_mobile" name="phone_mobile" placeholder="Enter your name" type="text"> <div class="form-control-focus"> </div> </div> </div> <div class="form-group form-md-line-input"> <label class="col-md-2 control-label" for="form_control_1">Email Address</label> <div class="col-md-10"> <input class="form-control" id="email1" name="email1" placeholder="Enter your email" type="email" onchange="validateEmailAdd();"> <div class="form-control-focus"> </div> </div> </div> </div> <div class="form-actions"> <div class="row"> <div class="col-md-offset-2 col-md-10"> <button type="button" class="btn default">Cancel</button> <input type="submit" class="btn blue" id="submitButton" /> </div> </div> <div class="row"> <br> <br> <br> <br> <br> <br> </div> </div> <tr> <td style="display: none;"> <input id="campaign_id" type="hidden" name="campaign_id" value="34101a86-12b1-bec3-2c18-560ed4c48ddb" /> </td> </tr> <tr> <td style="display: none;"> <input id="assigned_user_id" type="hidden" name="assigned_user_id" value="1" /> </td> </tr> <tr> <td style="display: none;"> <input id="req_id" type="hidden" name="req_id" value="last_name;" /> </td> </tr> </form> 

---

You are over-riding the function handler with your custom function, that prevents the default action of submitting the form.

e.preventDefault();

This prevents the form from submitting. Here the e is the generated event, which is the form submission and the function preventDefault() prevents it from happening.

Generally this is used for AJAX based form submissions, where you submit the form, but actually, JavaScript sends the data to the server through AJAX. Hope this is clear enough. :)

An example of AJAX based form submission would be:

$('form').submit(function (e) {
    e.preventDefault();
    $.post("url.php", $(this).serialize(), function (data) {
        if (data = "okay")
            alert("Form is submitted!");
    });
});

For your issue, try giving this instead of calling the submit:

$("form").trigger("submit");

Answer 2

when you call:

$('form').submit();

in simple words, it tells jquery "please submit the form"

when you call this however:

$('form').submit(function (e) {
    e.preventDefault();
    alert('inside');
});

it tells jquery: "in case the form is submitted, run this function"

meaning:

the first script calls the submission, while the 2nd script attaches a handler to the submission event but does not call the submission

if in addition to attaching the handler, you want to submit the form then you need to call the submit without arguments in it after:

$('form').submit(function (e) {
    e.preventDefault();
    alert('inside');
});
$('form').submit();

the same works similarly with other jquery functions, click, load, etc. without arguments its an invokation, while with a function it is simply a handler attaching without invokation.