|
It is possible to save or process data from a Web page form without refreshing the window by opening a new window and having
the Web server request process the form information and send the resulting output to the new browser window. The server receives the request to send
the resulting output to the new window (specified in the form target directive of the parent calling window), as opposed to
the current calling browser window. The purpose is not to replace the current window's Web page. This method is an alternative to AJAX technology, whereby
the client-side javascript can communicate with the server to send requests/data to server programs and not have to initiate a change of
Web page location (window reload). The method of posting form data to another window for processing is a simple
means of avoiding refreshing the contents of the parent window. The new window is then closed upon completion so that the end-user
does not notice a page reload interruption except for the opening and closing of a tiny browser window. The duration of
the temporary window's existence will cease when the server has completed processing the called PHP/ASP script or CGI executable
(specified in the form action directive). That includes the time it takes for the output to be sent from the server to the new client
browser window (as a Web page according to the header sent from the server).
This article is similar to the article: Force a New Browser Window Close, and provides a more thorough explanation
of the code itself. However the difference is that the method specified here is geared more towards DHTML components
or widgets that must assign data to a static HTML form before the form is submitted with the widget's data. This is necessary
when javascript is used to output HTML on the client-side (document.write, document.innerHTML). A form cannot be generated in this way and
cannot be nested within another form, since some browsers do not handle these scenarios. Cross browser compatibility requires assigning a widget's
input control value to a static HTML form's input control and then submitting that form data to a new window that autmoatically
closes such as when saving the contents of the DHTML widget without reloading the Web page. This input control value transfer
to another form's input control is another way to filter specifically what information from a large form should be sent to
the called script file. Eg. If a form contains 400 input controls whereby only some are filled in depending on what layer
contains relevant information then only that information (say 20 of 400 inputs) should be sent to the form action script for processing.
Using the form input value transfer method can achieve this result. The code snippets below will do just that.
|
<html>
<head>
<script type="text/javascript">
function opnWindow (sURL)
{
var sAttribs = "toolbar=no,location=no,directories=no,status=no," +
"menubar=no,scrollbars=yes,resizable=no,width=150,height=150,left=0,top=0";
var w = window.open (sURL, "wnd", sAttribs);
if (w)
return false;
return true;
}
</script>
</head>
<body>
<!-- this is the application's main form encompassing the DHTML widget -->
<form id = "form_outer" name = "form_outer" method = "post" action = "newwin.php">
<input id = "inp1" name = "inp1" type = "text" value = "Input 1 of 500">
<!-- the following could be written to a layer element as part of a DHTML widget for eg. -->
<!-- DHTML SECTION START -->
<textarea id = "postvars" name = "postvars" cols = "10" rows = "5">DHTML DATA</textarea>
<input type = "button" value = "Save Data" onClick = "javascript:
document.form_scratch.xfer.value = (document.form_outer.postvars ?
document.form_outer.postvars.value : document.getElementById('postvars').value);
opnWindow(''); document.form_scratch.action = 'newwin.php?getvars=GOTDATA';
document.form_scratch.target = 'wnd'; document.form_scratch.submit(); return true;">
<!-- DHTML SECTION END -->
</form>
<!-- temporary DHTML widget data placeholder to be sent to a file for processing -->
<form id = "form_scratch" name = "form_scratch" method = "post">
<input id = "xfer" name = "xfer" type = "hidden" value = "">
</form>
</body>
</html>
Code View - dynamicreport.com
|
The following snippet is contained within the called script file (form action), and in this case PHP is used. This script will be processed
by the server after the form is submitted by the parent window, and the form parameter will be saved to a database. The script output is then
sent to the new client browser window, which will close once the output is interpreted as HTML, and the javascript portion to close the
window is reached.
|
<html>
<body>
<?
// the window closes immediately after the output, but reveals
// that data was sent over and can be processed in a new window
// (window to window communication via forms and URL params.)
echo "<p>FORM POST DATA: $_POST[xfer]<br>".
"FORM GET DATA: $_GET[getvars]</p>";
// process the form information: write to database, etc. here
?>
<a href = "javascript:window.close();">Close Window</a>
<?
// window is closed after the page is output
echo '<script type="text/javascript">window.close();</script>';
?>
</body>
</html>
Code View - dynamicreport.com
|
Click here for demo: click window close.
|
dynamicreport.com
