如何点击span元素用Ajax提交表单，保留移动端提交按钮并防刷新

一、修复点击Span无法触发Ajax提交的问题 #

你的jQuery代码存在逻辑错误：当前是点击#paper时才给表单绑定submit事件，但绑定后并未主动触发提交动作，且重复点击会多次绑定事件，导致后续提交时多次触发Ajax请求。

修正方案 #

1. 提前给表单绑定submit事件，统一处理Ajax提交逻辑，阻止页面默认刷新。
2. 点击#paper时，先验证表单有效性，验证通过后触发表单的submit事件。

基于HTML5原生验证的代码

// 给表单绑定统一的Ajax提交逻辑
$("#contactForm").on("submit", function (e) {
    e.preventDefault(); // 阻止默认表单提交刷新
    var dataString = $(this).serialize();
    $.ajax({
        type: "POST",
        url: "_actions/sendmail.php",
        data: dataString,
        success: function () {
            $("#paper").addClass("posRun");
        }
    });
    return false;
});

// 点击span触发表单验证与提交
$("#paper").on("click", function () {
    const form = $("#contactForm")[0];
    // 触发原生表单验证
    if (form.checkValidity()) {
        form.submit(); // 触发已绑定的submit事件
    } else {
        // 显示原生验证提示
        form.reportValidity();
    }
});

基于jQuery Validate插件的代码

如果使用jQuery Validate做表单验证，可改用以下写法：

// 初始化表单验证，指定验证通过后的Ajax提交逻辑
$("#contactForm").validate({
    submitHandler: function(form) {
        const dataString = $(form).serialize();
        $.ajax({
            type: "POST",
            url: "_actions/sendmail.php",
            data: dataString,
            success: function () {
                $("#paper").addClass("posRun");
            }
        });
        return false;
    }
});

// 点击span直接触发表单验证与提交
$("#paper").on("click", function () {
    $("#contactForm").submit();
});

二、解决表单内Submit元素对PHP接收数据的影响 #

表单中的submit按钮如果带有name属性，表单序列化时会将name=value的参数一并提交到PHP（比如$_POST['submit'] = 'Send'）。如果不需要这个参数，有两种处理方式：

• 方式一：移除submit按钮的name属性
  修改submit按钮代码，去掉name属性：

  <input type="submit" class="btn btn-outline-light title-font mt-5 w-75 m-auto m-lg-0 mt-lg-5 d-block" id="send" value="Send">
  

  这样序列化表单时不会包含submit按钮的数据，PHP接收其他字段不受影响。

• 方式二：在PHP中忽略submit参数
  如果保留name属性，PHP直接读取需要的字段即可（比如$_POST['name']、$_POST['email']），不需要的话可通过unset($_POST['submit'])移除该参数，不影响其他数据的正常接收。

补充说明 #

移动端点击submit按钮时，会自动触发表单的submit事件，因此也会走我们绑定的Ajax无刷新提交逻辑。如果需要兼容JS失效的极端场景，可以给表单添加action属性（比如action="_actions/sendmail.php"），此时JS失效时表单会以传统方式提交。

内容的提问来源于stack exchange，提问作者Thant Htet Aung