How do I store text box values for later use with Javascript?

Question

So I have a "quick register" kind of widget in my footer with only first and last name text boxes. I also have a button that redirects to the actual registration page after clicked. My intentions are to carry the information inputted into the text boxes over and fill the matching first/last name text boxes on the registration form.

document.querySelector(".footerSignUp").onclick = function () {
var footerFirst = document.querySelector(".footerFirstName").value;
var footerLast = document.querySelector(".footerLastName").value;
alert(footerFirst,footerLast);
location.href = " http://localhost/wordpress/my-account/register/ ";
};

<input type="text" class="input-text footerFirstName" name="billing_first_name" value="Firstname" />

<input type="text" class="input-text footerLastName" name="billing_last_name" value="Lastname" />

<input type="button" value="Sign-up" class="footerSignUp" />

Thanks

Possible duplicate of [How to pass variable value between different html pages in javascript](http://stackoverflow.com/questions/23213788/how-to-pass-variable-value-between-different-html-pages-in-javascript) — Turnip, Feb 13 '17 at 21:56

Sushanth -- · Accepted Answer · 2017-02-14T20:24:33.390

You will have to append the values as query parameters and have logic in your redirected url to extract that info and populate the input elements.

Page with the click event

document.querySelector(".footerSignUp").onclick = function() {
  var footerFirst = document.querySelector(".footerFirstName").value;
  var footerLast = document.querySelector(".footerLastName").value;
  var url = getUrl(firstName, lastName);
  location.href = url;
};

function getUrl(firstName, lastName) {
    var url = 'http://localhost/wordpress/my-account/register/';
    var params = "firstName=" + firstName + "&lastName=" + lastName;

    return [url, params].join('?');
}

Extract in registration page

// In the registration page extract the params

function extractParams() {
   var url = location.href;
   // Extract the query params from the url
   var queryParams = url.split('?')[1];
   // Extract individual params
   var params = queryParams.split('&');

   params.forEach(function(param) {
       var data = param.split('=');
       var key = data[0];
       var value = data[1];
       var selector;

       if(key === 'firstName' && value) {
           selector = '.footerFirstName';
       } else if(key === 'lastName' && value){
           selector = '.lastFirstName';
       }

       if(selector) {
           document.querySelector(selector).value = value;
       }
   });
}

extractParams();

Edit

On page 2 get the url

var url = location.href;
var params = url.split('?')[1];

//And then set the new redirect
location.href = newLocation + '?' + params;

Hey thanks for the answer! Your code is doing what you intended, I can see the appended values in the URL. All I had to tweek was the variable names because they changed from 'footerFirst' to 'firstName', but no big deal. However, i forgot to mention I have a page in between the footer sign up and the registration form page. It's a page that asks the user if the account will be for company or personal. Is there anyway to get the values in the url to stay there for 1 more redirect? — Seb G, Feb 14 '17 at 14:12
It would have to insert to the the following URLs 'http://localhost/wordpress/my-account/register/personal-account-registration/' & 'http://localhost/wordpress/my-account/register/company-account-registration/' — Seb G, Feb 14 '17 at 14:21
You will have to get the `location.href` and then split it using `?` and the append it to the new location for the 2nd redirect — Sushanth --, Feb 14 '17 at 20:22

score 0 · Answer 2 · answered Feb 13 '17 at 22:05

You can use localStorage.

Code snippets may not work here, because of cors/sandbox.

function storeData(){
  var firstName = document.getElementById('firstName').value;
  var lastName = document.getElementById('lastName').value
  var userData = {
    'firstName': firstName,
    'lastName': lastName
  }
  localStorage.setItem('userData', JSON.stringify(userData));
}

<input type="text" id='firstName' class="input-text footerFirstName" name="billing_first_name" value="Firstname" />

<input type="text" id='lastName' class="input-text footerLastName" name="billing_last_name" value="Lastname" />

<input type="button" onclick="storeData()" value="Sign-up" class="footerSignUp" />

Then, on the page with registration form:

window.onload = function getUserData(){
  var userData = JSON.parse(localStorage.getItem('userData'));
  localStorage.clear()
  console.log(userData);
}

It will store the saved user's firstName and lastName in the userData variable.

How do I store text box values for later use with Javascript?

2 Answers2