javascript - 如何提交已被 event.preventDefault() 拦截的表单

Question

我有一个 id="edit_profile"的普通表单。

提交表单后，我想拦截它并检查是否需要通过谷歌地图 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 在 jQuery 中:

$(this).submit();

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

编辑:

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

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