使用 jquery 和 .submit 捕获表单提交答案

【问题标题】：Capturing a form submit with jquery and .submit使用 jquery 和 .submit 捕获表单提交
【发布时间】：2012-09-03 18:08:08
【问题描述】：

我正在尝试使用 jQuery 来捕获提交事件，然后将格式为 JSON 的表单元素发送到 PHP 页面。我在捕获提交时遇到了问题，我从 .click() 事件开始，但改为使用 .submit() 事件。

我现在有以下精简的代码。

HTML

<form method="POST" id="login_form">
    <label>Username:</label>
    <input type="text" name="username" id="username"/>
    <label>Password:</label>
    <input type="password" name="password" id="password"/>
    <input type="submit" value="Submit" name="submit" class="submit" id="submit" />
</form>

Javascript

$('#login_form').submit(function() {
    var data = $("#login_form :input").serializeArray();
    alert('Handler for .submit() called.');
});

【问题讨论】：

在其中粘贴一个event.preventDefault() 怎么样？
可以把提交按钮改成普通按钮，用javascript调用你的函数吗？
我不知道这意味着什么或将它放在哪里，对不起，我对 jquery 很陌生。
您必须阻止提交的默认操作，否则将提交表单并重新加载页面，并且不会正常工作。您可以使用 event.preventDefault()
当然你确实包含了 jQuery 库并将你的代码包装在 document.ready 中？

标签： javascript html jquery

【解决方案1】：

将代码包装在准备好的文档中并防止默认提交操作：

$(function() { //shorthand document.ready function
    $('#login_form').on('submit', function(e) { //use on if jQuery 1.7+
        e.preventDefault();  //prevent form from submitting
        var data = $("#login_form :input").serializeArray();
        console.log(data); //use the console for debugging, F12 in Chrome, not alerts
    });
});

【讨论】：

只是为了添加更多规范，e.preventDefault() 非常重要，因为没有它，表单将使用表单的 action 属性提交，并且还会调用您的代码。使用 preventDefault，您将能够覆盖 HTML 表单的正常行为

【解决方案2】：

试试这个：

使用“return false”来切断事件的流程：

$('#login_form').submit(function() {
    var data = $("#login_form :input").serializeArray();
    alert('Handler for .submit() called.');
    return false;  // <- cancel event
});

编辑

如果表单元素的长度为 jQuery 的，则验证：

alert($('#login_form').length) // if is == 0, not found form
$('#login_form').submit(function() {
    var data = $("#login_form :input").serializeArray();
    alert('Handler for .submit() called.');
    return false;  // <- cancel event
});

或者：

它等待 DOM 准备好：

jQuery(function() {

    alert($('#login_form').length) // if is == 0, not found form
    $('#login_form').submit(function() {
        var data = $("#login_form :input").serializeArray();
        alert('Handler for .submit() called.');
        return false;  // <- cancel event
    });

});

您是将代码放在“准备好”文档事件中还是在 DOM 准备好之后？

【讨论】：

点击提交时仍然不会触发警报。
请展示您的代码如何解决问题。甚至有什么不同。
好得多。仅凭努力就赞成（我没有测试代码的正确性）。

【解决方案3】：

只需将 form.submit 函数替换为您自己的实现即可：

var form = document.getElementById('form');
var formSubmit = form.submit; //save reference to original submit function

form.onsubmit = function(e)
{
    formHandler();
    return false;
};

var formHandler = form.submit = function()
{
    alert('hi there');
    formSubmit(); //optionally submit the form
};

【讨论】：

【解决方案4】：

只是一个提示：记得把代码检测放在document.ready上，否则可能不行。这就是我的情况。

【讨论】：

【解决方案5】：

$(document).ready(function () {
  var form = $('#login_form')[0];
  form.onsubmit = function(e){
  var data = $("#login_form :input").serializeArray();
  console.log(data);
  $.ajax({
  url: "the url to post",
  data: data,
  processData: false,
  contentType: false,
  type: 'POST',
  success: function(data){
    alert(data);
  },
  error: function(xhrRequest, status, error) {
    alert(JSON.stringify(xhrRequest));
  }
});
    return false;
  }
});

<!DOCTYPE html>
<html>
<head>
<title>Capturing sumit action</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<form method="POST" id="login_form">
    <label>Username:</label>
    <input type="text" name="username" id="username"/>
    <label>Password:</label>
    <input type="password" name="password" id="password"/>
    <input type="submit" value="Submit" name="submit" class="submit" id="submit" />
</form>

</body>

</html>

【讨论】：