Passing hidden form values from a web page to a popup window

JavaScript
1

Hello. I am trying to pass hidden form values from a web page to a popup window. From the research I’ve done in this forum’s archives and the web in general, it looks like I’ll have to use window.opener, but I’m having trouble figuring out the proper syntax.

Here is the Javascript that opens the popup window:

<script language="JavaScript">
 <!--
 function showpopup() {
 var popwin = window.open("passVariables-popup.html", "",
 "width=400,height=300,resizable,status,menubar,scrollbars");
 popwin.focus();
 }

 //-->
 </script>

Here is the code from the form on my web page:

<form name="myForm">
<input type="hidden" name="headline" value="Awards and Honors">
<input type="hidden" name="pubDate" value="February 21, 2005">

<input onClick="javascript:showpopup()" type="submit" name="submit" value="send e-mail">
</form>

Ideally, I would like to pass the values for headline and pubDate into hidden form fields in my popup window. How would I use window.opener to accomplish this? Would window.opener need to be combined with document.write to produce the necessary HTML for the popup window?

Any help would be greatly appreciated.

2

Here’s an example:
Main window:


<html>
<head>
<script language="JavaScript">
function showpopup() {
	
	var sURL = "the_popup.html?";
	var oEls = document.forms["myform"].elements
	
	
	for( var i=0; i < oEls.length; i++ ) {
		if( oEls[i].type == "hidden" ) {
			sURL += escape(oEls[i].name) + "=" + escape(oEls[i].value) + "&";
		}
	}

	sURL = sURL.substring(0, sURL.length - 1);
	
	var popwin = window.open(sURL, "", "width=400,height=300,resizable,status,menubar,scrollbars");
	
	popwin.focus();
}
</script>
</head>
<body>
<form name="myform" onsubmit="javascript:showpopup();">
<input type="hidden" name="headline" value="Awards and Honors">
<input type="hidden" name="pubDate" value="February 21, 2005">
<input type="submit" name="submit" value="send e-mail">
</form>
</body>
</html>

Popup (the_popup.html)


<html>
<head>
<script language="JavaScript">
function AddElements() {
	var sItems = location.search.substring(1,location.search.length);
	var aItems = sItems.split("&");
	
	var theForm = document.forms["myform"];
	
	for( var i=0; i < aItems.length; i++) {
		var oEl = theForm.appendChild(document.createElement("<input type='hidden'>"));
		//oEl.setAttribute("type","hidden");
		var aParts = aItems[i].split("=");
		oEl.setAttribute("name",unescape(aParts[0]));
		oEl.setAttribute("value",unescape(aParts[1]));
	}
}
function ShowElements() {
	var sEls = "";
	var oEls = document.forms["myform"].elements;
	for( var i=0; i < oEls.length; i++ ) {
		sEls += oEls[i].name + "=" + oEls[i].value + "\
";
	}	
	alert(sEls);
}
</script>
</head>
<body onload="AddElements();">
<form name="myform">
<input type="button" name="thebutton" value="Show Elements" onclick="ShowElements();">
</form>
</body>
</html>
3

Jim:

Thanks for your response. Is your method passing the values by using the URL?

After more experimentation, I was able to figure out how to pass values using window.opener.

Here’s the form I used:

<form name=“form” method=“post” action=“testWritingContent-popup.html” onSubmit=“showPopup(); return false”>

<input type=“hidden” name=“headline” value=“Awards and Honors”>
<input type=“hidden” name=“pubDate” value=“February 21, 2005”>

<input type=“button” onClick=“showPopup()” value=“submit”>
</form>

Here’s the code in the popup window:

<script language=“JavaScript” type=“text/javascript”>

var headline = window.opener.document.form.headline.value;
var pubDate = window.opener.document.form.pubDate.value;

var showHeadline = "The headline is: " + headline + “<br><br>”;
var showPubDate = "The pubDate is: " + pubDate + “<br><br>”;

document.write(showHeadline);
document.write(showPubDate);

</script>

As usual, there are plenty of ways to solve a problem, it’s just that sometimes, it takes a while to stumble upon a solution.

4

Hi,

Yes my way was via URL, it’s also pretty generic so any page can use the same popup code.

Your way is nice and simple and works =)

Jim

5