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

我最近读过一些内容，但现在无法找到必须使用本机JavaScript提交表单而不是jQuery（我猜是因为表单提交的jQuery事件处理程序已被告知preventDefault）。

但是，如果我尝试某些变体，例如document.getElementById('edit_profile').submit();或document.forms[0].submit();，我会得到相同的错误。

Answer 1

DOM元素没有方法.submit - 但是jQuery对象（仅在form元素上） - 基本上，你忘了在jQuery中包装this：

$(this).submit();

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

编辑：

我看到你从哪里获得“无限循环”场景。实际上，当您单击提交button而不是表单实际提交时，您应该设置处理程序。

截至目前，您已捕获表单submit操作并阻止默认操作（即提交） - 然后您执行一些操作并在submit上调用this。好吧，它会触发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完全赞同回答这个相关问题：Unable to `submit()` an html form after intercepting the submit with javascript（注意，他不是接受的答案）。

答案：如果你的名字和#id您的提交按钮“提交”将与本机JavaScript .submit（）方法的名称冲突，该方法将不再起作用并提供问题中描述的类型错误。

因此，我的解决方案是将提交按钮重命名为其他内容。

回顾一下：

要拦截表单提交，您可以截取提交按钮上的点击或截取表单提交本身。如果您的目标是拦截表单提交，那么请执行此操作，而不是提交按钮上的单击事件，因为表单可以通过其他事件提交，例如在文本字段中按Enter键。

如果您通过jQuery拦截表单，例如$("#myForm").on("submit", function() {...})然后继续将提交处理传递给另一个函数（例如，在调用地理编码api的问题中）然后函数将需要触发表单通过直接对DOM表单元素进行提交（例如`document.getElementById（'myForm'）。submit（）），它将提交表单而不触发onsubmit事件，这样就不会再次触发初始拦截，从而创建一个无限循环如果你使用jQuery来触发提交，那就好了。

如何提交已使用event.preventDefault（）截获的表单

3 个答案: