时间戳

首页 > 解决方案 > 如何处理使用 JQuery 提交的表单

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

问题描述

我有一个多步骤表格。在将其提交给 PHP 之前，我正在使用 Javascript 验证每个步骤。

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

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

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

const addListingSubmit = (e) => {
  e.preventDefault();

 // ...
};

$(UISelectors.addListForm).submit(addListingSubmit);

有什么建议么？

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

标签： javascriptphpjquery

解决方案

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

const onClick = e => {
    // get values from the form
    const foo = $("#foo-field").val();
    // etc.

    // do AJAX call
    $.post(...)
};

$('#my-button').click(onClick);

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

推荐阅读