表单提交/页面重新加载后的JavaScript成功消息

Question

我正在寻找一种方法来在成功提交表单时显示简单的JS消息/弹出窗口。

我尝试将此作为“提醒”，但它阻止了“动作”的发生（页面重新加载），而只是显示了消息。

如果我可以在动作发生并且页面重新加载后以js警报的方式执行此操作，那将是很好的，但我愿意接受建议......

此致 马克

function validate() // Required Fields Validation
  {

    if (document.myForm.Name.value == "") {
      alert("Please provide your name");
      document.myForm.Name.focus();
      return false;
    }

    if (document.myForm.Company.value == "") {
      alert("Please provide your Company name");
      document.myForm.Company.focus();
      return false;
    }

    if (document.myForm.Email.value == "") {
      alert("Please provide your Email address");
      document.myForm.Email.focus();
      return false;
    }

    if (document.myForm.Message.value == "") {
      alert("Leave us a message");
      document.myForm.Message.focus();
      return false;
    }
    return (true);
  }

function validateEmail() // Correct Email Format Validation
  {
    var emailID = document.myForm.Email.value;
    atpos = emailID.indexOf("@");
    dotpos = emailID.lastIndexOf(".");

    if (atpos < 1 || (dotpos - atpos < 2)) {
      alert("Please enter a valid Email address")
      document.myForm.Email.focus();
      return false;
    }
    return (true);
  }

function nameLength() { // Max Character Validation
  x = document.myForm
  input = x.Name.value
  if (input.length > 40) {
    alert("The Name field cannot contain more than 40 characters")
    return false
  } else {
    return true
  }
}

function companyLength() {
  x = document.myForm
  input = x.Company.value
  if (input.length > 50) {
    alert("The Company field cannot contain more than 50 characters")
    return false
  } else {
    return true
  }
}

function emailLength() {
  x = document.myForm
  input = x.Email.value
  if (input.length > 50) {
    alert("The Email field cannot contain more than 50 characters")
    return false
  } else {
    return true
  }
}

function messageLength() {
  x = document.myForm
  input = x.Message.value
  if (input.length > 300) {
    alert("The Message field cannot contain more than 300 characters")
    return false
  } else {
    return true
  }
}

#contact-area {
  width: 500px;
  max-height: 200px;
  margin-top: 0px;
  float: left;
}
#contact-area input,
#contact-area textarea {
  padding: 3px;
  width: 520px;
  font-family: 'Lato', sans-serif;
  font-size: 14px;
  margin: 0px 0px 0px 0px;
  border: 1px solid #ccc;
}
#contact-area textarea {
  height: 90px;
}
#contact-area textarea:focus,
#contact-area input:focus {
  border: 1px solid #ffc423;
}
#contact-area input.submit-button {
  width: 100px;
  float: left;
  background-color: #ffc423;
  color: black;
  margin-top: 13px;
  cursor: pointer;
}
#contact-area input.submit-button:hover {
  background-color: #002b51;
  color: white;
}
label {
  float: left;
  text-align: left;
  margin-right: 15px;
  width: 100px;
  padding-top: 10px;
  padding-bottom: 5px;
  font-size: 15px;
  color: #ffc423;
  font-weight: 700;
}
textarea {
  resize: none;
}

<div id="contact-area">

  <form method="post" action="contactengine.php" name="myForm" onsubmit="return !!(validate() & validateEmail() & nameLength() & companyLength() & emailLength() & messageLength())">
    <label for="Name">Name:</label>
    <input type="text" name="Name" id="Name">

    <label for="Company">Company:</label>
    <input type="text" name="Company" id="Company">

    <label for="Email">Email:</label>
    <input type="text" name="Email" id="Email">

    <label for="Message">Message:</label>
    <textarea name="Message" rows="20" cols="20" id="Message" title="Your message | max 300 characters"></textarea>

    <input type="submit" name="submit" value="Submit" class="submit-button">
  </form>

  <div style="clear: both;"></div>

</div>

Answer 1

您可以为查询字符串参数设置一个值，并在页面上进行检查以提醒成功：

重定向功能更新：

   if ($success){ print "<meta http-equiv=\"refresh\" content=\"0;URL=contact.html\?success=true">"; } else{ print "<meta http-equiv=\"refresh\" content=\"0;URL=error.htm\">"; }

您的网页脚本：

您可以使用页面加载功能运行以下内容：

var success = How can I get query string values in JavaScript?;

    if(success != ""){
      alert(success); // javascript alert
    }