Retrieving query string parameters in HTML

Discussion in 'Web Design and Development' started by jsnuff1, Nov 24, 2008.

  1. jsnuff1 macrumors 6502a

    Joined:
    Oct 4, 2003
    Location:
    NY
    #1
    I have a simple HTML site and users us this address to load it,

    http://mysite.com/index.html?name=john

    now how do i retrieve that name string using HTML code?

    I tried something like this

    <html>
    <head>
    </head>
    <body>

    My name is: <% =Request.querystring("name")%> !

    <body>
    </html>


    which I found searching for the answer, but it does not work.

    Any suggestions?
     
  2. web_god61 macrumors regular

    web_god61

    Joined:
    May 14, 2004
    #2
    not sure about html but in php which is a standard web server language it be an easy
    Code:
    <?=$_GET['name']?>
    , also <% =Request.querystring("name")%> might be associated with another language asp maybe? which would explain why your script doesn't work.
     
  3. jsnuff1 thread starter macrumors 6502a

    Joined:
    Oct 4, 2003
    Location:
    NY
  4. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #4
    No, HTML is a markup language, not a programming language. You'll need to use either JavaScript or some server side language to access and process the query string.
     
  5. rogersmj macrumors 68020

    rogersmj

    Joined:
    Sep 10, 2006
    Location:
    Indianapolis, IN
    #5
    As angelwatt said, HTML is not a programming language. However, I wrote this Javascript function awhile back when I was in a similar situation (no server-side scripting):

    Code:
    	
              function qs(search_for) {
    		var query = window.location.search.substring(1);
    		var parms = query.split('&');
    		for (var i=0; i<parms.length; i++) {
    			var pos = parms[i].indexOf('=');
    			if (pos > 0  && search_for == parms[i].substring(0,pos)) {
    				return parms[i].substring(pos+1);;
    			}
    		}
    		return "";
    	}
    
    That should return either the value of the key you pass in as the parameter, or an empty string if that key was not found. In your case, use it like

    Code:
    <script type="text/javascript">
      document.write(qs("name"));
    </script>
    
    At the spot you want the name to appear.
     
  6. themoonisdown09 macrumors 601

    themoonisdown09

    Joined:
    Nov 19, 2007
    Location:
    Georgia, USA
    #6
    If your website is using ASP, then this is how you would get the query string on the server side (the code behind):

    Code:
    string username = Request.QueryString["name"];
    
     
  7. rogersmj macrumors 68020

    rogersmj

    Joined:
    Sep 10, 2006
    Location:
    Indianapolis, IN
    #7
    But he's obviously not using any kind of server-side scripting, which is why the PHP and ASP solutions he found previously won't work. With straight HTML and no server-side, Javascript is the only option.
     
  8. SrWebDeveloper macrumors 68000

    SrWebDeveloper

    Joined:
    Dec 7, 2007
    Location:
    Alexandria, VA, USA
    #8
    Folks, don't forget SSI (server side includes) if you run Apache.

    Full details including examples here, it's pretty amazing what you can do:

    http://www.sean.co.uk/a/webdesign/serverside_includes_tutorial.shtm
    and
    http://http-server.carleton.ca/~dmcfet/html/ssi.html

    The idea is to embed SSI statements within your HTML, the server will parse the SSI and include it in the browser output. And you can even pass the query string as well, such as:

    (Set a variable to be the current query string, then print the variable variable where you want it, in this case a stylesheet name)

    HTML:
    <!--#set var="chosenstyle" value="$QUERY_STRING" -->
    <link rel="stylesheet" href="<!--#echo var="chosenstyle"-->.css" type="text/css"> 
    
    With SSI, it's all processed server side, no client dependencies like JS and no programming languages required. You can do conditionals, set and retreive variables, get the server time, reference server variables such as QUERY_STRING and others, browser detect, do MSIE conditionals and other cool tricks such as those listed here:

    http://httpd.apache.org/docs/1.3/howto/ssi.html

    -jim
     
  9. SteelTrap macrumors newbie

    Joined:
    Dec 22, 2008
    #9

    Given that you're limited to using JavaScript, what angelwatt said is right on
    the proverbial money, and the solution presented by mrogers is a very good
    basic answer.

    I couldn't resist the urge to tinker, though, and came up with a little variant.
    If you split around both the '&' and the '=', you get a ready-made array.

    Now your search doesn't have to bother with substrings; it's a simple string
    compare on every even array element; when you match, the odd one's your
    answer.

    Then, just to cover all bases, I allowed that there might be more than one
    "name=value" pair, with a different value for the same name.

    Also, I didn't like the idea of processing the Query-String every time I needed
    to extract a value, so I kept the result array around.

    Here's what I came up with:

    // Return an array:
    // item [J*2] is the Jth variable name
    // item [(J*2)+1] is the Jth variable value
    // Zero-length array if no Query-String Parameters
    // Do it in a single step.
    function getVarVals(){
    var queryParams = window.location.search.substring(1);

    var resltArray = new Array;
    var qpSplit = new RegExp('[&=]');

    resltArray = queryParams.split(qpSplit);
    return resltArray;
    }


    // Globalize the array of Query-String Parameters
    // Globalize the index last examined.
    var GlobalQueryString = getVarVals();
    var gqsIndx = 0;

    // Retrieve the value associated with the named QS parameter.
    // To allow for more than one instance occuring in the QS line,
    // set the Global Query String Index to just after the last
    // one retrieved, i.e., the first one to start the next search.
    // Let the caller manage tracking it; the second parameter to
    // this function is the index number at which to start the search.
    // If not found, return null and reset gqsIndx to zero.
    function getQSval(parmNam, initlIndx) {
    var foundIndx = 0;
    var reslt = null;
    var indx = ((initlIndx+1)&(-2)) ; // Normalize to next even no.
    for ( indx = indx ; indx < GlobalQueryString.length ; indx +=2 ) {
    if ( parmNam == GlobalQueryString[indx] ) {
    reslt = GlobalQueryString[indx+1];
    foundIndx = indx+1;
    break;
    }
    }
    gqsIndx = foundIndx;
    return reslt;
    }


    // A simple-minded test.
    // Show all instances of a given named QS variable
    function showQSvals(parmNam) {
    document.write('Values for '+parmNam+'<br>');
    while ( valVal = getQSval(parmNam, gqsIndx) ) {
    document.write(valVal +'<br>');
    }
    }


    In my test-case I had

    ?TVal=TestValue&SVal=SecondValue&TVal=Twicet&SVal=Thricet

    (as well as another test case with no QS Params).

    Anyway, I thought I'd make my small contribution of this tweak to this forum.

    Keep up the good work!
     

Share This Page