php - 如何在WordPress的同一页面中提交表单数据而不重新加载页面？

Question

我有一个自定义 PHP 模板 - 表单。我正在尝试使用 AJAX 在同一页面中发送此表单，而无需重新加载页面。提交后隐藏表单并显示谢谢消息。该表单以模态形式显示。但发生的情况是页面仍在重新加载。

HTML

<form method="POST" action="" name="modalForm" id="modalForm" enctype="multipart/form-data" autocomplete="off">
        <input placeholder="Last Name*" type="text" name="lastName" id="lastName" value="" required>
        <label class="error" for="name" id="lastName_error">This field is required.</label>
        <input placeholder="First Name*" type="text" name="firstName" id="firstName" value="" required>
        <label class="error" for="name" id="firstName_error">This field is required.</label>
        <input placeholder="Email Address" type="email" name="Email" id="Email" onblur="this.setAttribute('value', this.value);" value="" required>
        <label class="error" for="email" id="email_error">This field is required.</label>
        <span class="validation-text">Please enter a valid email address.</span>
        <input placeholder="Mobile Number*" type="text" name="contactNumber" id="contactNumber" onkeypress="return isNumberKey(event)" value="" size="11" minlength="11" maxlength="11" pattern ="^09\d{9}$" required>
        <label class="error" for="contactNumber" id="contactNumber_error">This field is required.</label>
        <input type="submit" name="submit" value="Submit" id="form-submit">
</form>

JS

    (function($) {
    $('.error').hide();
    $(".button").click(function() {
      // validate and process form here

      $('.error').hide();
        var name = $("input#lastName").val();
        if (lastName == "") {
        $("label#lastName_error").show();
        $("input#lastName").focus();
        return false;
      }
        var name = $("input#firstName").val();
        if (lastName == "") {
        $("label#firstName_error").show();
        $("input#firstName").focus();
        return false;
      }
        var email = $("input#Email").val();
        if (Email == "") {
        $("label#email_error").show();
        $("input#Email").focus();
        return false;
      }
        var phone = $("input#contactNumber").val();
        if (contactNumber == "") {
        $("label#contactNumber_error").show();
        $("input#contactNumber").focus();
        return false;
      }

    });

    var dataString = 'lastName='+ lastName + '&Email=' + Email + '&contactNumber=' + contactNumber;
  //alert (dataString);return false;
  $.ajax({
    type: "POST",
    url: "/wordpress-page/",
    data: dataString,
    success: function() {
      $('#modalForm').html("<div id='message'></div>");
      $('#message').html("<h2>Contact Form Submitted!</h2>")
      .append("<p>We will be in touch soon.</p>")
      .hide()
      .fadeIn(1500, function() {
        $('#message').append("<img id='checkmark' src='images/check.png' />");
      });
    }
  });
  return false;
});

Answer 1

我用 your code 创建了一个 fiddle 并与 fixed code .

1. 整个代码会尽快运行，但应该在 DOM 准备好之后运行，以便选择器可以匹配 DOM 元素: (function($) { 应该更改到 ($(document).ready(function(){

2. 您的选择器 $('.button') 不匹配任何元素，在您的情况下，它应该与提交按钮 $('#form-submit') 匹配

3. 我会添加 preventDefault() 以确保提交按钮(提交表单)的默认操作不会发生。

4. 表单验证真的很困惑。您正在检查未设置的变量。

5. 您的dataString还使用未设置的变量。 (名字也丢失了。)

我将 ajax 调用交换为 console.log 来转储数据，但保留了成功函数。

<小时/>

您的代码中有很多小错误，看起来您是从不同来源复制的，在提出这个问题之前没有进行太多调试。

在编写代码时尝试逐步调试。