Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    New to the CF scene
    Join Date
    Oct 2012
    Location
    United States
    Posts
    6
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Passing data from one page to the next

    Hi,
    I am very new so please bare with me.
    I know how to submit a form with POST and echo a page in php.
    I have a feeling that i am missing a general concept though.

    Lets say i have a start page where the user selects a brand of car; ford, Chevy etc. I want to load a second page called for example selectedCarCo.html that has generic items no matter the car selected and then selection specific data as well.

    My question is I essentially need a method to get the selection from the first page to the second and load data based on that selection via AJAX or some other method.

    Is the correct approach to POST my selection to a php page and then echo out the code for the page including the generic items? I feel there must be a better way where i can have a normal html page and then access the car selection some how via javascript and act accordingly.

    Please advise,

    Thanks for the help.

  • #2
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,026
    Thanks
    23
    Thanked 588 Times in 587 Posts
    Normally, a form is used to transmit a multitude of information such as the users name, password, home address, phone number etc.. You are looking for a one to one relationship. Each item selected on the page brings up it's own unique second page. A simple anchor on each item will do this nicely.

    But you mentioned something like cars. You may want to select a car and than the make of the car and than the style etc.. This is done through multiple sections, normally via dropdown select lists.

    The method uses ajax, php, and mysql. Selecting the car make than uses ajax to query mysql for the models of this make and writes a second dropdown list displaying them. This goes on and on til all the info is gathered and the last ajax generates the last page based on a number of previous selections.

    Exactly what do you want to do?

  • #3
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,273
    Thanks
    10
    Thanked 581 Times in 562 Posts
    you can change pages or use ajax, but there's no point in doing both.
    if you use forms, you can do it all in php.
    if you use ajax, you'll need php to return something like a stripped-down copy of your selectedCarCo.html page with only the data that is dependent upon the selection included. Ajax then takes that fragment from php and injects it into the live page at start.html. in that case, selectedCarCo.html need not be called something.html, and shouldn't ever be seen on it's own by a user.
    my site (updated 13/9/26)
    BROWSER STATS [% share] (2014/5/28) IE7:0.1, IE8:5.3, IE11:8.4, IE9:3.2, IE10:3.2, FF:18.2, CH:46, SF:7.9, NON-MOUSE:32%

  • #4
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,021
    Thanks
    75
    Thanked 4,323 Times in 4,289 Posts
    But you *CAN* send data from one HTML page to the next. You can't use method="post" (post is reserved for server-side usage), but you can use method="get". The second page can read the querystring thus created by the form sending on the first page.

    You could also send data from one page to another via cookies, of course. But the querystring works well enough for most purposes.

    Here's how I do it:
    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <title>This is page 1</title>
    </head>
    <body>
    <form method="get" action="page2.html">
    Name: <input name="username" /><br/>
    Phone: <input name="phone" /><br/>
    <input type="submit"/>
    </form>
    </body>
    </html>
    and then the second page:
    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <title>This is page 2</title>
    </head>
    <body>
    The username is <span id="uname"></span><br/>
    The phone is <span id="uphone"></span><br/>
    
    <script type="text/javascript">
    (
      function() 
      {
          var qs = [ ];
          var qstring = location.search;
          if ( qstring.length > 1 ) 
          {
              var pairs = qstring.substring(1).split("&");
              for ( var p = 0; p < pairs.length; ++p )
              {
                  var pair = pairs[p].split("=");
                  qs[ pair[0].toLowerCase() ] = decodeURIComponent( pair[1].replace(/\+/g," ") );;
              }
          }
    
          document.getElementById("uname").innerHTML = qs["username"];
          document.getElementById("uphone").innerHTML = qs["phone"];
      }
    )();
    </script>
    </body>
    </html>
    The JS code in red is what is used to receive and decode the querystring. The qs object thus becomes a simple "lookup" object that allows you to easily find any of the passed "GET" values from the form on the first page.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #5
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,273
    Thanks
    10
    Thanked 581 Times in 562 Posts
    localStorage is simpler than parsing a url or cookies, and works to/from any page on the site without revealing the form info in logable http urls/headers.
    my site (updated 13/9/26)
    BROWSER STATS [% share] (2014/5/28) IE7:0.1, IE8:5.3, IE11:8.4, IE9:3.2, IE10:3.2, FF:18.2, CH:46, SF:7.9, NON-MOUSE:32%

  • #6
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,021
    Thanks
    75
    Thanked 4,323 Times in 4,289 Posts
    If, of course, the browser supports local storage.

    MSIE 7, for example, does not.

    RndMe loves to always use the most modern capabilities, but if you need to be sensitive to as many browsers as possible, you can't always use everything he uses.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #7
    Senior Coder
    Join Date
    Sep 2010
    Posts
    1,902
    Thanks
    15
    Thanked 226 Times in 226 Posts
    You can also use the Window Name property to pass data between pages, even accross domains.

    http://www.w3schools.com/jsref/prop_win_name.asp


  •  

    Posting Permissions

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