CODEWITHSUNDEEP
javascript
Paras Sharma
Paras Sharma

Reputation: 1

Passing text from one page to the next using JavaScript

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

Upvotes: 0

Views: 52

Answers (3)

epascarello
epascarello

Reputation: 207511

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.

Upvotes: 0

Pranay Rana
Pranay Rana

Reputation: 176896

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

Upvotes: 1

Rohit Goyal
Rohit Goyal

Reputation: 222

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 = .....
})

Upvotes: 0

Related Questions