JavaScript Primers #19

By Joe Burns

Use these to jump around or read it all


The Concept
The Script
The Script's Effect
Deconstructing the Script
What You've Learned
Your Assignment


The Concept

The purpose of this example is to go a little deeper into forms and JavaScript. This is where it becomes really important to understand the hierarchy of objects and how functions work.

JavaScript and forms are usually used to check data entry (we will have a tutorial on this subject later). These next two tutorials are to help get you ready to do data entry checking later.


The Script

We'll offer the entire HTML document format again to show placement.

<HTML>
<HEAD>
<SCRIPT type="text/javascript">
function doit()
{

  alert("document.myform.fname.value is  " 
+ document.myform.fname.value)

  var greeting="hello "

  alert(greeting + document.myform.fname.value 
+ " " + document.myform.lname.value)

  alert("length of first name " 
+ document.myform.fname.value.length)

}
</SCRIPT>
</HEAD>
<BODY>
<FORM NAME="myform" action="">
  What is your First Name? 
   <INPUT TYPE="text" NAME="fname"><p>
  What is your Last Name? 
   <INPUT TYPE="text" NAME="lname"><p>
   <INPUT TYPE="button" 
     VALUE="Submit" 
	 onClick="doit()">
</FORM>
</BODY>
</HTML>

The Script's Effect

What is your First Name?

What is your Last Name?


Deconstructing the Script

We'll start with the JavaScript and its function:

  • Let's start with the HTML form items:
    <FORM NAME="myform" action="">
      What is your First Name? 
        <INPUT TYPE="text" NAME="fname"><p>
      What is your Last Name? 
        <INPUT TYPE="text" NAME="lname"><p>
      <INPUT TYPE="button" 
        VALUE="Submit" 
    	onClick="doit()">
      </FORM>
    
  • Notice we have given the form the name "myform." The text box for the user's first name is named "fname" and the text box for the user's last name is named "lname." Now everything has been given a name.
  • What the user enters into the text boxes will be the value of the box and will take on the name given to the box. Get it? What is written in the fname box will take on the name "fname."
  • When the user clicks the button (the onClick event) the JavaScript function doit() is run.
  • Let's look at the function now:

function doit()
{

  alert("document.myform.fname.value is  " 
+ document.myform.fname.value)

  var greeting="hello "

  alert(greeting + document.myform.fname.value + " " 
+ document.myform.lname.value)

  alert("length of first name " 
+ document.myform.fname.value.length)

}
  • No parameters are passed as was done in the two previous primers. We know this because there is nothing in the parentheses () of doit(). But if you look at the hierarchy statements, you can see that the output of the form's text boxes will be called for.
  • We are following the hierarchy of objects: The Document object is followed by the Form object (referenced by its name, myform), which is followed by for Form Field object (referenced by its name, fname), followed by .value. You have to add value or what the user wrote won't get returned to the hierarchy statement.
  • We have a variable called greeting. The contents of greeting are displayed with an alert(greeting).
  • When the user clicks the button, the alert pops up and displays the first name.
  • The second alert comes up after the button is clicked including the greeting variable. The alert box reads "Hello (first name) (last name)" by combining the output of the two text boxes. Notice the "value" again at the end of the hierarchy statement.
  • Finally, the third alert box pops up and displays some text then calls for document.myform.fname.value.length. That command displays the length of the contents of the fname field. If fname contains "Joe", the length is 3. Notice the "length" command follows "value." That way it is darn sure to count the text that is entered.
  • Length is a property.

What You Have Learned


Your Assignment

Produce an HTML document with a form named "aform." This should display two text fields, one for City and one for State. When the user clicks a button, perform a function that creates a variable called beginning that contains "I like ." Use alert to view the following:

  1. I like city, state (city and state will be the values you typed into the two text fields).
  2. Display the length of "city."

Here's a possible answer to this assignment
(this will open a new window)


The Concept
The Script
The Script's Effect
Deconstructing the Script
What You've Learned
Your Assignment



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