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

【问题标题】：Hi-jack form submit, store original submit, add processing, then submit normally劫持表单提交，存储原始提交，添加处理，然后正常提交
【发布时间】：2018-08-16 22:46:14
【问题描述】：

我有一段 javascript，我想将它全局添加到我的网站。这个javascript使用jQuery，会选择任何检测到的表单，存储原始提交过程，做一些自定义处理，然后通过原始过程正常提交表单。

我用下面的代码让它正常工作，除非它“正常提交表单”我收到 jQuery 的“this.trigger is not a function”错误，但随后页面发布/获取/等到合适的目的地。如果可能的话，我真的很想尝试消除错误。有什么想法吗？

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 在 HTMLFormElement.r.fn.(:8000/test/anonymous 函数) (http://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js:4:6532) 在 HTMLFormElement。 (journey.js:915) 在 HTMLFormElement.dispatch (jquery.min.js:3) 在 HTMLFormElement.q.handle (jquery.min.js:3)

【问题讨论】：

标签： javascript jquery forms form-submit

【解决方案1】：

$(this).submit 返回对 jQuery submit 方法的引用，而不是对“原始提交过程”。所以存储它是没有用的。

以下内容就足够了：

$('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>

【讨论】：

谢谢 Kosh，我喜欢这个解决方案的简单性，但是，当我尝试这个时，我得到“this.submit”不是一个函数。我更喜欢这种方法。 @taplar 的建议按预期工作，但如果我能让它发挥作用，我更喜欢这个。
如果方法在循环中会改变吗？ $('form').each(function(i) { $(this).submit(function(e) { } ); });我是否需要循环，因为选择器将应用于它匹配的所有内容？
@sol，你不必循环。 $('form').submit(function) 为页面上的所有表单设置处理程序。以防万一：您不能同时在页面上提交多个表单。
谢谢。我已经更新了代码，仍然得到 this.submit() is not a function...我正在选择带有 $('form[data-custom-attribute=value]').submit(function(e) 的表单{ e.preventDefault(); this.submit(); } );
@sol，可能this在某处发生了变化，但您可以将其替换为e.target.submit()

【解决方案2】：

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

原始表单是一个原始 DOM 元素，您正试图将其用作调用 jQuery 提交方法的上下文。鉴于这是无效的，你可以这样做......

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

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

originalForm[i] = $(this);

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

【讨论】：

【解决方案3】：

可以使用jQuery提交监听器不会监听的原生提交，也不需要删除它

例如：

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

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

});

【讨论】：