Passing text from one page to the next using JavaScript

Question

This is the job reference number I want to send to my form job reference textbox:

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

JavaScript file of jobs.js:

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

Here I want to store my job reference number which is from apply.html:

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

And this is my JavaScript function for getting the sessionStorage in apply.js:

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

The issue is that when click on apply link from jobs.html it will redirect to apply.htm where the job reference number will be stored but it is not happening

Issue is that when click on apply link from jobs.html it will rederect to apply.htm where the job refrence number will be stored but it is not happening — Paras Sharma
– Paras Sharma, Commented Sep 22, 2017 at 4:50
Do you really want to store all the values on click and not just the one you click? — epascarello
– epascarello, Commented Sep 22, 2017 at 4:54

Pranay Rana · Accepted Answer · 2017-09-22 05:06:52Z

1

Do like this

store data

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

retrive

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

Check this also : https://developer.mozilla.org/en-US/docs/Web/API/Window/sessionStorage

edited Sep 22, 2017 at 5:06

answered Sep 22, 2017 at 4:51

Pranay Rana

177k37 gold badges244 silver badges267 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Paras Sharma Over a year ago

but i am doing like i have give the jobs description number in paragrapgh, so by using that id i wanna store and retreive,

Pranay Rana Over a year ago

@ParasSharma - rather than doing this sessionStorage.job ..try this sessionStorage.setItem("job", job);...and also check document.getElementById("job").value returning value

Rohit Goyal · Accepted Answer · 2017-09-22 05:06:15Z

0

The problem is you are using anchor tag href to navigate to the apply.html and hence before your method triggering on click gets executed it's going to the apply.html.

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

Use something like this

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

In the JS:

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

answered Sep 22, 2017 at 5:06

Rohit Goyal

2321 gold badge2 silver badges8 bronze badges

Comments

epascarello · Accepted Answer · 2017-09-22 05:09:55Z

0

Problem is how you are referencing value. There is no value property for non inputs.

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>

Event better use data-value since that is a valid attribute.

And session storage keys are case sensitive sessionStorage.Job is not the same as sessionStorage.job And this line is wrong.

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

You are storing the variable Job into sessionStorage.Job which is storing Job into the value. It should just be

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

And after that, you have to figure out what item you clicked.

edited Sep 22, 2017 at 5:09

answered Sep 22, 2017 at 4:56

epascarello

208k20 gold badges206 silver badges246 bronze badges

2 Comments

epascarello Over a year ago

You do not see that you would replace .value with .getAttribute("value")?

epascarello Over a year ago

Well the demo works so.... You have other issues like the fact you are reading Job when it is stored in job. Did you fix that?

Collectives™ on Stack Overflow

Passing text from one page to the next using JavaScript

3 Answers 3

2 Comments

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related