Passing form variables directly to a popup window

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
User avatar
Crashin
Forum Contributor
Posts: 223
Joined: Mon May 06, 2002 3:42 pm
Location: Colorado

Passing form variables directly to a popup window

Post by Crashin »

I'm looking for a quick and dirty way to pass a form's variables to a popup window when the form's button is clicked. I'm creating a report based on filters that the end user chooses, and the report will be displayed in the popup window.

I already know how to create the window with JS. I'm stuck on how to handle the "action=" event in the form. The code follows:

Code: Select all

<SCRIPT LANGUAGE="JavaScript">
     <!-- Begin
     function openkeywin(theURL,winName,features) &#123; 
          window.open(theURL,winName,features);
     &#125;
     //-->
</script>

//...other PHP formatting code up to here

echo "<form name='report_form' method='POST' action='issue_summary_disp.php'>";

//...remaining form stuff

echo "<font size='1' class='small'><input type='submit' name='Submit' value='Submit'>";
echo "</form>";
issue_summary_disp.php is the page that will be displayed in the popup window. Any ideas?
User avatar
mydimension
Moderator
Posts: 531
Joined: Tue Apr 23, 2002 6:00 pm
Location: Lowell, MA USA
Contact:

Post by mydimension »

i think i saw this somewhere once: put a target attrib. in the form tag. whilist not at all (X)HTML valid, it is worth a shot.
jason
Site Admin
Posts: 1767
Joined: Thu Apr 18, 2002 3:14 pm
Location: Montreal, CA
Contact:

Post by jason »

I did this once:

Code: Select all

<script language=JavaScript>

function signup_checkusername()&#123;

var gt = unescape('%3e');
var popup = null;
var over = 'Launch Pop-up Navigator';
var username = document.signupform.TextI_UserName.value;
if ( username == "" ) return false;
gourl = 'check_username.php?username=' + username;
  popup = window.open('', 'popupcheck', 'width=200,height=100,resizable=0,scrollbars=0,statusbar=0,menubar=0');
  if (popup != null) &#123;
    if (popup.opener == null) &#123;popup.opener = self;&#125;
    popup.location.href = gourl;
 &#125; &#125;
</script>
And then:

Code: Select all

<a href=javascript:void(0) onClick="signup_checkusername();">
        <img src="images/check_button.gif" alt="Click here to check username availability" border="0" />
        </a>
That is what I did. You can find it on this page: http://www.originalpoker.com/cust_signup.php

It simply checks the username to make sure it's not already taken, but it is basiclaly what you want, I guess.
User avatar
Crashin
Forum Contributor
Posts: 223
Joined: Mon May 06, 2002 3:42 pm
Location: Colorado

Post by Crashin »

Hey Jason...so, you basically had to set the variables that would be passed to the new window within the JS function and then pass them to the new window? And, use a link instead of a submit button?
User avatar
Crashin
Forum Contributor
Posts: 223
Joined: Mon May 06, 2002 3:42 pm
Location: Colorado

Post by Crashin »

I've tried the above method, with a few modifications, but the variables still don't seem to be getting passed to the popup window. The JS follows:

Code: Select all

<SCRIPT LANGUAGE="JavaScript">
	<!-- Begin
		function report_popup() &#123;
			var popup = null;
			var cat_id = document.report_form.cat_id.value;
			var resolution = document.report_form.resolution.value;
			gourl = 'issue_summary_disp.php?cat_id = ' + cat_id + '&resolution = ' + resolution; 
			popup = window.open('', 'reportdisp', 'width=680, height=800, toolbar=0, status=0, menubar=0, location=0, scrollbars=1, resizable=0, directories=0'); 
			if (popup != null) &#123; 
				if (popup.opener == null) &#123;
					popup.opener = self;
				&#125; 
				popup.location.href = gourl; 
			&#125;
		&#125;
	//-->
</script>
My form looks like:

Code: Select all

