Sending form data to HTML Page and Retrieving it w

Question

I've read a few articles and a question thread on sending form data to another html page, but the solutions didn't solve the issue for me.

Basically, I have a form with a bunch of data:

<form id="registration" name="registration" action="register.html" method="POST">

In register.html, I tried accessing an input text field with id and name as "username" with this:

var x = document.getElementById("registration").elements.namedItem("username").value;

The console stated that it cannot read property of null. How can I access these values with Javascript only? Frameworks are fine but not PHP /Python.

Answer 1

A webpage can't receive POST data. Send it using method="GET" instead, then retrieve it on the target page using JS as follows:

<script>
var params = window.location.search.slice(1).split("&");
// params is ["say=Hi", "to=Mom"]
</script>

Answer 2

I ran into something like this the other day. Turns out you can just get the values with jQuery.

var userName = $("input[type=text][name=username]").val();

Just put it into a function that's called in the form's onsubmit.

<script>
  function getFormData() {
    var userName = $("input[type=text][name=username]").val();
    // Do what you want with the data
    return true;
  }
</script>
<form id="registration" name="registration" action="register.html" onsubmit="return getFormData();" method="POST">
  <input type="text" name="username" />
</form>

However, this doesn't keep the data when you load the next page. To do that, just commit the value into sessionStorage.

function saveFormData() {
  var userName = $("input[type=text][name=username]").val();
  sessionStorage.setItem("user", userName);
  return true;
}

And then on the next page (the one you're calling resgister.html) you can use this code to retrieve it.

var userName = sessionStorage.getItem("user");

I hope this helps!

Answer 3

I'm sure that none of this can be safe, so use caution.

If you don't care about the info being super obvious, then you can make the action of the the form the new page you want, and the method can be 'GET'.

EDIT: I should mention this will go through the url, as such

domain.com?someKey=someValue&someOtherKey=someOtherValue

On the new page, you can parse the url for the query string for everything.

You can grab that stuff out of the 'href' property from the location.

window.location.href

// * Credit for this puppy goes to theharls, nice and fast
var params = window.location.search.slice(1).split("&");
//=> ["say=Hi", "to=Mom"]

Another option on (modern ?) browsers is Local Storage. Use javascript to to set things like,

localStorage.setItem('foo', 'bar');

Great reference for local storage here. https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage

Answer 4

You can easily target the selectors by querySelector. The value will no longer be null.

<form id="registration" name="registration" action="register.html" method="POST">
  <input type="text" class="username" value="abcdefg">
</form>

<script>
var x = document.querySelector("#registration .username").value;
//check your code in devtools
console.log(x);
</script>

jsfiddle