• Choose a category
• All
• Classic-Fiction

By Root 1330 0

you’re accessing the contents of form elements to get information from the user. You need a mechanism for getting information from a text field and other form elements.

5. Use form elements for output.

For this simple example, I also use form elements for output. The output goes in a second textbox, even though I don’t intend the user to type any text there.

Figure 5-7:

I got a greeting! With no alert box!

Creating the XHTML form

The first step in building a program that can manage text input and output is to create the XHTML framework. Here’s the XHTML code:

type = “text/css”

href = “textBoxes.css” />

Text Box Input and Output

Type your name:

id = “txtName” />

value = “click me”

onclick = “sayHi()”/>

id = “txtOutput” />

As you look over the code, note a few important ideas:

♦ The page uses external CSS. The CSS style is nice, but it’s not important in the discussion here. It stays safely encapsulated in its own file. Of course, you’re welcome to look it over or change it.

♦ Most of the page is a form. All form elements must be inside a form.

♦ A fieldset is used to contain form elements. input elements need to be inside some sort of block-level element, and a fieldset is a natural choice.

♦ There’s a text field named txtName. This text field contains the name. I begin with the phrase txt to remind myself that this field is a textbox.

♦ The second element is a button. You don’t need to give the button an ID (as it won’t be referred to in code), but it does have an onclick() event.

♦ The button’s onclick event refers to a (yet undefined) function. In this example, it’s named “sayHi()”.

♦ A second textbox contains the greeting. This second textbox is called txtOutput because it’s the text field meant for output.

After you set up the HTML page, the function becomes pretty easy to write because you’ve already identified all the major constructs. You know you need a function called sayHi(), and this function reads text from the txtName field and writes to the txtOutput field.

Using GetElementById to get access to the page

XHTML is one thing, and JavaScript is another. You need some way to turn an HTML form element into something JavaScript can read. The magical getElementById() method does exactly that. First, look at the first two lines of the sayHi() function (defined in the header as usual).

function sayHi(){

var txtName = document.getElementById(“txtName”);

var txtOutput = document.getElementById(“txtOutput”);

You can extract every element created in your Web page by digging through the DOM. In the old days, this approach is how we used to access form elements. It was ugly and tedious. Modern browsers have the wonderful getElementById() function instead. This beauty searches through the DOM and returns a reference to an object with the requested ID.

A reference is simply an indicator where the specified object is in memory. You can store a reference in a variable. Manipulating this variable manipulates the object it represents. If you want, you can think of it as making the textbox into a variable.

Note that I call the variable txtName, just like the original textbox. This variable refers to the text field from the form, not the value of that text field. Once I have a reference to the text field object, I can use its methods and properties to extract data from it and send new values to it.

Manipulating the text fields

Once you have access to the text fields, you can manipulate the values of these fields with the value property:

var name = txtName.value;

txtOutput.value = “Hi there, “ + name + “!”

Text fields (and, in fact, all input fields) have a value property. You can read this value as an ordinary string variable. You can also write to this property, and