Free Web tutorials covering HTML, CSS, JavaScript, and DHTML from beginner to advanced. Free downloads and developer resources. Personalized help via email, form, and chat.

free, web, tutorials, HTML, html, CSS, css, stylesheet, cascading stylesheet, Javascript, javascript, JavaScript, DHTML, dhtml, beginner, advanced, web development, web page, web site, free web tutorial, free HTML tutorial, free CSS tutorial, free css tutorial, free cascading stylesheet tutorial, free stylesheet tutorial, free javascript tutorial, free DHTML tutorial, free HTML class, free CSS class, free stylesheet class, free cascading stylesheet class, free javascript class, free DHTML class">

Free Web tutorials covering HTML, CSS, JavaScript, and DHTML from beginner to advanced. Free downloads and developer resources. Personalized help via email, form, and chat. free, web, tutorials, HTML, html, CSS, css, stylesheet, cascading stylesheet, Javascript, javascript, JavaScript, DHTML, dhtml, beginner, advanced, web development, web page, web site, free web tutorial, free HTML tutorial, free CSS tutorial, free css tutorial, free cascading stylesheet tutorial, free stylesheet tutorial, free javascript tutorial, free DHTML tutorial, free HTML class, free CSS class, free stylesheet class, free cascading stylesheet class, free javascript class, free DHTML class

<Code_Punk>'s

Advanced JavaScript Lesson 15:
Using Form Text

Code Tutorials



Site Development



Downloads



Help!!



Home

The Value Property

JavaScript is often used to "validate" form data. By this I mean that JavaScript functions can check to see what data and selections are entered by a viewer on an HTML form before the form is submitted. This can save a lot of time in finding mistakes because JavaScript runs on the viewer's machine, not the server, like backend form validation (PHP, ASP, Perl). This saves both time and server resources and is overall more efficient that using a backend technology to validate forms.

In the upcoming sections we'll be learning the object references used to access form objects with JavaScript. We'll begin by seeing what text a viewer types into a form's text boxes or textareas.

The key to this is the "value" property. This property contains the contents of what the viewer typed in. The JavaScript object reference for this is generalized below.

document.form_name.box_name.value;

That's all there is to it. Once the value is obtained, we can use it for all sorts of things.

Getting A Box's Value

We retrieve a box's value as generally described above. Lets say we've got a form like this one:

<form name="form1">

<input type="text" name="the_box">

</form>

Not very complicated. What will be displayed will be a plain textbox ready to be typed in. What's important to note at this point is that we NAMEd the form and the <input>. Every form and form element to be accessed by JavaScript must have a NAME.

Now lets set up a program so that what you type into the box is displayed in an alert() box. We'll start by making the submit button that will start the ball rolling:

<form name="form1" action="javascript:show_box()">

<input type="text" name="the_box">&nbsp;&nbsp;

<input type="submit" value="Enter"> </form>

The new <input> makes the submit button. By setting it to TYPE="submit", clicking it will call the ACTION attribute of the <form>. This attribute has been set to a JavaScript function called "show_box()". Writing these ACTIONs for JavaScript is just like using JavaScript in an <a> tag's HREF. Don't forget to precede the function's name with "javascript:"

Now we'll go to the <head> of our page and code the function. Notice how we refer to the value of the contents of the textbox.

<script language="JavaScript">

function show_box(){
alert(document.form1.the_box.value)
}

</script>

Now you can type something into the box, click the "Enter" button, and an alert() box will appear with the same text as in the text box. Try it below.

  


Neat, huh? Of course now that we can access the value entered, we can do all sorts of things with it.

Setting A Box's Value

We can set the value displayed in a textbox or textarea by simply setting equal to a string:

<script language="JavaScript">

document.form_name.element_name.value = "Hi There!";

</script>

Check out this example. It displays what you type in one box in another box. We do this by getting the value of the input box and using it to set the value of the output box.

I'm assuming that you can make the form elements from your study of HTML Forms. We used a textbox and textarea for the example. Add a couple of buttons and your set. Don't forget the ACTION in your <form> so the submit button will have something to run (call on).

Now lets code the function that will copy what you've typed. All we're doing is setting the value of the output box to equal the value of the input box. I've named the <form> "form1". The boxes are named "input_box" and "output_box".

<script language="JavaScript">

function write_this(){

document.form1.output_box.value =
document.form1.input_box.value;
}

</script>

We're just taking the value of "input_box" and assigning the same value to "output_box". All you need to do to set the value of a box is to set it equal to whatever string you want displayed. This string can be another object or variable.

NOTE: The examples used in this lesson don't work in Netscape. It has to do with how Netscape assigns values. Form objects are referenced the same way in both IE and Netscape.

Using A Box's Value

We can use a box's value in a variety of ways. Try out this example. You should be able to figure it out by simply viewing the page's source code. All we've done is taken the values from two textboxes and used them to set the background and foreground colors of the page.

You should already know how to make the form elements. You must give your boxes different NAMEs. I named mine "background_box" and "foreground_box". Below is the JavaScript needed to actually change the colors.

<script language="JavaScript">

function change(){

document.bgColor = document.form1.background_box.value;

document.fgColor = document.form1.foreground_box.value;

</script>

Again, this only works in IE. We'll get around to some Netscape workarounds later. For now it's important to understand the "value" property and JavaScript object reference for text values in textboxes and textareas.

Summary & Exercises

You can access what's typed into a textbox or textarea by referring to its "value" property: document.form_name.element_name.value;

You can set, or assign, as value to a textbox or textarea by making its value equal to a string, variable, or other property: document.form_name.element_name.value = "string";

Try making this example. Hints: Make a "setInterval()" function that begins when the page loads. Have it run a program that continually updates the value of the output box to that of the input box.



To Next Advanced JavaScript Lesson

Back To Advanced JavaScript Index