Question

我使用了以下jQuery + AJAX来发送表单。它将数据发布到PHP，但成功后，未显示成功消息。

我还想在提交后清空输入字段。

function sendContact() {
  event.preventDefault();
  var valid;

  valid = validateContact();
  if (valid) {
    jQuery.ajax({
      url: "  ",

      data: 'userName=' + $("#userName").val() + '&userEmail=' + $("#userEmail").val() + '&subject=' + $("#subject").val() + '&content=' + $(content).val(),
      type: "POST",
      success: function(data) {
        $("#mail-status").html(data);
        $('#mail-status').show();
        $("#frmContact").hide();

        // Clear the form.
        $('#userName').val('');
        $('#userEmail').val('');
        $('#content').val('');
      },
      error: function() {}
    });
  }
}

function validateContact() {
  var valid = true;
  $(".InputBox").css('background-color', '');
  $(".info").html('');

  if (!$("#userName").val()) {
    $("#userName-info").html("(required)");
    $("#userName").css('background-color', '#FFFFDF');
    valid = false;
  }
  if (!$("#userEmail").val()) {
    $("#userEmail-info").html("(required)");
    $("#userEmail").css('background-color', '#FFFFDF');
    valid = false;
  }
  if (!$("#userEmail").val().match(/^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/)) {
    $("#userEmail-info").html("(invalid)");
    $("#userEmail").css('background-color', '#FFFFDF');
    valid = false;
  }
  if (!$("#content").val()) {
    $("#content-info").html("(required)");
    $("#content").css('background-color', '#FFFFDF');
    valid = false;
  }
  return valid;
}

HTML：

<div id="frmContact">
  <div id="mail-status" style="display: none;">
    Thanks! Our Admin 'll contact shortly.</div>

  <div>
    <label style="padding-top:20px;">Name</label><span id="userName-info" class="info"></span>
    <br/>
    <input type="text" name="userName" id="userName" class="InputBox">
  </div>
  <div>
    <label>Email</label><span id="userEmail-info" class="info"></span>
    <br/>
    <input type="text" name="userEmail" id="userEmail" class="InputBox">
  </div>

  <div>
    <label>Content</label><span id="content-info" class="info"></span>
    <br/>
    <textarea name="content" id="content" class="InputBox" cols="25" rows="6"></textarea>
  </div>
  <div>
    <button name="submit" class="btnAction" onClick="sendContact();">Send</button>
  </div>
</div>

Answer 1

请参阅this小提琴。

我提出了一系列改变建议以及一些观察结果。

首先，如果您的表单是表单，请使用form元素和#frmContact ID。它有用几个原因：

<form id="frmContact" action="/echo/html/" method="POST">...</form>

我们现在可以使用action和method属性来管理其提交时的行为。您可以将操作更新为应该访问的URL以及方法 - 在本例中为POST。
由于它是一个表单，我们现在可以在成功提交后触发reset事件，该事件处理您清空字段的要求。
我们可以使用.serialize()收集所有表单输入数据，因此您无需手动选择所需内容并创建查询字符串。

JS：

$("#frmContact").on("submit", function() {
  event.preventDefault();

  var form = this;

  jQuery.ajax({
    type: form.method,
    url: form.action,
    data: $(form).serialize(),
    success: function(data) {
      $("#mail-status")
        .html(data)
        .show();

      $(form)
        .hide()
        .trigger("reset");
    },
    error: function(xhr, status, error) {
      console.log(error);
    },
    complete: function(xhr, status) {
      console.log(xhr, status);
    }
  });
});

我们不一定需要任何验证功能。只需使用required和type=email的HTML5属性来验证电子邮件地址。

如果您真的需要向后兼容性，请务必按照您想要的方式进行更改，但对于问题的最小可重现版本，在您的问题中忽略这一点要容易得多。

如果您仍然遇到问题，请提供您的PHP并使用浏览器开发人员工具控制台中控制台的任何反馈更新您的问题，并提供您的浏览器名称和版本。

jQuery表单提交后未显示成功消息

1 个答案: