?
Solved

Sending GET variables in window.open()

Posted on 2006-05-28
12
Medium Priority
?
435 Views
Last Modified: 2008-03-03
I need to send the GET variable to a pop-up window. Grateful for your help in coding this simple thing :-)

I am building a site for a choir. I have a list of members names and clicking on the name of a member should open a popup that gives some details about that member, which will be drawn from a database. I have no problem with the database side of things, but the popup page does need to receive a variable in order to retrieve the right details. It's getting the variable part to the popup's URL that is giving me problems.

I suspect I will need to write a simple function with all the window parameters etc. and then call that function from the hyperlinks. It's pointless repeating all that stuff for each of 80 members.

The page URL to open will look something like:
       profile.php?member=fsmith
or    profile.php?member=dbush
or    profile.php?member=jdoe

and so on, according to which member's details are to be retireved.


How do I code the hyperlinks and function so that the member's name gets passed as a variable to the target page?

TIA
 
0
Comment
Question by:3bn
  • 6
  • 5
12 Comments
 
LVL 29

Accepted Solution

by:
Pravin Asar earned 600 total points
ID: 16779637
To Open a window

<html>

<head>
<title>
</title>
<script language="javascript">
function OpenNewWindow(fld, wn) {
   var width = 600;
   va height = 400;
   var lnk = 'profile.php?member='+fld.value;
   if (self.name != 'MyWindow') {
        var param = 'toolbar=no,location=no,directories=no,status=no,menubar=no,scrollbars=yes,resizable=yes,';
             param += 'width=' + width + ',height='+ height';
             nw = window.open (lnk, wn, "width=300, height=300, toolbar=no, status=no");
   }
   nw.focus();
   return false;
}
</script>
</head>

<body topmargin="0" style="margin: 0px">
<form name="form1">
<input type="text" name="member">
<input type="submit" value="Submit form to Popup Winodw" onclick="return OpenNewWindow(this.form.member, 'mywindow');">
<form>
</body>
</html>
0
 

Author Comment

by:3bn
ID: 16779717
Hi Pravinasar

This looks good. Can i just check...

"va height" should be "var height"

and there is one single quote too many at the end of            
                 param += 'width=' + width + ',height='+ height';     ?


I was rather hoping that to call up the script I could do a simple hyperlink.

Entering the name via a text box means that the visitor has to know the username of every member of the choir, which is not the case.
It's going to be a bit cumbersome to write 80 forms with submit buttons bearing hte name of the member.

Is there anyway that use a hyperlink?

Thanks

Brian
0
 
LVL 1

Expert Comment

by:chrismalone
ID: 16782953
what server-side language are you using?
if it was php you would use this with the above code instead of the form:
<a href="javascript: return OpenNewWindow(<?php echo $username  ?>, 'mywindow');">
0
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 

Author Comment

by:3bn
ID: 16783000
Hi Chris

Yes it's PHP, but only in the target page.

For now, we are going to manually list the names (this has already been done as an index of people in a group photograph). Each person's name will be hyperlinked and we will manually add their username to the link, so it would be:

<a href="javascript: return OpenNewWindow('jdoe', 'mywindow');">

ISTR that ".value" as in Pravinasar's script refers to the contents of a form field. As I am not using fields, will I have to make changes to the script?

Thanks

Brian
0
 
LVL 1

Expert Comment

by:chrismalone
ID: 16783039
as a matter of fact i dont see why you need static javascript if the values are in php..
you could just use: <a href="javascript:window.open("profile.php?member=<?php echo $username  ?>, 'mywindow');">
where $username is the variable of the username you use in the php script.
0
 
LVL 1

Expert Comment

by:chrismalone
ID: 16783058
actually i dont remember the way of doing new windows like that..
this would definitely work though if the previous one doesnt:
<a href="javascript:mywindow=window.open("profile.php?member=<?php echo $username  ?>);">
0
 

Author Comment

by:3bn
ID: 16783130
Hi Chris

Thanks for your further thoughts.

As I said the code in the href is just html. There are no variables on that page; it is not a php page. The page consists just of a group photograph and a list of names of people in the photograph.  Each individual link will be hard coded with the user name  (as a unique identifier) of the particular person in the photograph. It will be far too tortuous to write PHP that will find out the username so that we can put it into a PHP variable that will be converted back into text.  We would have type something into each link anyway to tell the PHP where to find the username for that particular person. That's PHP for PHP's sake!  No, its far, far easier simply to type the username in each link. As the eventual use for this is to query a database, I know I could (and probably should more properly) use the record index number rather than the username as the unique identifier, but we can easily work out what the username is and tell whether it is right just by looking at it.


As for why I put I the stuff in a script, there are about 70 people in that photograph. It is not good practice to write the whole routine out 70 times. Good practice says you should write the routine once, and pass variables to it. And as I said it is a static html page with no requirement for PHP variables, so there are no PHP variables to use.

Thanks
0
 
LVL 1

Expert Comment

by:chrismalone
ID: 16783319
this will work for just javascript using what you enter, and press a hyerlink. sorry if this isn't what you mean its hard to understand what you want for it.

