with Ges Seger

STRAAANGE COOODE

Today's Episode:

Forms Alfredo

I'm never a person to leave well enough alone. In this case, however, I had plenty of excuses.

My forms toggling episode from last year provoked Todd to new heights of Javascript programming. V2.0 of necromonicron.js his forms library was a major improvement in structure and programming style over his previous effort, and had an easier API to boot. Add to that my recent experimentations in using Javascript to change classes on a containing object and letting style sheets do the rest of the work for me, and I couldn't resist a visit back to the subject of state toggling in HTML forms. Did you really think I'd let Todd show me up?

STYLES

This version of the form toggling code makes more use of styles than the previous version, so let's walk through them now.

      form	{ background:	#ccc; }

Nothing critical here, so let's move along.

      form input[type="text"]
		{ background:	#fff; }

Here's our default class rule for all text fields in our form.

      form.disabled input[type="text"]
		{ background:	#ddd;
		  color:	#000; }

Here is how disabled text fields are to be shown in the form. Rather than set the class on the field, we will be setting it on the parent form. This will allow me to significantly simplify my toggling script below.

      p button	{ width:	200px; }

I like nice, wide buttons. Don't you?

CODE

0      function mode(b) {
1        var f     = b.form;
2        var check = (b.name == "view");

This version of the form toggling code takes one argument: a reference to the button that was clicked. Line 1 immediately backs out a reference to the form for use in disabling or enabling elements. Line 2 tests the name of the button which invoked this function and stores the result of this as a boolean variable for further use. Programatically, it's more efficient to do it once than several dozen times throughout execution.

5        for(i=0; i<f.elements.length; i++) { f.elements[i].disabled = check; }

This is the meat of the function. This version of the code, unlike the previous version, loops over every form element and sets it to the result of the logical test in line 2. I made the decision to worry about the toggle buttons later, which enabled me to simplify the function and make it independent of the form's structure.

 8      f.className     = check? 'disabled': '';
 9      f.view.disabled = check;
10      f.edit.disabled = !check;
11    }

Here's where I take care of cleanup processing. Line 8 adapts the trick with on-the-fly style rule switching that I first developed for my menubar episode. Here, we switch the class of the top-level form to activate style differences in our text fields shown previously. Lines 9 and 10 take care of enabling/disabling our state buttons.

This code is almost a third the size of the previous version with no sacrifice in functionality. Pretty good for a day's work.

USAGE

Unchanged from the previous version of this code:

As usual, I've included a simple example form below which you can toggle between view-only and edit modes of operation. Once you get tired of fiddling with that, feel free to View Source on this page to get a better feel for how I intend to do things for the next release of that pesky web application.

BUGS FEATURES

The conditional style selectors used for the look-and-field of the text fields are a CSS2 feature and may not work on some browsers (which you probably shouldn't be using anyway, but I digress). A workaround would be to define a special class for these fields and use it for those two rules.

EXAMPLE

Forms Toggling Test
Name: First, MI Last
Organization
Operating System: Windows Macintosh Linux
Obligatory Check Button
Comments

Mode: