HTML Goodies: Script Tip: Week 23

By Joe Burns

WEBINAR: On-demand webcast

How to Boost Database Development Productivity on Linux, Docker, and Kubernetes with Microsoft SQL Server 2017 REGISTER >

Sir Tip...

Now that we're up to speed with the prompts at the top of the script, let's go in the complete opposite direction and look at the HTML form elements at the very bottom of the script.

But first, you might need to take another look at the script itself.

See the Guestbook in Action

Here's the Code for the Guestbook

Here's the part I'm interested in for this Script Tip:

<FORM NAME='gbookForm'>
<TEXTAREA COLS="40" ROWS="20" NAME="maintext">
<INPUT TYPE="submit" VALUE="Send It" onClick="verify()">

I'm not trying to throw you here. I have taken out some of the coding that was in there. As you can see, all the METHOD= and ACTION= and ENCTYPE= code is out. I am interested in showing you simply the HTML form elements. And in this script those elements include:

  • The main FORM command
  • The TEXTAREA box
  • The Submit button

JavaScript is a very linear language. It has a hierarchy of objects that must be followed. For instance, the window object is bigger than the status bar property. That's why the format reads "window.status" rather than status.window. In the hierarchy of JavaScript, any hierarchy statement goes from biggest to smallest, moving left to right.

Terms, terms, terms...

Let's get one thing straight before moving on: I have a tendency to use language that makes things understandable to me. In this case, I use the term "hierarchy statement" to represent the something.something.something lines of code in JavaScript. The technical term for that hierarchy is "DOM" or Document Object Model. I think you'll agree with me that the term is lacking in description, but it's technically correct. I use "hierarchy statement" because it helps me to understand what I'm doing! Hopefully it will help you to understand, too. Afterall, that's the point of all of this.

Okay, back to the HTML form elements. Let's deal with just the top two at the moment: The main FORM command and the TEXTAREA box.

Notice that the name of the FORM itself is "gbookForm." See that above? It's denoted by writing NAME="gbookForm." That seems pretty easy to grasp.

The TEXTAREA box is then named "maintext" through the same NAME= format as above.

Now we can start to build a hierarchy statement that will point the JavaScript toward that specific TEXTAREA box. It goes this way:

  • The entire form is sitting in the HTML document, so we start with "document."
  • The name of the FORM is "gbookForm." That's next.
  • The name of the TEXTAREA box is "maintext."
  • Each item is separated by a dot to show relationship.

But we're not done yet. If we simply go with document.gbookForm.maintext, we will not get what is written within the box. We'll get information about the box itself, because the box is as far down the line as the hierarchy statement goes. We need to take one more step:

value represents what is written in the box

To actually get what's in the box, add "value" to the end of the hierarchy statement. Now we're complete:


That format allows the JavaScript to recognize the form elements and grab the text contained within the TEXTAREA box. We're going to need that later.

The form elements finish off with a basic Submit button that acts to send the mail from the script, as any other simple mailto: guestbook would. In addition, there is this onClick command:


That onClick Event Handler will trigger the JavaScript's main function to start working. So, there are actually two things the button must do: send the mail and trigger the function.

...and you thought you were busy.

Next Week: The Function

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!

Make a Comment

Loading Comments...

  • Web Development Newsletter Signup

    Invalid email
    You have successfuly registered to our newsletter.
Thanks for your registration, follow us on our social networks to keep up-to-date