Transfer data from one HTML file to another
html, javascript
Solution
Try this code:
In testing.html
<script>
function testJS() {
var b = document.getElementById('name').value,
url = 'http://path_to_your_html_files/next.html?name=' + encodeURIComponent(b);
document.location.href = url;
}
</script>
And in next.html:
<script>
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;
}
</script>
Description: JavaScript does not have any specific feature to share data between different pages. However, there are some alternative ways to achieve it, e.g., using URL Parameters (I have used this approach in my code), cookies, localStorage, etc.
At first in the testing.html, store the name parameter in URL (?name=...). Then in the script of next.html, parse the URL and get all the params from previous page.
PS. I'm a non-native English speaker, will you please correct my message, if necessary.
Problem
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`