New window

vlad11 · #1 (**permalink**) 11-03-2009, 01:01 PM

Can anyone tell me how to dispaly the results of a form(a .php file) in a "pop up" type window (just a window, not buttons or anything).
It's like <form method="post" action="script.php">....</form>
Thx.

sequencehosting · #2 (**permalink**) 11-03-2009, 05:03 PM

Quote:

Originally Posted by vlad11

Can anyone tell me how to dispaly the results of a form(a .php file) in a "pop up" type window (just a window, not buttons or anything).
It's like <form method="post" action="script.php">....</form>
Thx.

That's a good question, im not too sure about this. I know how to do it with a normal text link but not a web form. Maybe someone on here will know.

meloncholy · #3 (**permalink**) 11-04-2009, 12:42 PM

This is quite an interesting question - hadn't thought about it before. So thanks.

We can use the form's onsubmit event to trap the submit action and launch a popup through window.open, but unfortunately the form's contents aren't set in $_POST (or whatever) for the popup even if we let the form submit. (The original window gets values from $_POST, the popup doesn't.)

We can use the JavaScript form.submit function to get round this, but first we need to make sure the form's results appear in the popup by setting the form's target.

This approach also ensures that, without JavaScript, the form will submit normally to the same window.

So the steps are:

- Create a blank popup window.
- Set the form target to the popup.
- Submit the form.
- Return false to stop the original page submitting too.

HTML Code:

<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>Untitled Page</title>
    <script type="text/javascript">
		function popupSubmit()
		{
			var popupForm;

			popupForm = document.getElementById("popupForm");
			window.open("", "popupSubmit", "width=500, height=500");
			popupForm.target = "popupSubmit";
			popupForm.submit();
			return false;
		}
    </script>
</head>
<body>
<form id="popupForm" method="post" action="tstsubmit.php" onsubmit="popupSubmit();">
	<input type="text" name="name" />
	<input type="submit" value="Submit" />
</form>
</body>
</html>

vlad11 · #4 (**permalink**) 11-04-2009, 12:56 PM

Thanks man!

designerpk.com · #5 (**permalink**) 11-13-2009, 04:33 PM

thanks this is helpful

meloncholy · #6 (**permalink**) 11-14-2009, 08:36 AM

Thanks for the comments, guys.

It occurred to me afterwards that I could have simplified the code a little. It's not necessary to submit the form with JS and then cancel the original submit; just changing the target is sufficient. (This isn't a major change, but it makes me happy.

)

HTML Code:

<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>Untitled Page</title>
    <script type="text/javascript">
		function popupSubmit()
		{
			var popupForm;

			popupForm = document.getElementById("popupForm");
			window.open("", "popupSubmit", "width=500, height=500");
			popupForm.target = "popupSubmit";
		}
    </script>
</head>
<body>
<form id="popupForm" method="post" action="tstsubmit.php" onsubmit="popupSubmit();">
	<input type="text" name="name" />
	<input type="submit" value="Submit" />
</form>
</body>
</html>

WB Sponsors