//input form for the search
echo "<table width='350' border='0' cellspacing='0' cellpadding='0'>";
	echo "<form name='report_form' method='POST' onsubmit='return report_popup();'>";
		echo "<input type='hidden' name='go' value='1'>";
	echo "<tr bordercolor='#ffffff'>";
		echo "<td><font class='small'>&nbsp;Filter By Application: </font></td>";
		echo "<td><font class='small'>&nbsp;Filter By Category: </font></td>";
	echo "</tr>";
	echo "<tr>";
		
		//generate applications drop down
		$query_apps = "SELECT * FROM application ORDER BY app_name";
		$result_apps = mysql_query($query_apps);
		if(!$result_apps) &#123;
			echo "<td>Could not get applications!</td>";
			exit;
		&#125;
		if(mysql_num_rows($result_apps) == 0) &#123;
			echo "<td valign='top' bordercolor='#ffffff'><font class='small'>No applications setup - go to the <a href='app_entry.php'>Applications</a> page to setup.</font></td>";
			exit;
		&#125;
		else &#123;
			echo "<td valign='top' bordercolor='#ffffff'>";
				echo "<select name='app_id&#1111;]' size='5' multiple>";
				while($row = mysql_fetch_array($result_apps)) &#123;
					echo "<option value='".$row&#1111;0]."' selected>".$row&#1111;1]."</option>";
				&#125;
				echo "</select>";
			echo "</td>";
		&#125;
		
		//generate category drop down
		$query_cats = "SELECT * FROM categories ORDER BY cat_name";
		$result_cats = mysql_query($query_cats) or die("Could not get categories - please try again later.");
		
		if(mysql_num_rows($result_cats) == 0) &#123;
			echo "<td valign='top' bordercolor='#ffffff' width='35%'><font class='small'>No categories setup.</font></td>";
			exit;
		&#125;
		else &#123;
			echo "<td valign='top' bordercolor='#ffffff'><font class='small'>";
				echo "<select name='cat_id' size='1'>";
				while($row = mysql_fetch_array($result_cats)) &#123;
					echo "<option value='".$row&#1111;0]."'>".$row&#1111;1]."</option>";
				&#125;
					echo "<option value='all_cats' selected>All Categories</option>";
				echo "</select>";
			echo "</font></td>";
		&#125;
		
	echo "</tr>";
	echo "<tr>";
		echo "<td>&nbsp;</td>";
	echo "</tr>";
	echo "<tr>";
		echo "<td colspan='2'><font class='small'><input type='checkbox' name='resolution' value='T'>Include Resolution</font></td>";
	echo "</tr>";
	echo "<tr>";
		echo "<td>&nbsp;</td>";
	echo "</tr>";
	echo "<tr>";
		echo "<td>&#1111; <a href="javascript:;" onclick="report_popup();">Show Report</a> ]</td>";
	echo "</tr>";
	echo "<tr bordercolor='#ffffff'>";
		echo "<td bordercolor='#ffffff' colspan='2'>";
			echo "<font size='1' class='small'><input type='submit' name='Submit' value='Submit'>";
			echo "</form>";
		echo "</td>";
	echo "</tr>";
echo "</table>";
The popup window is being launched successfully, but the variables don't seem to be getting passed along. Any ideas?
User avatar
mikeq
Forum Regular
Posts: 512
Joined: Fri May 03, 2002 3:33 am
Location: Edinburgh, Scotland

Post by mikeq »

Which browser? there is a difference in the way you reference fields between Netscape and IE within javascript.

Try putting an alert in your javascript function to display the variables you have set.
User avatar
Crashin
Forum Contributor
Posts: 223
Joined: Mon May 06, 2002 3:42 pm
Location: Colorado

Post by Crashin »

I'm primarily using the latest version of IE, although I will have users on both Mac and Windows platforms using the latest versions of IE and NS.
User avatar
Crashin
Forum Contributor
Posts: 223
Joined: Mon May 06, 2002 3:42 pm
Location: Colorado

Post by Crashin »

I'm posting a reply to bump this topic back up...I'm still struggling with this. Can anyone give me a hand?

My sticking point is that I have a multiple select box in the form, in addition to other standard elements, so an array is also being passed. I can't seem to set the variables correctly so that they get passed to the popup window.
User avatar
Crashin
Forum Contributor
Posts: 223
Joined: Mon May 06, 2002 3:42 pm
Location: Colorado

Post by Crashin »

Stop the press! I finally got it...thought I'd post it here so other folks might benefit in the future. It's very simple, really...just setup the <form> tag like so:

Code: Select all

echo "<form name='report_form' method='POST' action='page_to_display_in_popup.php' target='myWin' onsubmit='javascript:myWin = window.open("", this.target, "width=680, height=800, toolbar=0, status=0, menubar=0, location=0, scrollbars=1, resizable=0, directories=0")'>";
Of course, you can specify whatever window features you want (i.e. width=, height=, toolbar=, etc.).

Best,

Crashin
Post Reply