JavaScript Primers #19

By Joe Burns

http://www.htmlgoodies.com/primers/jsp/article.php/3478311/JavaScript-Primers-19.htm (Back to article)

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:

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)

}

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

On To JavaScript Primer #20