www.webdeveloper.com
Results 1 to 3 of 3

Thread: JS Using array on multiple pages

  1. #1
    Join Date
    Mar 2014
    Posts
    1

    JS Using array on multiple pages

    Hello

    I have a problem by accessing an array over 2 webpages. On page 1 i need the user to fill in text in a text box. After clicking a button the text must be stored in an array. On page 1 there is also a link to page 2. When page 2 opens after clicking the link i want to view the value off the array in a text area.

    I have 2 functions written for this, i want to access the functions from a .js file so i can use them over multiple pages.

    Code:

    Page 1

    <html>
    <head>
    <title>vb</title>
    <script type="text/javascript" src="file.js"></script>
    </head>
    <body>
    <input id="txt" type="text">
    <br>
    <input value="Click Me" onclick="getText();"
    type="button">
    <a href="fg.html">Klik dan hier !</a>
    <br>
    <br>
    </body>
    </html>

    Page2

    <html>
    <head>
    <title>fg</title>
    <script type="text/javascript" src="file.js"></script>
    </head>
    <body onload="writetext()">
    <textarea rows="5" id="txtArea"></textarea>
    </body>
    </html>

    file.js

    var list = [];

    function getText() {
    var str = document.getElementById("txt");
    list.push(str.value);
    str.value = "";
    str.focus();
    }

    function writetext() {
    var area = document.getElementById("txtArea");
    area.value = "";
    for (var i = 0; i < list.length; i++) {
    area.value += list[i] + "\n";
    }
    }

    Can someone tell me what the problem is?

    Thanks

  2. #2
    Join Date
    Mar 2005
    Location
    Behind you...
    Posts
    862
    If the two pages are going to be purely HTML (no PHP) then you'll probably want to use cookies or something like localStorage/sessionStorage. Cookies would be used if you expect people using the page to have an older browser that doesn't support localStorage or sessionStorage (IE7 and lower).

    Even if you do use the storage API, you'll want to run a check to make sure it's supported and ideally you'd end up with something like:
    Code:
    function _RunThisBeforePageTwo() {
      if(sessionStorage != null) {
        sessionStorage.setItem("list", list);
      } else {
        // Set a cookie instead
      }
    }
    function _RunThisOnPageTwo() {
      if(sessionStorage != null) {
        list = sessionStorage.getItem("list");
      } else {
        // Load the cookie instead
      }
    }
    The first function would be run before the user goes to page 2 and would upset a sessionStorage variable to hold your array. I did leave out the code to set a cookie, but that's something that's relatively easy to find.

    However I will mention that if you use a cookie the array will have to be stored as a string (likely separated by commas, unless of course the strings contain commas in which case you'll need to find an appropriate delimiter. Once stored as a string you would have to load it and use the split() method to turn it back into an array on the second page.
    "Given billions of tries, could a spilled bottle of ink ever fall into the words of Shakespeare?"

  3. #3
    Join Date
    Jun 2004
    Location
    Portsmouth UK
    Posts
    2,678
    Code:
    <html>
    <head>
    <title>vb</title>
    <script type="text/javascript">
    
    
    
    function getText(days) {   // the number of days to remember the array or if a string for the browser session
     days=(typeof(days)=='number'&&days>0)||typeof(days)=='string'?days:-1;
     getText.ary=days!=-1&&cookie('txt')?cookie('txt').split('~'):[];
     var str = document.getElementById("txt");
     getText.ary.push(str.value);
     str.value = "";
     str.focus();
     document.cookie='txt='+getText.ary.join('~')+(typeof(days)=='number'?';expires='+(new Date(new Date().getTime()+days*86400000).toGMTString())+';path/;':';');
    }
    
    function writetext() {
     var ary=cookie('txt')?cookie('txt').split('~'):[];
     document.getElementById("txtArea").value=ary[0]?ary.join('\n'):'';
     document.cookie='txt=;expires='+(new Date(new Date().getTime()-1).toGMTString())+';path/;'; // reset the cookie/array
    }
    
    function cookie(nme){
      var re=new RegExp(nme+'=[^;]+','i');
      return document.cookie.match(re)?document.cookie.match(re)[0].split("=")[1]:null;
     }
    
    </script>
    </head>
    <body>
    <input id="txt" type="text">
    <br>
    <input value="Click Me" onclick="getText(1);"
    type="button">
    <a href="fg.html">Klik dan hier !</a>
    <br>
    <br>
    combining the two pages using the button in place of onload<br />
    <input value="Write Text" onclick="writetext();"  type="button">
    <textarea rows="5" id="txtArea"></textarea>
    </body>
    </html>
    Vic

    God loves you and will never love you less.

    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles