劫持表单提交，存储原始提交，添加处理，然后正常提交

Question

我有一块 javascript 我想在全球范围内添加到我的网站。这个javascript使用jQuery，会select任何检测到的表单，存储原始提交流程，做一些自定义处理，然后通过原始流程正常提交表单。

我使用下面的代码使其正常工作，除非它 "submits the form normally" 我收到 jQuery 的 'this.trigger is not a function' 错误，但随后页面 posts/gets/etc适当的目的地。如果可能的话，我真的很想尝试消除错误。有什么想法吗？

var originalForm = []
var originalSubmit = []
$('form').each(function(i) {
    originalForm[i] = this;
    originalSubmit[i] = $(this).submit;

    $(this).submit(function(e){
        // stop form
        e.preventDefault();

        // do processing
        // here

        // process form as it was originally intended
        $(this).unbind('submit');
        originalSubmit[i].apply(originalForm[i]);  
    });
});

这是错误：

jquery.min.js:4 Uncaught TypeError: this.trigger is not a function at HTMLFormElement.r.fn.(:8000/test/anonymous function) (http://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js:4:6532) at HTMLFormElement. (journey.js:915) at HTMLFormElement.dispatch (jquery.min.js:3) at HTMLFormElement.q.handle (jquery.min.js:3)

Answer 1

originalSubmit[i].apply(originalForm[i]);

原始形式是原始 DOM 元素，您正试图将其用作调用 jQuery 提交方法的上下文。鉴于那是无效的，你可以做...

originalSubmit[i].apply($(originalForm[i]));

...使其成为 jQuery 对象，或者可能...

originalForm[i] = $(this);

...所以它已经是一个 jQuery 对象。

Answer 2

可以使用本机提交，jQuery 提交侦听器不会侦听，也不需要将其删除

例如：

$('form').submit(function(e){
   e.preventDefault()
   var form = this;

   // when conditions met such as after some ajax perhaps    
   form.submit();

});

Answer 3

$(this).submit returns 引用 jQuery submit 方法，而不是 "the original submit process"。所以存储它是没有用的。

以下内容就足够了：

$('form').submit(function(e) {
  // stop form
  e.preventDefault();

  // do processing
  // here

  // process form as it was originally intended
  console.log(this.id, e.target.id)
  //this.submit();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<form id="form1"><input type="submit" value="submit 1"></form>

<form id="form2"><input type="submit" value="submit 2"></form>

劫持表单提交，存储原始提交，添加处理，然后正常提交

Hi-jack form submit, store original submit, add processing, then submit normally

javascript

forms

jquery

form-submit