How to get Form POST Data with JavaScript

We can not handle HTTP POST data from JavaScript, but we can still access the data while it is in the HTML form.

6623 views

By. Jacob

Edited: 2021-12-07 01:29

When working with HTML forms on the client-side, within a browser, it is not technically possible to handle data submitted via a HTTP POST request. POST requests are typically submitted from HTML forms on web pages, but keep in mind that they can also be sent by other means.

The problem is that although the browser knows about the data, the act of submitting it (E.g. by pushing a submit button in a UI), will normally make the browser send the data within the HTML form as a HTTP post request to the server. This means that the server will know about the data after receiving the HTTP POST request, but it is not able to expose the data to the client by itself.

While the client might still keep a cached copy of the data after submitting it—evident by pushing the back-button in your browser—this cached copy will not be accessible through JavaScript. I do not think there are any plans to change this behavior, as it would be very inefficient to submit data to the server only to again handle it in the client.

But, JavaScript does have a method called preventDefault which we can use to prevent the default behavior of the browser when a form is submitted. I already covered this topic in this article: Handling HTML Forms in JavaScript.

Here is a simple script that you can use to test most HTML forms doing development. To use the script, you can place it in a script element last in the body of your HTML page.

let exampleForm =  document.querySelector('form');
exampleForm.addEventListener('submit', event => {
  event.preventDefault();

  let inputElements = exampleForm.querySelectorAll("input");

  inputElements.forEach(function(input) {
    console.log(input.value);
  });

});

Note. This script will get the contents of the value attribute on each input element, which is not very useful for most purposes, but very useful for learning how to work with HTML forms.

It also assumes there is only one form element on your HTML page. If you got more forms, you can shift out form in querySelector with a unique ID of the form you are testing. This is why I think querySelector is better than getElementByID—it is extremely flexible to work with.

Accessing HTML form data

Unlike on the server-side (E.g. in PHP), we can not easily access the HTML form data, since we can not handle HTTP POST requests from the client side, and there is no way to access "POST parameters" from JavaScript—we can however access the elements inside the form before the data is submitted.

Instead of thinking of POST parameters in the client, you should think of the POST data as merely data in a HTML form. While the data exists in the form, it has not yet been posted, and we will therefor need to access it differently than we would have done from PHP on the server.

By adding an event listener with the addEventListener method, we may "listen" for the submit event of the form, which we can then intercept with the preventDefault method.

It is also not possible to access all the data in one place, via a global POST array like in PHP. But, as mentioned, we can still access the data while it still sits in the individual form elements. To make this as easy as possible, it will help to give each input element a unique ID. We need to do this to optimize label accessibility anyway!

After the relevant elements has been given a unique ID, we can then access them using querySelector:

let exampleForm =  document.querySelector('form');
exampleForm.addEventListener('submit', event => {
  event.preventDefault();

  let whatever = exampleForm.querySelector("#some_unique_input_id");

  console.log(whatever.value);
});

Note. Remember that IDs are unique in HTML. A lot of people seem to forget this, so I am just repeating it for your information. In other words, a given ID should only be used once in a HTML page. This also makes it easy to programmatically work with the elements, and know for sure which element you will be handling.

The contents of a input element is contained within the value attribute, which means we can access it like this in plain JavaScript:

let whatever = exampleForm.querySelector("#some_unique_input_id");
let someValue = whatever.value;

// Testing via console.log() or alert()
console.log(someValue);
// alert(someValue)

If we are dealing with a textarea, we can instead use innerHTML:

let someValue = whatever.innerHTML;

Accessing HTML form data

Tell us what you think: