HTML Goodies: Script Tip: Week 24

Joe Burns

Thy Name is Tip...

Okay, we understand the top, the prompts, and we understand the bottom, the HTML form flags. Now let's hit the guts of this script. The function.

See the Guestbook in Action

Here's the Code for the Guestbook

The function looks like this:

function verify()
{
var OpenWindow=window.open("", "newwin", "height=300,width=300");
OpenWindow.document.write("<HTML>")
OpenWindow.document.write("<TITLE>Thanks for Writing</TITLE>")
OpenWindow.document.write("<BODY BGCOLOR='ffffcc'>")
OpenWindow.document.write("<CENTER>")
OpenWindow.document.write("Thank you <B>" + name + "</B> from <B>" +email+ "</B><P>")
OpenWindow.document.write("Your message <P><I>" + document.gbookForm.maintext.value + "</I><P>")
OpenWindow.document.write("from " + name + " / " +email+ "<P>")
OpenWindow.document.write("will be sent along when you close this window.<P>")
OpenWindow.document.write("<CENTER>")
OpenWindow.document.write("<FORM><INPUT TYPE='button' VALUE='Close Window' onClick='self.close()'></FORM>")
OpenWindow.document.write("</CENTER>")
OpenWindow.document.write("</HTML>")
}
</SCRIPT>

If you're an avid reader of HTML Goodies, then you probably recognize the format. The function, named verify(), is surrounding JavaScript that will open a new window and fill it with text. I have an entire tutorial on just that right here.

The function is called for when you click on the HTML form button. Remember that onClick="verify()"?

Once clicked, the variable "OpenWindow" is assigned the properties of the new window. Then, one after the other, lines of HTML are filled in. But to get the effect that the HTML page that is being filled in was created from the e-mail, we start to use the text strings that we gathered from the two prompts, namely "name" and "e-mail." Look at this line:

OpenWindow.document.write("Thank you <B>" + name + "</B> from <B>" +email+ "</B><P>")

See how the text strings are being placed to give the effect that the window was opened just for the user? Then this line of code:

OpenWindow.document.write("Your message <P><I>" + document.gbookForm.maintext.value + "</I><P>")

...grabs the text the user wrote into the TEXTAREA box and displays it. And it is the display, I think, that makes this little window come alive. See how the first time the name and e-mail are displayed they're in bold and the text from the TEXTAREA box is italic? I think that really looks great. It gives the impression that the little window is a form created off of the e-mail itself rather than a simple representation of the information given to the computer.

Then this line of code:

OpenWindow.document.write("<FORM><INPUT TYPE='button' VALUE='Close Window' onClick='self.close()'></FORM>")

...creates a great button that closes the window. The "self.close" object.method statement does the trick. Great effect.

Finally, the ending HTML commands are written to the page and the function is closed.

And another script comes to an end. Feel free to use the script just as it is or add or take away as you see fit. Some people like the prompts, some don't. It's up to you. I happen to like them.

Since we're done with this one, let's get back to the that running digital clock. I fixed it!

Next Week: The Digital Clock Revisited

Do YOU have a Script Tip you'd like to share? How about suggesting a Script Tip to write about? I'd love to hear it. Write me at: jburns@htmlgoodies.com.

Learn to write your own JavaScripts with the
HTML Goodies 30-Step Primer Series
and take the knowledge home with you in
JavaScript Goodies!

You can find many other uses for JavaScript
on your Web pages here!