Geek Answers Handbook

Transfer data from one HTML file to another

I am new to HTML and Javascript, what I'm trying to do from an HTML file, I want to extract everything that is installed there and display it in another HTML file through Javascript

Here is what I have done so far to test this:
Testing.html

 <html> <head> <script language="javascript" type="text/javascript" src="asd.js"></script> </head> <body> <form name="form1" action="next.html" method="get"> name:<input type ="text" id="name" name="n"> <input type="submit" value="next" > <button type="button" id="print" onClick="testJS()"> Print </button> </form> </body> </html>

next.html

 <head> <script language="javascript" type="text/javascript" src="asd.js"></script> </head> <body> <form name="form1" action="next.html" method="get"> <table> <tr> <td id="here">test</td> </tr> </table> </form> </body> </html>

asd.js

 function testJS() { var b = document.getElementById('name').value document.getElementById('here').innerHTML = b; }

test.html ads.js (extracting the value from test.html and setting next.html) - next.html

+11
javascript html
source share
9 answers

Try this code: In test.html

 function testJS() { var b = document.getElementById('name').value, url = 'http://path_to_your_html_files/next.html?name=' + encodeURIComponent(b); document.location.href = url; }

And in next.html:

 window.onload = function () { var url = document.location.href, params = url.split('?')[1].split('&'), data = {}, tmp; for (var i = 0, l = params.length; i < l; i++) { tmp = params[i].split('='); data[tmp[0]] = tmp[1]; } document.getElementById('here').innerHTML = data.name; }

Description: javascript cannot exchange data between different pages, and we must use some solutions, for example. URL get params (in my code that I used this way), cookie, localStorage, etc. Save the name parameter in the URL (? Name = ...) and in the next.html URL and get all the parameters from the previous page.

PS. I am not a native speaker, please correct my message if necessary

+21
source share

An old-fashioned way to set a global variable that is stored between pages is to set the data in a cookie. The modern way is to use local storage, which has good browser support (IE8 +, Firefox 3.5+, Chrome 4+, Android 2+, iPhone 2+). Using localStorage is as simple as using an array:

 localStorage["key"] = value; ... in another page ... value = localStorage["key"];

You can also attach event handlers to listen for changes, although the event API is slightly different between browsers. More about the topic.

+11
source share

Assuming you are talking about this js in a browser environment (unlike others like nodejs), unfortunately, I think that what you are trying to do is not possible simply because it is not how it should work.

Html pages are delivered to the browser via the HTTP protocol, which is a stateless protocol. If you still need to pass values ​​between pages, there may be 3 approaches:

  • Session Cookies
  • HTML5 LocalStorage
  • Send the variable to the url and return them to next.html via window object
+7
source share

You can simply send data using window.location.href First, save the value to send from testing.html in the script tag, say variable

 <script> var data = value_to_send window.loaction.href="next.htm?data="+data </script>

this is sending through a request for receipt

+1
source share
 <html> <head> <script language="javascript" type="text/javascript" scr="asd.js"></script> </head> <body> <form name="form1" action="#" method="get"> name:<input type ="text" id="name" name="n"> <input type="submit" value="next" > <button type="button" id="print" onClick="testJS()"> Print </button> </form> </body>

client side scripts

 function testJS(){ var name = jQuery("#name").val(); jQuery.load("next.html",function(){ jQuery("#here").html(name); }); }

jQuery is a js library and simplifies its programming. Therefore, I recommend using jQuery rathar, then js. Here, I simply took the value input elemnt (id = name) for the send button send event, and then loaded the desired page (next.html), if the download function is successful, I call a function that will put the data in the right place.

Jquery download function http://api.jquery.com/load/

0
source share

With the Javascript localStorage class, you can use your browser's default local storage to save the pairs (key, value), and then retrieve these values ​​to any desired page using the key. Example - Pageone.html -

 <script> localStorage.setItem("firstname", "Smith"); </script>

Pagetwo.html -

 <script> var name=localStorage.getItem("firstname"); </script>
0
source share

The following is sample code for passing values ​​from one page to another using HTML. Here, the data from page 1 is transferred to page 2 and retrieved using javascript.

1) page1.html

 <!-- Value passing one page to another Author: Codemaker --> <html> <head> <title> Page 1 - Codemaker</title> </head> <body> <form method="get" action="page2.html"> <table> <tr> <td>First Name:</td> <td><input type=text name=firstname size=10></td> </tr> <tr> <td>Last Name:</td> <td><input type=text name=lastname size=10></td> </tr> <tr> <td>Age:</td> <td><input type=text name=age size=10></td> </tr> <tr> <td colspan=2><input type=submit value="Submit"> </td> </tr> </table> </form> </body> </html>

2) page2.html

 <!-- Value passing one page to another Author: Codemaker --> <html> <head> <title> Page 2 - Codemaker</title> </head> <body> <script> function getParams(){ var idx = document.URL.indexOf('?'); var params = new Array(); if (idx != -1) { var pairs = document.URL.substring(idx+1, document.URL.length).split('&'); for (var i=0; i<pairs.length; i++){ nameVal = pairs[i].split('='); params[nameVal[0]] = nameVal[1]; } } return params; } params = getParams(); firstname = unescape(params["firstname"]); lastname = unescape(params["lastname"]); age = unescape(params["age"]); document.write("firstname = " + firstname + "<br>"); document.write("lastname = " + lastname + "<br>"); document.write("age = " + age + "<br>"); </script> </body> </html>
0
source share

Hi, I'm going to leave this here because I cannot comment due to limitations, but I found AlexFitiskin's answer perfectly, but a little correction was needed

 document.getElementById('here').innerHTML = data.name;

It should be changed to

 document.getElementById('here').innerHTML = data.n;

I know that in five years the post owner will not consider this important, but this is for people who may face in the future.

0
source share

I use this to set a profile picture on every page.

On the first page, set the value as:

 localStorage.setItem("imageurl", "ur image url");

or on the second page get the value as:

 var imageurl=localStorage.getItem("imageurl"); document.getElementById("profilePic").src = (imageurl);
0
source share

More articles:


All Articles