reptile7's JavaScript blog is Andrew Peak's personal technical writing project: it focuses on JavaScript and the analysis of JavaScript scripts, although HTML, CSS, and anything else related to coding for the Web are also fair game.

The "Ensure Users Agree" script works with a form holding four controls.elements[0] is the gatekeeper checkbox.elements[1] and elements[2] are Name: and E-Mail: text fields, respectively.elements[3] is a Post: textarea field.
Here's the form code:

(1) The text inputs and their preceding text strings are placed in a table in order to horizontally align the left edges of the input boxes; if you don't care about this, then you can throw out the table markup (there's no table in Savvy's original code).

If a user agent encounters an attribute value it doesn't recognize, it should use the default attribute value.

Accordingly, the browser replaces true with disabled, the #IMPLIED default value for the disabled attribute, and disables the text inputs.

(3) Similarly, textbox is not a legal value for the type attribute of the input element; the value we really want is text, which fortunately is the attribute's default value, and the browser replaces textbox with text per the preceding note.

(4) Semantically, the Name:, E-Mail:, and Post: strings are labels, so we should mark them up that way. If we keep the layout table, then the label strings and the text inputs will have to be explicitly associated via label for attributes and input id attributes, e.g.:

Checking the mycheck checkbox calls a toggleform( ) function and passes thereto three arguments.arguments[0] is document.myform, which refers to the parent form.arguments[1] is mycheck, which refers to the checkbox itself.arguments[2] is pname,pemail,ptext, a comma-delimited list of the names of the form controls we want to enable.
These arguments are passed as strings (not as reference expressions) and are respectively given the identifiers formstr, chkobstr, and obstr.

function toggleform(formstr, chkobstr, obstr) { ... }

The toggleform( ) function first gets the checked status of the mycheck checkbox via the following statement:

var checked = eval(formstr + "." + chkobstr + ".checked");

formstr, ., chkobstr, and .checked are concatenated and the resulting document.myform.mycheck.checked expression string is fed to the top-level eval( ) function, which evaluates the string to give true, which is assigned to a checked variable.

Next, the obstr string is split( ) to give an obs array of control name substrings.

var obs = obstr.split(",");

A for loop subsequently prepends formstr and . to each obs substring.

for (i = 0; i < obs.length; i++) { obs[i] = formstr + "." + obs[i]; }

We now have an array of stringified references for the disabled text inputs, as though we had coded:

The else clause sequentially feeds the obs strings to an enableob( ) function.

function enableob(o) { eval(o + ".disabled = false"); }

A .disabled = false string is appended to each obs/o string; the resulting document.myform.controlName.disabled = false statement string is executed by the eval( ) function to enable the corresponding control. Unlike the HTML disabled attribute, the DOM disabled attribute (its HTMLInputElement interface listing is here) in a JavaScript context takes a literal true or false (1 or 0 respectively will also work).

Once the text inputs are enabled, focus is given to the Name:/pname field by the document.getElementById("pname").focus( ); command.

Redisabling the text inputs

We noted two entries ago that both checking and unchecking a checkbox dispatch a click event. Per the foregoing discussion:
(1) Unchecking the mycheck checkbox calls the toggleform( ) function and passes it document.myform, mycheck, and pname,pemail,ptext arguments.
(2) The checkbox's checked status is read and found to be false.
(3) The obstr argument is split( ) into control name substrings, which are converted into stringified object references.
The aforementioned if (checked == false) statement kicks in:

Complementing the enableob( ) function is a disableob( ) function that disables each text input by setting its DOM disabled attribute to true.That wraps up our script deconstruction. In the following post I'll have a few more things to say about the "Ensure Users Agree" tutorial - in particular, I'll show you a much simpler way to code the toggleform( )/enableob( )/disableob( ) functionality - and then I'll briefly outline what we'll be doing next.
- posted by A. Peak @ 2:59 PM