Tuesday, April 04, 2006
Form Fields and the Value Property, Part 2
Blog Entry #35
So, I'm looking over HTML Goodies' JavaScript Primers #19 ("Passing Information to the Function"), and I'm thinking to myself, "Are we plowing any new ground here at all?" Maybe a tad. Here's the Primer #19 Script:
<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>
We turn our undivided attention to the script's one new thing (at least with respect to the HTML Goodies JavaScript Primers series), namely, the following hierarchy statement appearing in 'function command #4':
document.myform.fname.value.length
In Primer #7, Joe discussed the length property of the history object, saying, "The property is 'length.' It's a popular one, too. You'll see it used with other commands later on" - well, here we are! We know all about the values of form controls at this point, and as you would expect, the statement above "displays the length of the contents of the fname field. If fname contains 'Joe', the length is 3," to quote Joe from the "Deconstructing the Script" section of the primer. And yet, when I first worked through Primer #19, the syntax of this statement confused me a bit. From the discussion of hierarchy statements in Primer #8, it seemed to me that value is serving here in part as an object; however, in Primer #8 Joe also tells us, "Note that Value and SRC are just Properties!" And he's technically correct in the sense that neither the DOM nor present-day JavaScript features a value element/object.
We now also know, however, that the values of field-type form control objects (i.e., the text, textarea, password, fileUpload, and hidden objects, as listed in Blog Entry #17) do function as de facto JavaScript String objects. We first made this point in Blog Entry #22, whose "The Value Property" section itself sports a document.myform.mytext.value.length statement and, like "The Concept" of Primer #19, makes brief mention of the use of such statements in data entry checking/validation. Subsequently, the "Other 'After-the-Fact' Event Handlers" section of Blog Entry #24 featured a demo that applied the toUpperCase( ) method of the String object to a form field input.
More precisely, a user's input into a field-type control constitutes a string literal, which we defined in Blog Entry #33, and in this regard, Netscape notes, "You can call any of the methods of the String object on a string literal value—JavaScript automatically converts the string literal to a temporary String object, calls the method, then discards the temporary String object. You can also use the String.length property with a string literal." So there you have it.
More generally, we see in DevGuru's JavaScript Properties Index that length is a property of a number of different objects, as Joe implies above (come to think of it, we discussed the length property of the form object in Blog Entry #16); DevGuru's list does not include object collections (images[ ], links[ ], elements[ ], etc.), all of which also have a length property.
Parameterizing the doit( ) function
And that's going to about do it, folks; as you can see, the rest of the Primer #19 Script is a retread of the scripts of earlier primers, and thus needs no 'play-by-play' in this entry - Joe's analysis should suffice as a review if needs be. But I do have one more comment to make. With respect to the doit( ) function call, Joe notes, "No parameters are passed as was done in the two previous primers. [Actually, the Primer #17 Script had a parameterized function, but the Primer #18 Script did not.] We know this because there is nothing in the parentheses ( ) of doit( )." However, we can easily parameterize the doit( ) function if we wanted to; for example:
In the document body, recode the function-call button as:
<input type="button" value="Submit"
onclick="doit(document.myform.fname.value,document.myform.lname.value);">
In the document head, recode the doit( ) function as:
function doit(x,y) {
window.alert("document.myform.fname.value is " + x);
var greeting="hello ";
window.alert(greeting + x + " " + y);
window.alert("length of first name " + x.length); }
IMO, this makes the doit( ) function easier to read, but to each his own, of course.
Its script still features a function and a form, but HTML Goodies' JavaScript Primers #20, which we'll cover in the next post, thankfully moves us into some new territory; specifically, Primer #20 will show how to generate random numbers using JavaScript and the clock running on your computer.
reptile7
- posted by A. Peak @ 4:04 PM
Actually, reptile7's JavaScript blog is powered by Café La Llave. ;-)