Question

所以我的页脚中有一个“快速注册”类型的小部件，只有名字和姓氏的文本框。我也有一个按钮，点击后重定向到实际的注册页面。我的目的是将输入到文本框中的信息传送到注册表单上并填写匹配的名/姓名文本框。

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" />

谢谢

Answer 1

您必须将值附加为查询参数，并在重定向的网址中包含逻辑以提取该信息并填充输入元素。

带有点击事件的

页面

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('?');
}

在注册页面中提取

// 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();

修改

在第2页上获取url

var url = location.href; var params = url.split('?')[1]; //And then set the new redirect location.href = newLocation + '?' + params;

Answer 2

您可以使用localStorage。

由于cors / sandbox ，代码段可能无效。

＆＃13;

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));
}

＆＃13;

<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" />

＆＃13;

然后，在注册表单的页面上：

＆＃13;

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

＆＃13;

它会将已保存的用户firstName和lastName存储在userData变量中。

如何存储文本框值以供以后与Javascript一起使用？

2 个答案: