Send HTML Forms on Blogger Asynchronously Using AJAX

Success Trending September 29, 2021 Blogging Tips , Tech Skills

Have you ever faced challenges when designing a form on a blogger to capture user input and send it to the server for processing?

It's a fairly common requirement for any blogger to use a form to send data. But most of the time when the form is submitted it opens a page where it sends the data. Today, I will show how to send the form using AJAX without opening a new document page.

So what is AJAX?

AJAX is an acronym for Asynchronous JavaScript and XML. It allows us to send the data asynchronously to the server in the background and making it possible to update the page, without reloading. When the form is submitted an event listener attached to the form element passes the control to a JavaScript function which then proceeds to send data asynchronously using the XMLHttpRequest Object

First, we will design a simple form.

<form id="myForm">
  <label for="myName">Name</label>
  <input id="myName" name="name" type="text">
  <input type="submit" value="Submit">
  </form>

Copy and paste the above into the HTML section of the page and it should look like below

Then comes the JavaScript to send the form to the server through AJAX.
Let us design a function to send the data.

function SendForm( data ) 
  const xmlhttp = new XMLHttpRequest();
  var formdataobj = new FormData(form);
// if the the send succeeds this will give us the status
  xmlhttp.addEventListener( "load", function(event) {
  alert( event.target.responseText );
  } );
// if the send fails this will give us the status
  xmlhttp.addEventListener( "error", function( event ) {
  alert( 'Something went wrong.' );
  } );
  xmlhttp.open( "POST", "contact.php" );
  xmlhttp.send( formdataobj);
  //get hold of the form we created earlier and bind a event listener to it.
  var form = document.getElementById( "myForm" );
  form.addEventListener( "submit", function ( event ) {
  event.preventDefault();
  sendForm();
  } );

The main drawback of the AJAX method, the page where the data is sent should be in the same domain. If it is not on the same domain then it will be blocked by the browsers. You can still do a workaround on this issue which I will tell you later in the article.

AJAX is not supported by all the browsers and there is a different way of implementing AJAX in different browsers. For example, Opera 8.0+, Firefox, Safari, and Chrome will support the new XMLHttpRequest(); but a browser like Internet Explorer requires you to use the ActiveX Object for this purpose.

You can replace this code above const xmlhttp = new XMLHttpRequest(); with more browser-specific JavaScript code below

  
  var xmlhttp;  

            try {
               xmlhttp = new XMLHttpRequest();
            } catch (e) {
               try {
                  xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
               } catch (e) {
                   try {
                     xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
                  } catch (e) {
                     alert("Something went wrong");
                     return false;
                  }
               }
            }

This is an example of the Front end code. You would also require a corresponding code on the server. Depending on the type of server, this can be done in PHP or Active Server Pages or any language available on the server. If it is a third-party API, then there will be documentation guiding you with implementing the communication between the AJAX code and the Server.

When AJAX requests are sent to a domain that is not the same as where the page is stored, the requests are blocked by the browser as this causes CORS Issue. Read the below article to correct the CORS issue.

Knowing AJAX can help you make simpler pages that update using the response from the server. It is useful when communicating with various APIs on the internet.

References: You Might Not Need JQuery