Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Transfer data from one HTML file to another

I'm new to HTML and JavaScript, what I'm trying to do is from an HTML file I want to extract the things that set there and display it to another HTML file through JavaScript.

Here's what I've done so far to test it:
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(will extract value from the test.html and set to next.html) -> next.html

like image 450
newbie Avatar asked Jul 06 '13 10:07

newbie


People also ask

How do I display the content of one HTML page in another?

You could use an <iframe> in order to display an external webpage within your webpage. Just place the url of the webpage that you want to display inside the quotes of the src attribute. Show activity on this post. Either you use an iframe or you load the site via AJAX into a div (e.g. using jQuerys load() method).


3 Answers

Try this code: In testing.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 can't share data between different pages, and we must to use some solutions, e.g. URL get params (in my code i used this way), cookies, localStorage, etc. Store the name parameter in URL (?name=...) and in next.html parse URL and get all params from prev page.

PS. i'm an non-native english speaker, will you please correct my message, if necessary

like image 96
Alex Fitiskin Avatar answered Sep 22 '22 09:09

Alex Fitiskin


The old fashioned way of setting a global variable that persist between pages is to set the data in a Cookie. The modern way is to use Local Storage, which has a good browser support (IE8+, Firefox 3.5+, Chrome 4+, Android 2+, iPhone 2+). Using localStorage is as easy as using an array:

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

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

like image 33
Lie Ryan Avatar answered Sep 20 '22 09:09

Lie Ryan


Assuming you are talking about this js in browser environment (unlike others like nodejs), Unfortunately I think what you are trying to do isn't possible simply because this is not the way it is supposed to work.

Html pages are delivered to the browser via HTTP Protocol, which is a 'stateless' protocol. If you still needed to pass values in between pages, there could be 3 approaches:

  1. Session Cookies
  2. HTML5 LocalStorage
  3. POST the variable in the url and retrieve them in next.html via window object
like image 29
Shreyas Avatar answered Sep 21 '22 09:09

Shreyas