Solved

Get QueryString

Posted on 2001-08-17
23
7,629 Views
Last Modified: 2011-08-18
How do I use JavaScript to get QueryString ?
0
Comment
Question by:weiyee08
  • 9
  • 7
  • 6
  • +1
23 Comments
 
LVL 14

Expert Comment

by:avner
ID: 6398130
<script>
alert(self.location.search)
</script>
0
 
LVL 15

Expert Comment

by:a.marsh
ID: 6398137
queryString = window.location.href.substring(window.location.href.indexOf('?') + 1);


:o)

Ant
0
 
LVL 14

Expert Comment

by:avner
ID: 6398145
Ant , why parse it when you can use the location Object propertie ?
0
Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

 
LVL 1

Expert Comment

by:gordonmcmullan
ID: 6398149
Hi,

The query string is held in the browsers location object.

The search property of the location object stores the query string, this is a read/write string property so you can both get and set the query string.

access it like this

somestring = location.search;

hope this helps

Gordon McMullan

0
 
LVL 14

Expert Comment

by:avner
ID: 6398153
gordonmcmullan ,
Welcome to EE.
Please read :
http://www.experts-exchange.com/jsp/qShow.jsp?qid=20170202#tip

0
 

Author Comment

by:weiyee08
ID: 6398157
but how do I separate the fields ?
0
 

Author Comment

by:weiyee08
ID: 6398165
a.marsh's answered is much better
0
 
LVL 14

Expert Comment

by:avner
ID: 6398172
Try this :

query=self.location.search;
valuesArr=query.split("&");
0
 
LVL 14

Expert Comment

by:avner
ID: 6398173
valuesArr will now hold an Array() of the name value pairs.
0
 
LVL 15

Expert Comment

by:a.marsh
ID: 6398176
I am using the location object! With my way you also never get the ? at the start.

Ant
0
 
LVL 15

Accepted Solution

by:
a.marsh earned 40 total points
ID: 6398185
Here's a complete example of doing just what you want - it goes a step further and uses the actual fieldnames and values of the query string:


index.html
----------

<html>
<head>
<title>Enter your details</title>
</head>
<body>
<form action="story.html">
<table border="0" cellpadding="5" cellspacing="5">
<tr><td>Your name</td><td><input type="text" name="your_name" value=""></td></tr>
<tr><td>First friend</td><td><input type="text" name="friend1" value=""></td></tr>
<tr><td>Second Friend</td><td><input type="text" name="friend2" value=""></td></tr>
<tr><td>&nbsp;</td><td><input type="submit" value="create story..."</td></tr>
</table>
</form>
</body>
</html>



story.html
----------

<html>
<head>
<title>The Story</title>
<script language="javascript">

your_name = "test";
friend1 = "";
friend2 = "";

// Get names
var queryString = window.location.href.substring((window.location.href.indexOf('?') + 1));
var array1 = queryString.split('&'); // Each array element is in format "fieldname=value"
for(var i = 0; i < array1.length; i++){
 var tempArray = array1[i].split('='); // Separate fieldname and value
 eval(tempArray[0] + " = \"" + tempArray[1] + "\"");
}

</script>
</head>
<body>
<p>This is the story of
<script language="javascript"> document.write(your_name);</script>'s amazing adventure with
<script language="javascript"> document.write(friend1);</script> and
<script language="javascript"> document.write(friend2);</script>.
</p>
<p>Now I'm not a very good storyteller, so I'm afraid that's all you're going to hear about
<script language="javascript"> document.write(your_name);</script>,
<script language="javascript"> document.write(friend1);</script> and
<script language="javascript"> document.write(friend2);</script>'s adventure!
</p>
</form>
</body>
</html>


:o)

Ant
0
 

Author Comment

by:weiyee08
ID: 6398212
a.marsh,

var tempArray = array1[i].split('=');

eval(tempArray[0] + " = \"" + tempArray[1] + "\"");

what do above statement mean ?


document.write(your_name);

why you don't use array to display ?
0
 
LVL 15

Expert Comment

by:a.marsh
ID: 6398226
Basically:

