Click here to Skip to main content
Click here to Skip to main content

Using popup windows to send server information back to the client

, 2 Jul 2002
Rate this:
Please Sign up or sign in to vote.
A Frill-free way to submit Forms and Parent-Child window communication
<!-- Download Links --> <!-- Add the rest of your HTML here -->

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.

License

This article has no explicit license attached to it but may contain usage terms in the article text or the download files themselves. If in doubt please contact the author via the discussion board below.

A list of licenses authors might use can be found here

Share

About the Author

'Anil' Radhakrishna
Web Developer
India India
'Anil' Radhakrishna is a seasoned developer who enjoys working with Microsoft tools & technologies. He blogs quite regularly about his little discoveries and technical experiments on his blog called Tech Tips, Tricks & Trivia. You can find some of his unusual code samples & snippets at his Code Gallery. He loves building mash-ups using public Web APIs.
Follow on   Twitter   LinkedIn

Comments and Discussions

 
Generalmulticast ftp code in java Pinmemberab3li22-Jun-05 1:19 
Generalposting more than one value Pinmemberlgm3K9-Mar-05 10:43 
QuestionGrabbing values with VBScript? Pinmembera_soong21-Nov-03 13:17 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Terms of Use | Mobile
Web01 | 2.8.141220.1 | Last Updated 3 Jul 2002
Article Copyright 2002 by 'Anil' Radhakrishna
Everything else Copyright © CodeProject, 1999-2014
Layout: fixed | fluid