logo标签列表

Jquery：form.submit()可以使用，但是form.submit(handler)无法使用。

javascriptjqueryhtmlforms
3
我在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');
});

可能的问题是什么？
第一个是函数调用。第二个是函数处理程序覆盖。 - Banana
你看到触发了警报('inside')吗？ - enkrates
抱歉，我不明白。第二个函数难道至少不应该显示警报吗？ - Sujay DSa
@enkrates 我甚至没有看到警告。 - Sujay DSa
@lemonTea，让我解释一下：在你的第一个脚本中，你调用了submit函数。在你的第二个脚本中，你告诉jQuery如果调用了submit函数要做什么，但是你没有调用这个函数，你只是覆盖了它。 - Banana
@Banana 这意味着我应该在其他地方定义它，并在需要时调用它？那么这会调用我放在函数内部的任何内容吗？我对此有点陌生，如果我不能立刻理解，请原谅我。 - Sujay DSa
2个回答
3
我猜你的问题是，你没有一个“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!");
    });
});

针对您的问题，尝试改为使用以下代码，而不是调用 submit 方法：

$("form").trigger("submit");
很抱歉，但我认为问题不够清晰。问题是我甚至没有看到警报。 - Sujay DSa
@lemonTea，你能试试这个吗？ $('form').trigger("submit"); - Praveen Kumar Purushothaman
@lemonTea，找到了问题并更新了答案。你能帮忙确认一下吗？ - Praveen Kumar Purushothaman
2

当你调用时：

$('form').submit();

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

但是当您调用它时：

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

它告诉jQuery："如果表单被提交，就运行这个函数"

意思是：

第一段脚本调用了提交，而第二段脚本附加了一个处理程序到提交事件上，但没有调用提交

如果除了附加处理程序之外，您还想提交表单，那么您需要在其中调用无参数的submit：

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

同样的道理也适用于其他jQuery函数，如click、load等。如果没有参数，则是一个调用，而带有函数则只是一个附加处理程序而不是调用。
1
这解决了我的问题。我不确定为什么会有负评。我会点赞的。 - Sujay DSa
@lemonTea，我已经给出了相同的解释，但我不明白为什么你接受了这个答案。请再次查看我的回答，仔细看一下。 - Praveen Kumar Purushothaman
@Banana，我不是给你的回答投反对票的人，如果你想知道，我甚至还纠正了那个回答。 - Praveen Kumar Purushothaman
1
@PraveenKumar，我从未说过你这样做了。顺便说一下，你的回答涉及了几个完全不同的问题，而不是OP所问的... - Banana
1
@PraveenKumar Banana首先指出了覆盖与调用的问题。此外，我想知道如何将程序控制权传递到被覆盖的方法中，这是Banana首先展示的。如果我的问题一开始不够清晰，我很抱歉。但我非常感谢你的帮助。谢谢。 - Sujay DSa
显示剩余2条评论
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接