Jquery：form.submit（）有效，但form.submit（处理程序）没有

Question

我的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>

在我编写下面提到的代码的脚本中，它正确提交。 它带我到响应页面。

$('form').submit();

但是当我写下面的代码时，它甚至没有进入该功能。 不提交。 它甚至不显示警报。

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

可能是什么问题？

Answer 1

我想我得到了你的问题。 您没有submitButton来处理表单的提交。

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

将上面的代码更改为：

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

工作片段

 $('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> 

---

您使用自定义函数覆盖了函数处理程序，这会阻止提交表单的默认操作 。

e.preventDefault();

这可以防止表单提交。 这里的e是生成的事件，它是表单提交，函数preventDefault()阻止它发生。

通常，这用于基于AJAX的表单提交，您提交表单，但实际上，JavaScript通过AJAX将数据发送到服务器。 希望这很清楚。 :)

基于AJAX的表单提交示例如下：

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

对于您的问题，请尝试给出此而不是调用提交：

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

Answer 2

你打电话的时候：

$('form').submit();

简单来说，它告诉jquery “请提交表格”

当你打电话给这个时：

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

它告诉jquery： “如果表单已提交，请运行此函数”

含义：

第一个脚本调用提交，而第二个脚本将一个处理程序附加到提交事件但不调用提交

如果除了附加处理程序之外，您想要提交表单，那么您需要在以下内容之后调用不带参数的提交：

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

同样的工作与其他jquery函数类似，点击，加载等，没有参数，它是一个invokation，而使用一个函数它只是一个没有invokation附加的处理程序。