Form Tricks

Here are a few form tricks that work on all browsers (version 4+).

checkAll()

Allows you to select/deselect all checkboxes beginning with a certain name by clicking on a single check box.

Non-Working Example: click checkAll 1 checkAll 2 checkAll 3

code for checkAll:

function checkAll(elm,name){
for (var i = 0; i < elm.form.elements.length; i++)
if (elm.form.elements[i].name.indexOf(name) == 0)
elm.form.elements[i].checked = elm.checked;
}

example html:

click <input type="checkbox" onClick="checkAll(this,'check')" />
checkAll 1 <input type="checkbox" name="check1" />
checkAll 2 <input type="checkbox" name="check2" />
checkAll 3 <input type="checkbox" name="check3" />

toggleIt()

Allows you to toggle a pair of checkboxes.

Non-Working Example: toggle 1 toggle 2

code for switchIt:

function toggleIt(elm,name1,name2){
if (elm.name == name1){
if (elm.checked) elm.form[name2].checked = false;
else elm.form[name2].checked = true;
}
else if (elm.name == name2){
if (elm.checked) elm.form[name1].checked = false;
else elm.form[name2].checked = true;
}
}

example html:

toggle 1   toggle 2 

alterNate()

Automatically erases the text box when the user clicks on it. When the user deselects it, it will restore the default value if it's empty.

code for alterNate:

function alterNate(elm){
if (!elm.base) elm.base = elm.value
if (elm.value == elm.base) elm.value = "";
else if (elm.value == "") elm.value = elm.base;
}

example html:
<input type="text" value="..blah-blah.." onBlur="alterNate(this)" onFocus="alterNate(this)" />