Enable/Disable and clearing values

[hortoristic]

We are using JavaScript to Enable/Disable certain fields on web pages
based on business rules.

A simple example is if when using an option type tag, and the two
options are Yes and No. If YES is selected - enable a field to use
the M$ Datepicker. Using the code below works for most of our fields,
however the problem is that when the field is re-enabled - it
remembers the original date or data prior to it being disabled -
despite the lines of code below that say oElement.value = '':

Is using oElement.value different when trying to clear out date values
and other types?

function mainDisable(oElement) {
// disable the specified page element
var sBgcolor = '#dddddd';
oElement.disabled = true;
oElement.imageUrl = '';
oElement.style.backgroundColor = sBgcolor;
// If the element is a select list, disable all the options, otherwise
// set the value to the empty string.
if (oElement.tagName == 'SELECT') {
// Clear all items in the select list.
for (i = 0; i < oElement.options.length; i++) {
oElement.options.selected = false;
oElement.value = '';
}
}
else {
oElement.value = '';
oElement.checked = false;
}
}

 

[RobG]

We are using JavaScript to Enable/Disable certain fields on web pages
based on business rules.

A simple example is if when using an option type tag, and the two
options are Yes and No. If YES is selected - enable a field to use

A yes/no choice indicates the need for a single checkbox, not an option
list - but I guess this is just an example...

the M$ Datepicker. Using the code below works for most of our fields,
however the problem is that when the field is re-enabled - it
remembers the original date or data prior to it being disabled -
despite the lines of code below that say oElement.value = '':

Presumably 'M$ Datepicker' is a thing that puts a date into a text input
somewhere in the form. The posted code only deals with select or either
radio or checkboxes (it's impossible to tell which from the code).

The reason your field's value isn't cleared is probably because you
don't seem to be clearing any text inputs. The code below appears to
only deal with selects, radio buttons and checkboxes.

Is using oElement.value different when trying to clear out date values
and other types?

function mainDisable(oElement) {
// disable the specified page element
var sBgcolor = '#dddddd';
oElement.disabled = true;
oElement.imageUrl = '';
oElement.style.backgroundColor = sBgcolor;
// If the element is a select list, disable all the options, otherwise
// set the value to the empty string.
if (oElement.tagName == 'SELECT') {

Possibly better to use nodeName, but likely makes no difference. The
comparison should be case insensitive:

if ( 'select' == oElement.nodeName.toLowerCase() ) {

or

if ( /select/i.test(oElement.nodeName) ) {

// Clear all items in the select list.
for (i = 0; i < oElement.options.length; i++) {

Your counter 'i' is declared as a global, better to keep it local.
Getting the number of elements every time is slow, better to store it:

for ( var i=0, len=oElement.options.length; i<len; i++) {

oElement.options.selected = false;

This sets the current option to 'not selected'. If the select is a
single select, you can just make your choice (usually 0) the selected
option and that will 'unselect' any other:

oElement.options[0].selected = true;

No need for a loop.

oElement.value = '';

A select element has a value of the currently selected option. The
above statement has different effects in different browsers - in Firefox
is does nothing, in IE it sets the visible text of the option to an
empty string (or nothing) even if all options have text. In general, you
shouldn't try to set the value of the select, you should change the
selected option (say as suggested above).

If you want to clear both the value and text of an option, then do so
but I can't see any point in having an empty option. If you want to
delete all options, set the length of the select to 0.

oElement.length = 0;

}
}
else {
oElement.value = '';
oElement.checked = false;

This assumes that if the element wasn't a select, that it is a checkbox
or radio button. It's probably better to actually check:

} else if ( 'checkbox' == oElement.type
|| 'radio' == oElement.type ) {
...