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

Answer 1

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;

Answer 2

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.