<html>
<head>
<script language="javascript">
function OpenNewWindow(fld, wn) {
   var width = 600;
   var height = 400;
   var lnk = 'profile.php?member='+fld.value;
   if (self.name != 'MyWindow') {
        var param = 'toolbar=no,location=no,directories=no,status=no,menubar=no,scrollbars=yes,resizable=yes,';
             param += 'width=' + width + ',height='+ height;
             nw = window.open (lnk, wn, "width=300, height=300, toolbar=no, status=no");
   }
   nw.focus();
   return false;
}
</script>
</head>
<body topmargin="0" style="margin: 0px">
<form name="form1">
<input type="text" name="member">
<a href="javascript: OpenNewWindow(document.form1.member, 'mywindow');">Click Here</a>
</form>
</body>
</html>
0
 
LVL 1

Expert Comment

by:chrismalone
ID: 16783328
p.s. that has pravinasar's code fixed in that so it will work out-of-thebox.
0
 

Author Comment

by:3bn
ID: 16784854
Hi Chris

I appreciate your response. However I have to repeat I need a hyperlink to call the function, not a form.

In my posting of  05/29/2006 02:39AM PDT I explained that I have a photograph of a group of people with their names listed underneath. I am sorry; in my desire to be concise I failed to explain the situation completely. So here goes again, with my apologies for failing to be clsear last time :-) :

The people in the photograph are all choir members, lined up as a choir in their rows. Underneath the photograph are the names of the people in the photograph, thus:

=======================================================

 XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
 XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
 XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
 XXXXXXXXXX   (Photograph of choir members   XXXXXXXXXXXX
 XXXXXXXXXX                                                  XXXXXXXXXXXX
 XXXXXXXXXX               in their rows)                XXXXXXXXXXXX
 XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
 XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
 XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
 XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
 XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Back Row: John Doe, Fred Bush, Harry Smith, Wally Jones
Middle Row: Alan Hart, Paul Beatty, Oscar Winter, Terry Trump
Front Row: Bill Cardew, Nick Buxton, Warren Gibbons, Lawrence Waters

Please click on a member's name for more information

====================================================

Actually there are about 70 people in the real picture but you get the idea.

So when a visitor clicks on the name of a member there is to be a popup window. That window will include a close-up photograph of the member, their name, the part they sing and a few other things. It is calling this pop-up window that I am having difficulty with.

FYI: As the people in the picture are all members of the choir, their details are all in a database. So the pop-up page will query the database (that bit is working well). In order to know which member's details to get, the pop-up window will need to receive a variable that identifies the record. As usernames are unique I decided to use the database username to identify the member. Then when the popup window receives that username, it can retrieve the right data from the database.

I thought it might be something simple like (taking my sample back row):

   <a href="javascript:OpenNewWindow(jdoe)">John Doe</a>
   <a href="javascript:OpenNewWindow(fbush)">Fred Bush</a>
   <a href="javascript:OpenNewWindow(hsmith)"> Harry Smith</a>
   <a href="javascript:OpenNewWindow(wjones)">Wally Jones</a>

which, using the function, will pass the following location URLs to the window.open() command:
      profile.php?member=jdoe
      profile.php?member=fbush
      profile.php?member=hsmith
      profile.php?member=wjones
respectively

Obviously it is not that simple, but I am wrong in thinking it can be done?

Clearly with 70 names, I need to keep the individual href code statements to a minimum, which is why I think it is best that the window.open() stuff appears once inside a function.  Incidentally, does the function need to be so complicated? I only need to send 1 variable to it.  :-)  Also is it necessary to declare variables for height and width (ISTR when I have done this before I put these in the parameters section directly)?


I hope I have clarified the requirement better this time :-)

TIA

Brian
0
 
LVL 1

Assisted Solution

by:chrismalone
chrismalone earned 1000 total points
ID: 16786797
3bn, did u even read my script? it is called by a hyperlink and you type in the name in the form.
.. <a href="javascript: OpenNewWindow(document.form1.member, 'mywindow');">Click Here</a>
copy the whole script and you can put an image or something instead of "click here".

or if you just want to make the names in the hyperlinks yourself use this:

<html>
<head>
<script language="javascript">
function OpenNewWindow(fld, wn) {
   var width = 600;
   var height = 400;
   var lnk = 'profile.php?member='+fld;
   if (self.name != 'MyWindow') {
        var param = 'toolbar=no,location=no,directories=no,status=no,menubar=no,scrollbars=yes,resizable=yes,';
             param += 'width=' + width + ',height='+ height;
             nw = window.open (lnk, wn, "width=300, height=300, toolbar=no, status=no");
   }
   nw.focus();
   return false;
}
</script>
</head>
<body topmargin="0" style="margin: 0px">
<a href="javascript: OpenNewWindow('bobby', 'mywindow');">Click Here</a><br>
<a href="javascript: OpenNewWindow('fred', 'mywindow');">Click Here</a>
</body>
</html>
0
 

Author Comment

by:3bn
ID: 16788129
Yes mate, of course I read your code :-) I also executed it. Unfortunately there was an <input> tag and that's what confused me.

Thanks for putting the stuff into one line. It makes sense now (my level of Javascript skill means I didn't have confidence to try that myself). I have just made one little tweak - I put 'void' in the statement to prevent a blank page opening and it all works hunky dory.

I've increased the point value as I think both you and pravinasar deserve to be recognised.

Thanks for your help
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

Introduction HTML checkboxes provide the perfect way for a web developer to receive client input when the client's options might be none, one or many.  But the PHP code for processing the checkboxes can be confusing at first.  What if a checkbox is…
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…
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

809 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