Sending Form Data To HTML Page And Retrieving It With Javascript Without Any PHP/Python

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

Solution 1:

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

Solution 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!

Solution 3:

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>

Solution 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