Question

我需要中断我网页的所有表单提交，并需要为其添加额外的输入字段。我需要用js / Jquery来做。

我可以为单个表单（使用名称/ ID）执行此操作。但我需要在我的网站上提交所有100个表单。（在我的例子中，所有表单都是使用表单元素的submit()方法[不是jQuery的submit()]提交的。）

我有什么方法可以做到吗？喜欢重写实际的form.submit()方法吗？

Answer 1

在我的情况下，所有表单都是使用javascript submit（）方法提交的

在这种情况下，您可以包装该方法。这很重要，因为当您调用DOM的HTMLFormElement#submit方法时，submit事件处理程序不被触发。（如果使用jQuery的submit方法，它会在提交表单之前触发处理程序。）

以下是如何在不使用任何库的情况下包装该函数：

Array.prototype.forEach.call(document.querySelectorAll("form"), function(form) {
    var realSubmit = form.submit;
    form.submit = function() {
        // Do your stuff
        // ...
        // Submit the form
        realSubmit.call(form);
    };
});

...或者您使用jQuery标记了问题jquery：

$("form").each(function() {
    var form = this;
    var realSubmit = form.submit;
    form.submit = function() {
        // Do your stuff
        // ...

        // Submit the form
        realSubmit.call(form);
    };
});

您需要检查目标浏览器是否允许它。现代人做。

以下是一个完整的示例：mdn:bitwise-not

<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
  <meta charset="utf-8">
  <title>Example</title>
</head>
<body>
  <p>This page adds the q field to a form it submits to Google</p>
  <form method="GET" action="http://google.com/search" target="_blank">
    <input id="sendDOM" type="button" value="Send with DOM's submit">
    <input id="sendjQuery" type="button" value="Send with jQuery's submit">
  </form>
  <script>
    $("#sendDOM").click(function() {
      $("form")[0].submit();
    });
    $("#sendjQuery").click(function() {
      $("form").submit();
    });

    // Wrap submit on the forms
    $("form").each(function() {
      var form = this;
      var realSubmit = form.submit;
      form.submit = function() {
        // Do your stuff
        var el = document.createElement("input");
        el.type = "hidden";
        el.name = "q";
        el.value = "kittens";
        form.appendChild(el);

        // Submit the form
        realSubmit.call(form);
      };
    });
  </script>
</body>
</html>

Answer 2

您可以使用$（'form'）选择器在页面中选择并查找表单。

它会返回页面中的所有表单。

然后绑定提交事件。

var ajaxFormSubmit = function(){  

//write what you need to do

return false;

};


$('form').submit(ajaxFormSubmit);

停止在我的页面中提交所有表单

2 个答案: