Solved

Get QueryString

Posted on 2001-08-17
23
7,633 Views
Last Modified: 2011-08-18
How do I use JavaScript to get QueryString ?
0
Comment
Question by:weiyee08
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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
PeopleSoft Has Never Been Easier

PeopleSoft Adoption Made Smooth & Simple!

On-The-Job Training Is made Intuitive & Easy With WalkMe's On-Screen Guidance Tool.  Claim Your Free WalkMe Account Now

 
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

Online Training Solution

Drastically shorten your training time with WalkMe's advanced online training solution that Guides your trainees to action. Forget about retraining and skyrocket knowledge retention rates.

Question has a verified solution.

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

Having worked on larger scale sites, we found out that you are bound to look at more scalable solutions to integrating widgets, code snippets or complete applications and mesh them into functional sites, in any given composition. To share some of…
Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
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…
Suggested Courses

623 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