Transfer data from one HTML file to another

Question

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   lt html gt   lt head gt      lt script language  javascript  type  text javascript  src  asd js  gt  lt  script gt   lt  head gt    lt body gt    lt form name  form1  action  next html  method  get  gt  name  lt input type   text  id  name  name  n  gt   lt input type  submit  value  next   gt   lt button type  button  id  print  onClick  testJS    gt  Print  lt  button gt   lt  form gt    lt  body gt   lt  html gt    next html   lt head gt      lt script language  javascript  type  text javascript  src  asd js  gt  lt  script gt   lt  head gt    lt body gt    lt form name  form1  action  next html  method  get  gt   lt table gt       lt tr gt           lt td id  here  gt test lt  td gt       lt  tr gt   lt  table gt   lt  form gt    lt  body gt   lt  html gt    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

User · Answer

The following is a sample code to pass values from one page to another using html. Here the data from page1 is passed to page2 and it's retrieved by 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>

User · Answer

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   amp             data       tmp      for  var i   0  l   params length  i  lt  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

User · Answer

I use this to set Profile image on each page   On first page set value as   localStorage setItem  imageurl    ur image url      or on second page get value as    var imageurl localStorage getItem  imageurl    document getElementById  profilePic   src    imageurl

User · Answer

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

User · Answer

With the Javascript localStorage class  you can use the default local storage of your browser to save  key value  pairs and then retrieve these values on whichever page you need using the key  Example -  Pageone html -   lt script gt      localStorage setItem  firstname    Smith     lt  script gt      Pagetwo html -   lt script gt      var name localStorage getItem  firstname     lt  script gt

User · Answer

lt html gt   lt head gt   lt script language  javascript  type  text javascript  scr  asd js  gt  lt  script gt   lt  head gt    lt body gt    lt form name  form1  action     method  get  gt  name  lt input type   text  id  name  name  n  gt   lt input type  submit  value  next   gt   lt button type  button  id  print  onClick  testJS    gt  Print  lt  button gt   lt  form gt    lt  body gt          client side scripting  function testJS    var name   jQuery   name   val    jQuery load  next html  function    jQuery   here   html name           jQuery is a js library and it simplifies its programming  So I recommend to use jQuery rathar then js  Here I just took value of input elemnt id   name  on submit button click event  then loaded the desired page next html   if the load function executes successfully i am calling a function which will put the data in desired place   jquery load function http   api jquery com load

User · Answer

you can simply send the data using window location href first store the value to send from testing html in the script tag  variable say   lt script gt     var data   value to send   window loaction href  next htm data   data  lt  script gt    this is sending through a get request

User · Answer

HI im going to leave this here cz i cant comment due to restrictions but i found AlexFitiskin s answer  perfect  but a small correction was needed  document getElementById  here   innerHTML   data name     This needed to be changed to  document getElementById  here   innerHTML   data n    I know that after five years the owner of the post will not find it of any importance but this is for people who might come across in the future

User · Answer

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    Session Cookies HTML5 LocalStorage POST the variable in the url and retrieve them in next html via window object

[javascript] Transfer data from one HTML file to another

Examples related to javascript

Examples related to html