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.
