如何处理使用JQuery提交的表单

Question

我有一个多步骤表单。在提交给PHP之前，我会用Javascript验证每个步骤。

如果表单的最后一步通过了验证测试。我正在提交表格。像这样

$(UISelectors.addListForm)[0].submit();

我想用Javascript处理表单提交，并用Ajax将其提交给PHP。但是，页面会刷新。

const addListingSubmit = (e) => {
e.preventDefault();
// ...
};
$(UISelectors.addListForm).submit(addListingSubmit);

有什么建议吗？

这是我的代码：https://jsfiddle.net/cd1mkuge/1/

Answer 1

HTML表单在提交时本机调用已定义的url(问题中缺少该url的代码(，因此将离开当前页面。为了避免这种行为，请使用点击处理程序(在表单的提交按钮上(，并在其中使用表单的值进行ajax调用：

const onClick = e => {
// get values from the form
const foo = $("#foo-field").val();
// etc.
// do AJAX call
$.post(...)
};
$('#my-button').click(onClick);

这样，表单的提交事件就不会被触发。