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附加的處理程序。