如何提交已被event.preventDefault（）拦截的表单

Question

我有一个带有id =“ edit_profile”的普通香草表单。

提交表单后，我想拦截它，并检查是否需要通过google maps api对地址进行地址解析，如果不需要，则继续提交。

就像是：

$('#edit_profile').on('submit', function(event) {
    event.preventDefault();
    if ( some test ) {
        geocode_address( address, this ); // the api callback will handle form submit
    } else {
    // we want to go ahead and submit the form
    this.submit();
    }
});

问题是this.submit() TypeError: Property 'submit' of object #<HTMLFormElement> is not a function错误TypeError: Property 'submit' of object #<HTMLFormElement> is not a function

我最近读了一些书，但现在找不到必须使用本机JavaScript来提交表单而不是jQuery的信息（我猜是因为已经告知表单提交的jQuery事件处理程序可以防止preventDefault）。

但是如果我尝试一些类似document.getElementById('edit_profile').submit();变体document.getElementById('edit_profile').submit(); 或document.forms[0].submit(); 我得到相同的错误或左右。

Answer 1

DOM元素没有方法.submit -但jQuery的对象做（仅限于form元素） -基本上，你忘了换this jQuery中：

$(this).submit();

参考： https : //api.jquery.com/submit/

编辑：

我知道您从哪里得到“无限循环”方案。 实际上，您应该将处理程序设置为在您单击“提交” button而不是表单实际提交时触发。

到目前为止，您捕获了表单submit操作，并阻止了默认操作（正在提交）-然后您做了一些事情，并在this上调用submit 。 好吧，这将触发表单submit的处理程序，这将再次阻止默认操作！ 因此，简而言之，在您的Submit按钮上放置一个处理程序，阻止默认操作，执行逻辑，然后调用$("#edit_profile").submit()

Answer 2

为什么不重新排列这样的代码

$('#edit_profile').on('submit', function(event) {
  if ( some test ) {
    event.preventDefault();
    geocode_address( address, this ); // the api callback will handle form submit
  } else {
    // we want to go ahead and submit the form
    // this.submit(); // no need to call explicitly
  }
});

如果您想在some test具有回调功能，则它将无法正常工作，但从您的代码中看起来却并非如此。

Answer 3

我正在回答自己的问题，因为解决方案是如此出乎意料且简单，值得重复。 克里斯·巴特勒（Chris Butler）回答了这个相关问题，这一切都得到了满分： 在用javascript拦截提交后，无法“提交（）”一个html表单 （请注意，他不是被接受的答案）。

答：如果您命名＆#id，则提交按钮“提交”将与本机JavaScript .submit（）方法的名称发生冲突，该方法将不再起作用并给出问题中所述的类型错误。

所以我的解决方案是将我的提交按钮重命名为其他名称。

回顾一下：

要拦截表单提交，您可以拦截单击“提交”按钮或拦截表单提交本身。 如果您的目标是拦截表单提交，则可以执行此操作，而不是单击“提交”按钮上的click事件，因为表单可以通过其他事件提交，例如在文本字段上按回车键。

如果您使用$("#myForm").on("submit", function() {...})通过jQuery截取表单，然后继续将提交处理传递给另一个函数（例如问题（在哪里调用地理编码api），则该函数将需要通过直接作用于DOM表单元素（例如`document.getElementById（'myForm'）。submit（））来触发表单提交。表单而不会触发onsubmit事件，这样就不会再次触发初始拦截，从而不会产生无限循环，就像使用jQuery触发提交一样。