-2

How to pass variables between two html pages using jQuery? I have two html pages main.html and index.html. How to call a function from main.html?

marc_s
  • 732,580
  • 175
  • 1,330
  • 1,459
neha
  • 13
  • 8
  • Neha, please show the code whatever you have done. – Himanshu Upadhyay Sep 18 '17 at 12:45
  • Share your code, what you have done.. – Super User Sep 18 '17 at 12:47
  • 1
    You probably want to use a querystring if you are loading the page with a GET request. – epascarello Sep 18 '17 at 12:55
  • You probably need to look at this [answer](https://stackoverflow.com/a/9003363/6556397) – Rahul Sep 18 '17 at 12:56
  • 2
    You may use HTML 5 local storage or session storage . Tutorial at https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage – user3419778 Sep 18 '17 at 12:59
  • student_name=xmlDoc.getElementsByTagName("student_name")[0].childNodes[0].nodeValue; admission_date=xmlDoc.getElementsByTagName("admission_date")[0].childNodes[0].nodeValue; gender = xmlDoc.getElementsByTagName("gender")[0].childNodes[0].nodeValue; localstorage.getItem(i,JSON.stringify(student_name,admission_date,gender)); console.log(localStorage); – neha Sep 18 '17 at 17:49
  • index.httml $("#number").append($("student_name")); – neha Sep 18 '17 at 17:54
  • student_name variable data from main page should append in index.html – neha Sep 18 '17 at 17:56

3 Answers3

0

This is not the best practice but you could do something like

from the first page, write an hyperlink to the next page, line

<a href="/page2.html?variable_name=value">click here</a>

This will redirect you to page2 and you will get the variable in the URL. This is called GET method

In page 2, you could write a method like, 

var parseGetVariables = function(url) {
  var urlParams = {};
  url.replace(
    new RegExp("([^?=&]+)(=([^&]*))?", "g"),
    function($0, $1, $2, $3) {
      urlParams[$1] = $3;
    }
  );

  return urlParams;
}

and then,

var url = location.search;  
var result = parseGetVariables(url );

and then access the variable as,

result.variable_name

As you can see, the parameters is decoded from the URL using regEx.

Alan Joseph
  • 89
  • 5
  • in main page a submit button is available.When the submit button clicks request has been send to server and response will be saved in localstorage variable.This variable will be used to append element in index.html page. – neha Sep 18 '17 at 18:01
  • Oh, i didnt know that you had a server. If you are sending the data to the server, just redirect to the new 'index.html' page from there. But if you want to make changes to the index file, you would have to template it by using whatever webframeworks you are using. Could you tell what is your server? is it a PHP server? – Alan Joseph Sep 19 '17 at 05:00
  • No changes in the index.html. Some div elements are available.Response from the server should append to those div elements in index.html. How to redirect directly from the server to index.html page.Could u plz suggest me.I am using cloud.And as of now am retrieving the data and saved in local storage variables. – neha Sep 19 '17 at 08:38
  • oh, i need more details @neha. Happy to help but i need more details. Feel free to ping me directly. – Alan Joseph Sep 19 '17 at 09:31
  • Thanku..My project is about certification.So in main page number has to enter and then submit.Then it fetches the details of that corresponding num and prints that details in index.html – neha Sep 19 '17 at 11:46
  • What is your server? PHP? Basically, the steps should be like, 1) Send the number from the main page to the server through a form 2) Recieve the number in the server, Do the proper queries with the number 3) Render the index page from the server. So, if it is PHP, the page would be index.php, If it is Ruby on rails, your file would look like index.html.erb – Alan Joseph Sep 19 '17 at 11:57
  • cloud based server am using jquery to request server. – neha Sep 19 '17 at 12:48
  • Oh, no, there should be a server set up in the cloud. You have to make sure in what language you have done the coding for the server. I could only help you with that info. – Alan Joseph Sep 20 '17 at 06:39
  • Thanku Alan.am using Jquery. And I have completed my project. – neha Sep 20 '17 at 07:15
  • Cool, Good to know that. But you used Jquery for your webpage's front end. I was asking you about the back end code -_-. Glad you are done :) – Alan Joseph Sep 20 '17 at 07:20
0

If you are linking from one to the other, look into query string attributes, session cookies or local storage. detecting if it is there and calling your function.

if index.html is a parent of main.html you could use the approach marked in this question.

if both pages are linked to from unique sources you will need some kind of socket server. my favourite being socket.io

StueyKent
  • 347
  • 4
  • 14
0

localStorage (does not work on Private mode). to set: localStorage.setItem('referal', referal); to get var referal= localStorage.getItem('referal');

Beneris
  • 627
  • 4
  • 11