CODEWITHSUNDEEP
javascripthtml
Sandip Armal Patil
Sandip Armal Patil

Reputation: 5905

How to pass value from one html page to another in JavaScript?

I know this question ask many times but my question is something different.
I have 3 html pages like apply.html, personal_info.html, resume info.html.

  1. In apply.html page:-
    I use one LinkedIn button for LinkedIn-login. when user click on that button and filling login information, it fetch user data from LinkedIn. And show it on same page(apply.html).

  2. In personal_info.html:-
    I need to show this personal information in respective TextField which we fetch from LinkdIn.

  3. In Resume_info.html:-
    Here I need to show Career information which we fetch on apply.html page using LinkedIn.

I don't understand how to do this? I am very new on Html,JavaScript.
Here is my code for your reference.

Apply.html where I fetch LinkedIn Date

<html>
<head>    
<script type="text/javascript"> 
function loadData() {
IN.API.Profile("me")
.fields(["id", "firstName", "lastName", "pictureUrl","headline","industry","location:(name)","positions:(title)","emailAddress"])
  .result(function(result) {
  profile = result.values[0];
  profHTML = "<p><a href=\"" + profile.publicProfileUrl + "\">";
  profHTML += "<img class=img_border align=\"left\" src=\"" + profile.pictureUrl + "\"></a>";      
  profHTML += "<a href=\"" + profile.publicProfileUrl + "\">";
  profHTML += "<h2 class=myname>" + profile.firstName + " " + profile.lastName + "</a> </h2>";
  profHTML += "<span class=myheadline>" + profile.headline + "</span>";
  profHTML += "<h3>" + profile.industry + "</h3>";
  profHTML += "<h3>" + profile.location.name + "</h3>";
  profHTML += "<h3>" + profile.positions.values[0].title + "</h3>";
  profHTML += "<h3>" + profile.positions.values[1].title + "</h3>";
  profHTML += "<h3>" + profile.emailAddress + "</h3>";
 $("#profiles").html(profHTML);
  });
 } 
</script>
</head>
<body>
<script type="IN/Login" data-onAuth="loadData"></script>
<div id="profiles"></div>
<div id="profiles1"></div> 
</body>

personal_Info.html where I need to show LinkedIn data. 

<body>
<div id="container">
<section>
<div class="results"> 
 <div class="results-head">
  Personal Info
  <div class="pagecount">1/6</div>
  </div>
  <div class="job-des">
   <div class="row">
     <input name="textfield2" type="text" id="textfield1" value="First Name"  class="input-field" onblur="if (this.value == '')">
   </div>
  <div class="row">
    <input name="textfield" type="text" id="textfield2" value="Last Name" class="input-field"> 
  </div>
  <div class="row">
    <input name="textfield" type="text" id="textfield3" value="Street Address" class="input-field"> 
  </div>
   <div class="row">
    <input name="textfield" type="text" id="textfield4" value="City" class="input-field"> 
  </div>
   <div class="row">
   <select name="select2" id="select2" class="input_list2">
      <option value="">  Country  </option>
    </select>
  </div>
   <div class="row">
    <select name="select2" id="select3" class="input_list2">
      <option>State</option>
    </select>
  </div>
   <div class="row">
     <select name="select2" id="select4" class="input_list2">
      <option>Region</option>
    </select>
  </div>
   <div class="row">
    <input name="textfield" type="text" id="textfield5" value="Zip/Postal Code" class="input-field"> 
  </div>
  <div class="row">
    <input name="textfield" type="text" id="textfield6" value="Email Address" class="input-field"> 
  </div>
   <div class="row">
   <input name="" type="checkbox" value="" checked align="bottom"> 
   Authorization to work in U.S.
  </div>



  </div>


</div>
<div class="input-btn-panel">
  <div class="input-btn-wrap"><input type="submit" name="button" id="button" value="Next" class="blue-btn" onClick="updateTxt()"></div>

 <div id="profiles"></div>
</div>
</body>

Please give me some hint. I don't understand how to do this?

Upvotes: 3

Views: 13136

Answers (2)

McGarnagle
McGarnagle

Reputation: 102743

You could use the HTML5 local storage. It lets you tell the browser to save data on the user's machine. (There's also session storage, valid only for the current session.)

Save (in Apply.html)

IN.API.Profile("me")
.fields(["id", "firstName", "lastName", "pictureUrl","headline","industry","location:(name)","positions:(title)","emailAddress"])
  .result(function(result) {
      profile = result.values[0];

      // save all keys to local storage
      for (f in profile) localStorage[f] = fields[f];

      // more stuff ...
  });

Retrieve (in personal_Info.html)

// retrieve first name from local storage
var firstName = localStorage["firstName"];
if (firstName !== undefined) {
    $("#textfield1").attr(value, firstName);
}

Upvotes: 2

Geethanga
Geethanga

Reputation: 1846

Well you can use HTML5 session storage. Check this link.

Just dig around on HTML5 session storage and you will find a lot of examples.

Upvotes: 0

Related Questions