如何在不重新加载页面的情况下在同一页面中提交表单数据？

Question

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

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 and with the fixed code 创建了一个 fiddle。

整个代码运行尽快，但是应该运行在DOM准备好之后，这样选择器才能匹配DOM-元素：(function($) {应该改为($(document).ready(function(){
您的选择器 $('.button') 不匹配任何元素，在您的情况下它应该匹配提交按钮 $('#form-submit')
我会添加 preventDefault() 以确保提交按钮（提交表单）的默认操作不会发生。
表单验证真的很乱。您正在检查未设置的变量。
您的 dataString 也使用了未设置的变量。（名字也不见了。）

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

你的代码中有很多小错误，看起来你在问这个问题之前没有做太多调试就从不同的来源复制它。

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

如何在不重新加载页面的情况下在同一页面中提交表单数据？

How to submit form data in the same page in WordPress without reloading the page?

php

ajax

wordpress

jquery

custom-wordpress-pages