Submit Form Using Ajax

When you submit a form using ajax code, it is done silently. In other words, it is non-interruptive for the website user.

The person who submits the form receives no messages from the ajax unless you specifically tell it to.

Here is the form code. Essential items are noted with the color blue. Optional items are noted with the color green.

<!-- THE FORM -->
<form id="id-of-form" onsubmit="return false">
[ form fields go here ]
<input type="button" onclick="SubmitViaAjax()" value="Tap to submit">
</form>

<!-- THE JAVASCRIPT -->
<script type="text/javascript">
function SubmitViaAjax()
{
   var formID = "id-of-form"; // ID of the form tag.
   var formPostURL = "/subdir/formprocessor.php"; // Posting URL on same domain as the form.
   var http = new XMLHttpRequest();
   http.onreadystatechange = function()
   { 
      if(http.readyState == 4 && http.status == 200)
      {
         // Uncomment none, one, or both alert() messages according to your needs.
         // alert("Form has completed submission."); // Use to display a custom message to the form user.
         // alert(http.responseText); // Use to display message from the software the form was submitted to.
      }
   }
   http.open("POST",formPostURL);
   http.send(new FormData(document.getElementById(formID)));
}
</script>

Configuration notes:

The form —

The form has 3 places with essential items.

1. id-of-form

   In the form tag, you'll see the id value for the form. The JavaScript also specifies the same value at its first customizable line. If you change either, the other place must be changed accordingly.

2. onsubmit="return false"

   In the form tag, you'll see an onsubmit attribute. The attribute must be in place to prevent the form being submitted manually.

3. onclick="SubmitViaAjax()"

   In the input type="button" tag, you'll see an onclick attribute. The attribute must be in place so a click on the button will launch the ajax JavaScript.

The JavaScript —

The form has 2 places with essential items and 2 places with optional items.

1. id-of-form

   This is a copy of the form tag's id value. If you change either the form tag ID or the corresponding value in the JavaScript, then both must be changed accordingly.

2. /subdir/formprocessor.php

   Here is where the URL of the form processor script is specified. That's the URL the form would normally submit to. Note that submitting with ajax requires the form processor to be on the same domain as where the form is submitted.

Now, the optional items. These have to do with messages sent to the form user after the form has been submitted.

For no message, leave the two commented out the way they are. For one message, uncomment the appropriate line. To provide both messages to the form user, uncomment both lines.

1. alert("Form has completed submission.");

   Use this one if you want to send a particular message to the form user. Uncomment the line and replace "Form has completed submission" with the message you intend to send.

2. alert(http.responseText);

   Use this one if you intend to send a message composed of what the form processor script replies with. To use it, uncomment the line.

After you implement this once, it should be much easier to do it again.

The system uses ajax code to submit your form to the form handling script. It's done silently unless you set it up to send a message to the form user.

(This content first appeared in Possibilities newsletter.)

Will Bontrager