Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 5 of 5
  1. #1
    Junior Member
    Join Date
    Oct 2010
    Posts
    11
    Member #
    24384
    Hi!
    I would like to know how do I pass a variable in my URL to the next page.


    Code:
    For example, my URL is:
    http://www.mysite.com?source=google
    
    I'm using this form code to go to the next page:
    <form action="http://www.mysite.com/next-page.html" method="get" name="form">
    <input type="text" name="zipcode" maxlength="5" id="zipcode" />
    <br />
    <input type="submit" id="button" value="Go"/>
    </form>
    
    So the next page URL will be:
    http://www.mysite.com/next-page.html?zipcode=11111
    
    I want that the variable "google" will be also in this URL:
    http://www.mysite.com/next-page.html?zipcode=11111&source=google
    How I do that?

    Thanks,
    Steve

  2.  

  3. #2
    Member
    Join Date
    May 2011
    Location
    Baltimore, MD
    Posts
    60
    Member #
    27796
    Liked
    11 times
    That's exactly how you do it.

    So, see in that <form> tag, there's an attribute "method". That means that the variable will be passed in the address bar.

    HTML wont know what to do with this.
    But, in a server side scripting language, such as PHP you can grab the variable by asking for the $_POST['variable_name'];
    Technically, if you are limited to HTML pages, You can grab the variable using JavaScript.

    HTML Code:
    <script>
    function getQueryVariable(variable) {
      var query = window.location.search.substring(1);
      var vars = query.split("&");
      for (var i=0;i<vars.length;i++) {
        var pair = vars[i].split("=");
        if (pair[0] == variable) {
          return pair[1];
        }
      }
      return "nil";
    }
    
    alert( getQueryVariable("variable_name") );
    </script>
    /phillihp/
    Check out my blog @ http://www.phillihp.com
    ~Web~Mobile~Hacking~Tech~Gadgets~More~

  4. #3
    Junior Member
    Join Date
    May 2011
    Location
    Austin, TX
    Posts
    6
    Member #
    27812
    Liked
    2 times
    Here's a straightforward solution to your problem using jQuery. It will pull all params and values from the QueryString regardless of order and if one of them is source it will automatically populate the value into a hidden form field. The rest is a regular form using the GET method. Hope this helps!

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/2000/REC-xhtml1-200000126/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js" type="text/javascript"></script>
    <script type="text/javascript">
    $(document).ready(function() {
        $('#zipcode').val("");
        var getSource=document.URL.split('?')[1];
        if(getSource == undefined){
            getSource = '';
        }
        getSource=getSource.split('&');
        for (var i = 0;i<getSource.length;i++){
            var queryParamPair = getSource[i].split('=');
            var queryLabel = queryParamPair[0];
            var queryValue = queryParamPair[1];
            if(queryLabel == 'source'){
                $('#source').val(queryValue);
            }
        }
    });
    
    function createURL(){
        window.location = "?source=google";
    }
    </script>
    <body>
    <center><input type="submit" value="Generate Test QueryString" onclick="javascript:createURL();" />
    <br />
    <br />
    <form method="GET" action="next-page.html">
        <input type="hidden" name="source" id="source" />
        ZipCode: <input type='text' name="zipcode" id="zipcode" />
        <input type="submit"/>
    </form>
    </center>
    </body>
    </html>

    -Brandon

  5. #4
    Member
    Join Date
    May 2011
    Location
    Baltimore, MD
    Posts
    60
    Member #
    27796
    Liked
    11 times
    copy-cat.
    /phillihp/
    Check out my blog @ http://www.phillihp.com
    ~Web~Mobile~Hacking~Tech~Gadgets~More~

  6. #5
    Junior Member
    Join Date
    Oct 2010
    Posts
    11
    Member #
    24384
    It works.
    Thank you very much!


Remove Ads

Posting Permissions

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

Search tags for this page

html pass var to next page

,

html pass variable to next page

,

pass variable to html page using url

Click on a term to search for related topics.
All times are GMT -6. The time now is 05:10 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com