Clearing Field Values

[Tyrone Slothrop]

I am coding a search form which carries the values to an identical
form on the search results page. A "Clear Fields" button to remove
the values from the previous search is required. Ideally I would
prefer a generic script to do this. I had no problems with the script
until I had to deal with the radio elements.

Following is the problem part of the code:

function resetFields()
{
var len = document.form.elements.length;
for (var i=0; i<len; i++)
{
if (document.form.elements[i].type == 'radio')
{
var radioGrp = document.form.elements[i].name;
radioGrp[0].checked = true;
}
}
}

I understand each radio button is an element and assumed that, once
the name is defined, each time the radio element of the same name is
encountered in the script it would be treated as an array
nevertheless. It seems that this is a false assumption since the
radio is not reseting to the "0" value of the group.

What am I doing (or assuming) wrong?

TIA!

[Janwillem Borleffs]

Tyrone Slothrop wrote:

var radioGrp = document.form.elements[i].name;

var radioGrp = document.form.elements[i];

But why not use a plain <input type="reset" />?
JW

[Tyrone Slothrop]

On Sat, 25 Jun 2005 22:55:18 +0200, "Janwillem Borleffs"
<[e-mail]> wrote:

Tyrone Slothrop wrote:

var radioGrp = document.form.elements[i].name;

var radioGrp = document.form.elements[i];

But why not use a plain <input type="reset" />?
JW

Because it doesn't work when you carry the variables from the current
search on the results page. Reset will work only if you start with a
clean slate.

Anyway:

var radioGrp = document.form.elements[i];
radioGrp[0].checked = 1;

returns an error: radioGrp[0] has no properties.

Maybe this isn't possible???

[RobG]

Tyrone Slothrop wrote:

I am coding a search form which carries the values to an identical
form on the search results page. A "Clear Fields" button to remove
the values from the previous search is required. Ideally I would
prefer a generic script to do this. I had no problems with the script
until I had to deal with the radio elements.

Following is the problem part of the code:

function resetFields()
{
var len = document.form.elements.length;
for (var i=0; i<len; i++)
{
if (document.form.elements[i].type == 'radio')
{
var radioGrp = document.form.elements[i].name;
this will set 'radioGrp' to the name of element[i] (if it has one);
radioGrp[0].checked = true;
This may work in IE (I can't test it right now) but you are depending
on the name of an element in the radio group being treated as a
global variable and being a reference to a collection radio buttons.

In any case, the way to get the radio group is to use the form and
elements collection with the name that you just got:

var radioGrpName = document.form.elements[i].name;
var radioGrp = document.form.elements[radioGrpName];
radioGrp[0].checked = true;

though it could be done with fewer intermediate steps.
}
}
}

I understand each radio button is an element and assumed that, once
the name is defined, each time the radio element of the same name is
encountered in the script it would be treated as an array
nevertheless.
Once you fix your script as above, you will find that it is treated
as an HTML element collection, which is like an array but different.
It seems that this is a false assumption since the
radio is not reseting to the "0" value of the group.

Your assumption was correct, you were just addressing the collection
incorrectly.

Once you have reset to the first button, you probably want to skip to
the end of the radio group, otherwise your loop will reset the group
once for each element (not a big deal but a bit of a CPU-cycle
waster).

[...]

--
Rob

[Tyrone Slothrop]

> Snipping all previous posts....

This works, though I would think there is a better way, though nothing
else I tried (nor anything suggested) worked:

function resetFields()
{
var k = 1;
var rgName, rgLength, rG;
var len = document.form.elements.length;
for (var i=0; i<len; i++)
{
// Code removed here to show only radio reset
if (document.form.elements[i].type == 'radio')
{
rgName = document.form.elements[i].name;
rG = document.form.elements[rgName];
rgLength = document.form.elements[rgName].length;
if (k == rgLength) { rG[0].checked = true; }
k++;
}
}
}

Until at least the second iteration of the radio elements, the radio
group is not an array. Trying to reset the first radio of the group
(and ignoring any further elements of the same name) prior to it being
an array failed, ie. rG.checked = true.

This seems damned complex for something that should be simple.

BTW, thanks those of you who offered their assistance!

[Janwillem Borleffs]

Tyrone Slothrop wrote:

This works, though I would think there is a better way, though nothing
else I tried (nor anything suggested) worked:

Here's an alternative using partly DOM, with the drawback that each element
of an element group is still accessed and it might not be supported by all
browsers:

var elems = form.childNodes;
for (var i = 0; i < elems.length; i++) {
if (elems[i].type == 'radio') {
var name = elems[i].getAttribute('name');
if (form.elements[name].length) {
form.elements[name][0].checked = true;
} else {
form.elements[name].checked = true;
}
}
}
JW

[RobG]

Tyrone Slothrop wrote:

Snipping all previous posts....

This works, though I would think there is a better way, though nothing
else I tried (nor anything suggested) worked:

function resetFields()
{
var k = 1;
var rgName, rgLength, rG;
var len = document.form.elements.length;
for (var i=0; i<len; i++)
{
// Code removed here to show only radio reset
if (document.form.elements[i].type == 'radio')
{
rgName = document.form.elements[i].name;
rG = document.form.elements[rgName];
rgLength = document.form.elements[rgName].length;
if (k == rgLength) { rG[0].checked = true; }
k++;
}
}
}

There's a simplified version of this bit below. I assume you are
passing a reference to the form to the function, if not, then you need
to assign a value to 'form' using getElementById or the forms
collection.

Until at least the second iteration of the radio elements, the radio
group is not an array.
It's only an array when you make it one.
Trying to reset the first radio of the group
(and ignoring any further elements of the same name) prior to it being
an array failed, ie. rG.checked = true.
It can be done, see below. You need to add the length of the array
less one.

This seems damned complex for something that should be simple.
That's why there's a reset button :-)

You are making it a little harder than it should be:

<script type="text/javascript">
function resetFields(f) {
var rGrp, el, els = f.elements;
var i, j = f.elements.length;
for ( i=0; i<j; i++) {
el = els[i];

// do text, hidden & textareas
if ( 'text' == el.type
|| 'hidden' == el.type
|| 'textarea' == el.nodeName.toLowerCase() ) {
el.value = '';

// reset radio groups
} else if ( 'radio' == el.type ) {
rGrp = f.elements[el.name];
rGrp[0].checked = true;
i += rGrp.length-1; // Skip to end of group

// Do other elements

}
}
}
</script>

BTW, thanks those of you who offered their assistance!

--
Rob