javascript - 如何提交已被 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

我最近读了一些东西，但现在找不到关于必须使用 native JavaScript 而不是 jQuery 来提交表单的内容(我猜是因为表单提交的 jQuery 事件处理程序已经被告知要防止默认)。

但如果我尝试一些像 document.getElementById('edit_profile').submit(); 这样的变体或 document.forms[0].submit();我遇到同样的错误或类似错误。

Answer 1

DOM 元素没有方法 .submit——但是 jQuery 对象有(仅在 form 元素上)——基本上，你忘了包装 this:

$(this).submit();

引用:https://api.jquery.com/submit/

编辑:

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

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