2 Easy Ways To Submit HTML Form Without Refreshing Page

Welcome to a quick tutorial and examples on how to submit an HTML form without refreshing the page. So you have an HTML form that needs to stay on the same page after submission?

That covers the basics, but let us walk through more examples in this guide – Read on!

ⓘ I have included a zip file with all the example 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.

 

 

TLDR – QUICK SLIDES

Fullscreen Mode – Click Here

 

TABLE OF CONTENTS

 

 

QUICK NOTES

• Please use http:// for testing, not file://.

If you spot a bug, feel free to comment below. I try to answer short 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.

 

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.

 

 

 

PRELUDE) THE HTML FORM

<form onsubmit="return FUNCTION()">
  Name: <input type="text" name="name" required>
  Email: <input type="email" name="email" required>
  <input type="submit" value="Go!">
</form>

First, this is the simple HTML form that we will be working with (for all the below examples). Nothing “special” here, just take note of the onsubmit="return FUNCTION()" part – We will be using Javascript to process the form instead.

 

METHOD 1) SUBMIT FORM USING AJAX

1A) AJAX POST SUBMISSION

<script>
function ajaxpost () {
  // (A) GET FORM DATA
  var data = new FormData(document.getElementById("myForm"));
 
  // (B) AJAX
  var xhr = new XMLHttpRequest();
  xhr.open("POST", "0-dummy.php");
  xhr.onload = function () {
    // do something when server responds
    console.log(this.response);
  };
  xhr.send(data);
 
  // (C) PREVENT HTML FORM SUBMIT
  return false;
}
</script>

AJAX stands for “Asynchronous Javascript And XML”, and I will leave a link below if you want to learn more. Anyway, submitting forms with AJAX is as simple as:

1. Create a FormData() object to collect data from the HTML form fields.
2. Next, the AJAX request itself. Take extra note of the xhr.onload section, this is what to do upon completion (when the server responds) – A good place to show a “successful” message or follow up with the next step. Use this.response to fetch the server response and this.status for the HTTP status code.
3. Finally, remember to return false. This will prevent the default HTML form submission (and not reload the entire page).

 

 

1B) AJAX GET SUBMISSION

<script>
function ajaxget () {
  // (A) GET FORM DATA
  var form = new FormData(document.getElementById("myForm"));
  var data = new URLSearchParams(form).toString();
 
  // (B) AJAX
  var xhr = new XMLHttpRequest();
  xhr.open("GET", "0-dummy.php?" + data);
  xhr.onload = function () {
    // do something when server responds
    console.log(this.response);
  };
  xhr.send();
 
  // (C) PREVENT HTML FORM SUBMIT
  return false;
}
</script>

If you want to do a GET submission with AJAX – It is pretty much the same process. The only difference here is that the data is appended to the URL as a query string.

 

METHOD 2) SUBMIT FORM USING FETCH

2A) FETCH POST SUBMISSION

<script>
function fetchpost () {
  // (A) GET FORM DATA
  var data = new FormData(document.getElementById("myForm"));
 
  // (B) FETCH
  fetch("0-dummy.php", { method: "post", body: data })
  .then(res => res.text())
  .then(txt => {
    // do something when server responds
    console.log(txt);
  })
  .catch(err => console.log(err));
 
  // (C) PREVENT HTML FORM SUBMIT
  return false;
}
</script>

Before some of you get a panic attack on what those then and catch means, here’s a quick crash course on defining functions in Javascript:

• You already know this one – function myfunc (a, b) { return a + b; }
• We can also do it this way – var myfunc = function (a, b) { return a + b; }
• We can shorten that to an “arrow function” – var myfunc = (a, b) => { return a + b; }

This may throw some of you guys off for a bit, but () => {} is just the “shorthand” for defining a function. Try to follow along the sequence:

1. The same old “get data from the HTML form”.
2. fetch() is pretty much the “modern version” of XMLHttpRequest(), we use it to send data to the server.
   • .then((res) => { return res.text(); }) will return the server response as plain text (string).
   • .then((txt) => { console.log(txt); }) will output the server response in the console… Same as xhr.onload, this is a good place to show your “successful” or “failed” message.
   • .catch((err) => { console.log(err); } is triggered if an error occurs.
3. return false to stop the HTML form from reloading the page.

 

 

2B) FETCH GET SUBMISSION

<script>
function fetchget () {
  // (A) GET FORM DATA
  var form = new FormData(document.getElementById("myForm"));
  var data = new URLSearchParams(form).toString();
 
  // (B) FETCH
  fetch("0-dummy.php?" + data, { method: "get" })
  .then(res => res.text())
  .then(txt => {
    // do something when server responds
    console.log(txt);
  })
  .catch(err => console.log(err));
 
  // (C) PREVENT HTML FORM SUBMIT
  return false;
}
</script>

Pretty much the same again. Just change to method: "get" and append the form data to the URL query string instead.

 

 

 

EXTRA – HOW ABOUT THE SERVER SIDE?

<?php
// (A) DO YOU PROCESSING AS USUAL - IN ANY LANGUAGE
$foo = 123;
$foo += 456;
$pass = $foo < 123456;
 
// (B) OUTPUT A MESSAGE AT THE END
echo $pass ? "OK" : "ERROR MESSAGE" ;
 
// THIS MESSAGE WILL BE PICKED UP IN AJAX OR FETCH
// xhr.onload = function () { console.log(this.response); };
// .then((txt) => { console.log(txt); })

 

YOUTUBE TUTORIAL

 

REFERENCES & LINKS

• Simple AJAX Examples – Code Boxx
• Promise – MDN
• Fetch API – MDN
• HTML Form Validation – Code Boxx

 

INFOGRAPHIC CHEAT SHEET