JavaScript success message after form submit/page re-load

Question

I'm looking for a way to display a simple JS message/pop up when my form has been successfully submitted.

I tried doing this as an 'alert' but it stopped the 'action' from happening (page reloading) and just displayed the message instead.

If I could do this as a js alert after the action has happened and the page has reloaded this would be great but I'm open to suggestions...

Regards, Marc

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>

is `contactengine.php` the same page as the provided markup? — Oluwafemi, Jul 15 '15 at 09:03
Yes, when the submit button is pressed and if the form passes validation the page redirects to the PHP file which then reloads/refreshes the page. — Marc Fenton, Jul 15 '15 at 09:15
Are you posting any data back to this page to notify the forms success — Oluwafemi, Jul 15 '15 at 09:17

score 0 · Accepted Answer · edited May 23 '17 at 10:24

you can set a value to a querystring param and check this on your page to alert success:

Redirect function update:

   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\">"; }

Your page script:

you can have an on page load function to run the below:

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

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

JavaScript success message after form submit/page re-load

1 Answers1