Submit Form Data Without Bothering User

An entire form can be submitted to the server without the website user having to know about it. Collect the entire form's data with the JavaScript FormData() function and send the data to a script on the server with Ajax.

In general, submitting a form takes the browser to the URL of the script on the server where the data is being submitted to. If you prefer to implement any other action instead, submitting the form via Ajax is most likely to be at least part of the solution.

I'll show you how. But first an illustration.

Here is a testing form for the illustration. When you test the form, it will respond with an alert containing the information you provided on the form.

I think you will like the (less than 20 lines) JavaScript that submits the form.

The JavaScript has one customization, the id of the form tag.

It submits the entire form to the URL specified in the form tag's action URL. Because it is Ajax, it will submit the form only to a script on the same server where the web page is at.

Put the JavaScript on the web page with the form. It's location can be anywhere JavaScript can go. Placing it near the bottom of the source code immediately above the closing </body> tag should work just fine.

<script type="text/javascript">
function SubmitTheForm()
{
   var FormID = "my-form";
   var http = new XMLHttpRequest();
   if(!http) {return;}
   http.onreadystatechange = function()
   {
      if(http.readyState == 4 & http.status == 200)
      {
         alert(http.responseText);
      }
   }
   http.open("POST",document.getElementById(FormID).action,true);
   http.send( (new FormData(document.getElementById(FormID))) );
}
</script>

The my-form on the first line of the function needs to be replaced with the id of the form to be submitted.

The function has 12 lines of code. On the 8th line, you'll see the alert(http.responseText); code.

After the form information has been sent to the script on the server, alert(http.responseText); gives the user an alert containing the information the server script responded with.

You may change alert(http.responseText); to anything else that is valid JavaScript.

As an example of something that can be changed, you can disable the line so the script provides no response. Or, the alert can just say "Thank you!", if that is what you want. Another example of what the alert(http.responseText); code can be changed to is redirecting the browser to another URL.

To cause the JavaScript to run when the submit button is tapped, the submit button code has the onclick="SubmitTheForm()" attribute.

Here is the code for the test form you used near the beginning of this article.

<form id="my-form" method="post" action="/possibilities/demo/issue1323dump.php">
<p>
Your name
<br><input type="text" name="your_name" style="width:100%; border:1px solid #ccc; padding:.5em; border-radius:.3em; box-sizing:border-box;">
</p>
<p>
Favorite colors
<br><input type="checkbox" name="your_favaorite_colors[]" value="blue"> Blue
<br><input type="checkbox" name="your_favaorite_colors[]" value="red"> Red
<br><input type="checkbox" name="your_favaorite_colors[]" value="yellow"> Yellow
<br><input type="checkbox" name="your_favaorite_colors[]" value="green"> Green
</p>
<p>
Your idea
<br><textarea type="text" name="your_idea" style="width:100%; height:.6in; border:1px solid #ccc; padding:.5em; border-radius:.3em; box-sizing:border-box;"></textarea>
</p>
<p style="margin-bottom:0;">
<input type="button" value="Submit Button" onclick="SubmitTheForm()" style="width:100%; box-sizing:border-box;">
</p>
</form>

As you see in the example, put the onclick="SubmitTheForm()" attribute into the submit button tag of your form. When the button is tapped, the attribute tells the JavaScript to submit the form.

Bringing it all together: To implement the system, put the JavaScript into your web page source code and insert the onclick="SubmitTheForm()" attribute into your form's submit button tag. Finish it by updating the JavaScript with the form tag's id value.

(This content first appeared in Possibilities newsletter.)

Will Bontrager