使用JavaScript将文本从一个页面传递到下一个页面

时间:2017-09-22 04:47:49

标签: javascript

这是我要发送到表单作业参考文本框的作业参考号:

<p><span id="job" value="90192"><strong>Reference Number: 90192</strong></span></p>
//when this link will be clicked it will redirect to apply.html with job value stored in session.
<a href="Apply.html" class="button-apply" id="apply3">Apply Here</a>

<p><span id="job2" value="90192"><strong>Reference Number:90192</strong></span></p>
//when this link will be clicked it will redirect to apply.html with job value stored in session.
<a href="Apply.html" class="button-apply" id="apply2">Apply Here</a>

jobs.js的JavaScript文件:

"use strict"

function storedata() {
  var job = document.getElementById("job").value;
  var job2 = document.getElementById("job2").value;
  var job3 = document.getElementById("job3").value;
  sessionStorage.job = job;
  sessionStorage.job2 = job2;
  sessionStorage.job3 = job3;
}

function init() {
  var apply = document.getElementById("apply");
  var apply2 = document.getElementById("apply2");
  var apply3 = document.getElementById("apply3");
  apply.onclick = storedata;
  apply2.onclick = storedata;
  apply3.onclick = storedata;
}

window.onload = init;

在这里,我想存储来自apply.html的作业参考编号:

<label for="Job">Job Reference Number</label>
<input type="text" name="Student ID" id="Job" norequired="norequired" pattern="\d{5}" />
<br />
<br />                          

这是我在sessionStorage中获取apply.js的JavaScript函数:

function retrievedata() {
  document.getElementById("Job").value = sessionStorage.Job = Job;
}

问题是当点击来自jobs.html的应用链接时,它将重定向到apply.htm,其中将存储作业参考编号,但它没有发生

3 个答案:

答案 0 :(得分:1)

这样做

存储数据

 sessionStorage.setItem("job", "xyz");

retrive

if (sessionStorage.job)
   document.getElementById("result").innerHTML = sessionStorage.getItem("job");

另请检查:https://developer.mozilla.org/en-US/docs/Web/API/Window/sessionStorage

答案 1 :(得分:0)

问题是你如何引用价值。非投入没有价值属性。

var el = document.getElementById("t");
console.log("value: ", t.value);  //nope
console.log("getAttribute: ", t.getAttribute("value")) //right
console.log("dataset: ", t.dataset.value) // how most would do it
<span id="t" value="1" data-value="123"></span>

事件更好地使用数据值,因为这是一个有效的属性。

会话存储密钥区分大小写sessionStorage.JobsessionStorage.job不同并且此行错误。

document.getElementById("Job").value = sessionStorage.Job = Job;

您正在将变量Job存储到sessionStorage.Job中,该Job将Job存储到值中。它应该只是

document.getElementById("Job").value = sessionStorage.job

之后,你必须找出你点击的项目。

答案 2 :(得分:0)

问题是你使用锚标记href导航到apply.html,因此在点击触发方法之前,它会进入apply.html。

<a href='apply.html'>Button</a>

使用类似的东西

<a id='navigateToApplyPage'>Button</a>

在JS中:

$('#navigateToApplyPage').on('click',function(){
    // set sessionstorage //sessionStorage.setItem....
    // navigate to the required page // window.location.href = .....
})