var queryString = window.location.href.substring((window.location.href.indexOf('?') + 1));
var array1 = queryString.split('&'); // Each array element is in format "fieldname=value"


gets the query string and generates an array. The values of the array are:

fieldname=value

So in order to separate the value from the field we do a further split hence the:

var tempArray = array1[i].split('=');

This gives us an array that looks like:

tempArray[0] = "fieldname";
tempArray[1] = "value";


If you create the two files and copy and paste the code in the example above you will see it working.

:o)

Ant
0
 

Author Comment

by:weiyee08
ID: 6398236
i kow it is working, but why you don't use array to display the name ?
0
 
LVL 14

Expert Comment

by:avner
ID: 6398488
weiyee08 ,
I would change the code to use Hash-Table instead of Array.
0
 
LVL 15

Expert Comment

by:a.marsh
ID: 6398923
The name is simply stored in a variable so it can be called easily time and time again.

You could quite easily store all the names in an array.

There is always more than one way of doing the same thing!

:o)

Ant
0
 

Author Comment

by:weiyee08
ID: 6400623
a.marsh,


eval(tempArray[0] + " = \"" + tempArray[1] + "\"");

above statement will create a variable and store the value in it, right ?


avner,

what do you mean by Hash-Table ? How to do it ? Can you show me ?
Which one is the best ?
0
 
LVL 15

Expert Comment

by:a.marsh
ID: 6400629
Yes - the eval() function basically executes the string as code. So for example the first call of the loop actually does this:

eval("your_name = \"Ant\"");

assuming of course I entered the value Ant on the first page.

The eval function executes that code hence setting the variable "your_name" to the value "Ant".

:o)

Ant
0
 
LVL 15

Expert Comment

by:a.marsh
ID: 6400633
I'll let avner answer his part, I don't want to step on anyones' toes - although I think what he is suggesting is more commonly known as "associative arrays"

:o)

Ant
0
 

Author Comment

by:weiyee08
ID: 6400726
a.marsh,

I don't mind if you answer his idea as long as you are the one who answer first
0
 
LVL 15

Expert Comment

by:a.marsh
ID: 6400740
Okay, well I don't know if this is exactly what avner had in mind, but this is what I believe he is suggesting:


story.html
-----------------------------

<html>
<head>
<title>The Story</title>
<script language="javascript">

nameArray = new Array();

// Get names
var queryString = window.location.href.substring((window.location.href.indexOf('?') + 1));
var array1 = queryString.split('&'); // Each array element is in format "fieldname=value"
for(var i = 0; i < array1.length; i++){
var tempArray = array1[i].split('='); // Separate fieldname and value
eval("nameArray[\"" + tempArray[0] + "\"] = \"" + tempArray[1] + "\"");
}

</script>
</head>
<body>
<p>This is the story of
<script language="javascript"> document.write(nameArray["your_name"]);</script>'s amazing adventure with
<script language="javascript"> document.write(nameArray["friend1"]);</script> and
<script language="javascript"> document.write(nameArray["friend2"]);</script>.
</p>
<p>Now I'm not a very good storyteller, so I'm afraid that's all you're going to hear about
<script language="javascript"> document.write(nameArray["your_name"]);</script>,
<script language="javascript"> document.write(nameArray["friend1"]);</script> and
<script language="javascript"> document.write(nameArray["friend2"]);</script>'s adventure!
</p>
</form>
</body>
</html>


Ant
0
 

Author Comment

by:weiyee08
ID: 6400790
a.marsh

I think you are right. Thanks !
0
 
LVL 15

Expert Comment

by:a.marsh
ID: 6400795
Glad to help.

:o)

Ant
0

Featured Post

Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article shows how to create and access 2-dimensional arrays in JavaScript.  It includes a tutorial in case you are just trying to "get your head wrapped around" the concept and we'll also look at some useful tips for more advanced programmers. …
This article discusses the difference between strict equality operator and equality operator in JavaScript. The Need: Because JavaScript performs an implicit type conversion when performing comparisons, we have to take this into account when wri…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

839 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question