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" />

工作代码段

＆＃13;

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

＆＃13;

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

＆＃13;

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

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

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

2 个答案:

工作代码段