Using popup windows to send server information back to the client

• Download source files - 1 Kb

Introduction

Very often we come across sites that carry Feedback Forms, Reader Rating Forms or Newsletter Submission Forms. Once the user submits the Form, he is either led to a different page or the current page is refreshed. This maybe distracting sometimes.
Surfers typically have a short attention span and if you were looking for a frill-free way to submit the form so that user's attention is not diverted by the page reload ,from the other goodies on the site, then read on......

InformIT.com handles this issue neatly with its Book marking feature. Besides other things, InformIT.com has a Free Library and lots of informative articles for subscribers (its free and btw I don't work for them). There is a 'Save' link at the top of each article which bookmarks that particular page on the site for future reference. The 'Save' link when clicked, opens up a nice little child window indicating that info has been saved. Presumably this child window page is an ASP script that saves the link info to the Personalized settings database.

The source code presented here shows a simple example of how to submit a Form , that maybe contained in a typical database Editing page, so that the Action page of the Form opens in a new Child window and more importantly updates the edited values in the Parent window FROM THE CHILD WINDOW. The idea can be extended to update the database after Form submission without actually disturbing the page that contains the Form.

Source Code

The zipped file contains a HTML file, dad.html and an ASP script, kid.asp. You will need IIS or PWS on your workstation to call the HTML page using HTTP. When you type a number in the Form in dad.html and submit, a child window pops up which shows the number you typed and does a bit of voodoo and changes it to 13. Using the Form on kid.asp you can again change the number on the parent page, dad.html.

To submit the Form so that the Form Action page opens in a new window, this is what you have to do.......

<FORM name="f1" action="kid.asp" method=POST target='kid' onSubmit='pop()'>

Set the TARGET attribute to 'kid'. TARGET represents the name of the window or frame that is to receive content returned by the server after the form is submitted. 

The Javascript function pop opens up a Child window with the help of the  method window.open

function pop()
{
var newWin;
newWin =window.open("kid.asp","kid",'resizable=no,scrollbars=no,width=550,height=148,toolbar=no')
}

The window.open method requires 3 parameters.

window.open(URL, windowName,windowFeatures)

The following window Features can be optionally chosen and each has to separated by a comma :

toolbar[=yes|no]|[=1|0] 
location[=yes|no]|[=1|0]
directories[=yes|no]|[=1|0]
status[=yes|no]|[=1|0]
menubar[=yes|no]|[=1|0]
scrollbars[=yes|no]|[=1|0]
resizable[=yes|no]|[=1|0]
width=pixels
height=pixels

Moving onto kid.asp, the number you typed is displayed with a Response.Write, after the Form value is fetched using the Request.Form method.

Request.Form("t1")

Let me reveal the black magic that changes the number you typed to 13. The function change that is called in the BODY onLoad event of kid.asp accomplishes that. Of course, if you chose to type 13 you won't notice any change!

function change()
{
window.opener.document.f1.t1.value=13;
}

If you wish to change the number in the Textbox in the Parent window, the tellDad() function in the onClick event of the button will do it for you

function tellDad()
{
window.opener.document.f1.t1.value=document.f2.t2.value;
}

Feedback

Go ahead, run the code and then rate it. I'll appreciate any kind of feedback on this article.