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

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

看到这个小提琴。

关于一些更改，我将提出许多建议，并提出一些观察意见。

首先，如果您的表单是form ，则将form元素与#frmContact ID一起使用。 出于以下几个原因，它将很有用：

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

1. 现在，我们可以使用action和method属性来控制其在提交时的行为。 您可以将操作更新为应转到的URL和方法-在这种情况下为POST。
2. 由于它是一种表单，因此我们现在可以在成功提交后在其上触发reset事件，这可以满足您清空字段的要求。
3. 我们可以使用.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并使用浏览器开发人员工具控制台中控制台的任何反馈来更新您的问题，并提供您的浏览器名称和版本。