2 Ways To Display A Message After Submitting HTML Form

Welcome to a beginner’s tutorial on how to display a message after submitting an HTML form. Yep, forms are pretty easy to create in HTML… But the aftermath is kind of a mystery. How do we show a message to the user after the processing is done?

There are 2 general ways to show a message after submitting an HTML form:

  1. Use Javascript AJAX to submit the form and show a message when the processing is complete.
  2. Submit the form as usual, and have the server-side script pass back a flag to show the message.

Just how exactly does each of these work? Let us walk through some examples. Read on to find out!

ⓘ I have included a zip file with all the example source code at the start of this tutorial, so you don’t have to copy-paste everything… Or if you just want to dive straight in.

 

 

QUICK SLIDES

 

TABLE OF CONTENTS

Download & Notes AJAX Notification POST & Notify
Useful Bits & Links Tutorial Video The End

 

 

DOWNLOAD & NOTES

Firstly, here is the download link to the example code as promised.

 

EXAMPLE CODE DOWNLOAD

Click here to download the source code, I have released it under the MIT license, so feel free to build on top of it or use it in your own project.

 

QUICK NOTES

If you spot a bug, please feel free to comment below. I try to answer questions too, but it is one person versus the entire world… If you need answers urgently, please check out my list of websites to get help with programming.

 

AJAX AND NOTIFICATIONS

For those who have not heard, Asynchronous Javascript And XML (AJAX) is basically sending forms without having to reload the entire page. Here’s how to set it up, and how to show notifications with it.

 

THE HTML

1a-ajax-notify.html
<form onsubmit="return ajaxpost()">
  Name: <input type="text" id="user-name" required/>
  Email: <input type="email" id="user-email" required/>
  <input type="submit" value="Go!"/>
</form>

The HTML part is pretty much “as usual”. Just an HTML form, and the only part that absolute beginners might be interested in is onsubmit="return ajaxpost()" – This will call the ajaxpost() Javascript when the form is submitted.

 

 

THE JAVASCRIPT

1b-ajax-notify.js
function ajaxpost () {
  // (A) GET FORM DATA
  var data = new FormData();
  data.append("name", document.getElementById("user-name").value);
  data.append("email", document.getElementById("user-email").value);
 
  // (B) AJAX REQUEST
  // NOTE - AJAX WILL NOT WORK WITH file://
  var xhr = new XMLHttpRequest();
  xhr.open("POST", "1c-server.html");
  xhr.onload = function () {
    console.log(this.response);
    console.log(this.status);
 
    // (B1) SERVER NOT RESPONDING OR SOMETHING
    // HTTP response 200 is OK
    // See https://developer.mozilla.org/en-US/docs/Web/HTTP/Status for more
    if (xhr.status != 200) { alert("SERVER ERROR"); }
 
    // (B2) WHEN SERVER IS DONE
    else {
      if (xhr.response == "OK") { alert("SUCCESSFUL!"); }
      else { alert("FAILURE!"); }
    }
  };
  xhr.send(data);
 
  // (C) PREVENT FORM SUBMIT
  return false;
}

This looks like quite a handful, but it is really quite straightforward:

  1. First, create a var data = new FormData() object and collect all the data to be sent.
  2.  Next, the AJAX call itself.
    • Start with creating a var xhr = new XMLHttpRequest() object.
    • Specify where to POST to – xhr.open('POST', "1c-server.html").
    • Then, specify what to do when the server responds. This is where we can display the message –  xhr.onload = function () {}.
    • Finally, give the green light to the AJAX request with xhr.send(data).
  3. That’s it, but don’t forget to return false to stop the default HTML form submission (or the page will reload).

 

SERVER-SIDE SCRIPT

1c-server.html
OK

Well, this is just a dummy. The server-side script should be the one to process the submitted form, in whatever programming language that you are using. But in the end, it should respond with an “OK” or an error message.

 

 

POST AND NOTIFY

Following up, let us move into a more “traditional” method that involved weaving the HTML and server-side script together. As there are various programming languages, I will just use PHP here – But the concept should be pretty similar universally.

 

THE HTML FORM

2a-form.php
<!-- (A) SUBMIT TO ITSELF -->
<form method="post" target="_self">
  Name: <input type="text" name="user-name" required/>
  Email: <input type="email" name="user-email" required/>
  <input type="submit" value="Go!"/>
</form>

<?php
// (B) PROCESS FORM SUBMISSION & SHOW MESSAGE
if (isset($_POST['user-name'])) {
  require "2b-process.php";
  echo "<div>$message</div>";
}
?>

This should be very straightforward:

  1. Create the HTML form as usual, and it will submit to itself (I.E. Submit to the same page).
  2. Do the processing when the form is submitted. The processing script should generate a $message = "SYSTEM MESSAGE" upon completion and will display here.

 

SERVER-SIDE PROCESSING

2b-process.php
<?php
// Do something - Process the form
// process($_POST['user_name'], $_POST['user_email']);
 
// Then set the response message
$message = "SUCCESSFUL!";

Again, this is just a dummy. But at the end of it, it should generate a $message flag to state if the processing is successful.

 

 

USEFUL BITS & LINKS

That’s all for this guide, and here is a small section on some extras and links that may be useful to you.

 

LINKS & REFERENCES

 

TUTORIAL VIDEO

 

INFOGRAPHIC CHEAT SHEET

How To Display Message After Form Submission (Click to Enlarge)

 

THE END

Thank you for reading, and we have come to the end of this guide. I hope that it has helped you with your project, and if you want to share anything with this guide, please feel free to comment below. Good luck and happy coding!

Leave a Comment

Your email address will not be published. Required fields are marked *