Syntax for resetting radio button to initial value?

[Garry Jones]

I have a reset function for a user form which clears text fields, resets
drop down boxes to initial values and moves focus to first input field.

However I need to reset radio buttons to their inital value (of zero).

The bit I am stuck with is

if (elements.checked) {
elements.checked = false;
}

This unclicks the radio buttons. However on the actual form its more like
this...

O No thanks
O 1
O 2
O 3

Initially the form loads with "No thanks" already checked. If the user has
now clicked 1, 2 or 3 and uses my reset button to call this function I want
to use this to set all radio buttons to [0] (ie to check "No Thanks" or
whatever the first value [0] is.

This is the entire function, any help greatly appreciated. I need to be able
to address elements[0]

function clearForm(oForm) {
var elements = oForm.elements;
oForm.reset();
for(i=0; i<elements.length; i++) {
field_type = elements.type.toLowerCase();
switch(field_type) {
case "text":
case "password":
case "textarea":
case "hidden":
elements.value = "";
break;
case "radio":
case "checkbox":
if (elements.checked) {
elements.checked = false;
}
break;
case "select-one":
case "select-multi":
elements.selectedIndex = 0;
break;
default:
break;
}
}
elements[0].focus();
}

Garry Jones
Expat in Sweden

 

[Jukka K. Korpela]

I have a reset function for a user form which clears text fields, resets
drop down boxes to initial values and moves focus to first input field.

Which reset function? Is this something comparable to the destruct
function triggered by <input type=reset>?

Please post the URL, but only if you wish to get constructive help.

The bit I am stuck with is

I doubt that. In any case, you are not describing a real problem with a URL.

This is the entire function

We need the entire URL to help you. The resident troll is prepared to
throw pointless remarks at you, but the rest of us might really wish to
help you, if you gave us some opportunity to do so.

 

[Matt McDonald]

The bit I am stuck with is

if (elements.checked) {
elements.checked = false;
}

This unclicks the radio buttons. However on the actual form its more
like this...

O No thanks
O 1
O 2
O 3

Initially the form loads with "No thanks" already checked. If the user
has now clicked 1, 2 or 3 and uses my reset button to call this function
I want to use this to set all radio buttons to [0] (ie to check "No
Thanks" or whatever the first value [0] is.

You'll want to look into HTMLInputElement.defaultChecked[0]. It stores
the value of the "checked" attribute.

Furthermore, you may want to look into HTMLInputElement.defaultValue[1].
It functions like "defaultChecked", except it applies to the "value"
attribute.

I've made a demo to help you understand:

http://jsbin.com/omomog/edit#source

I do have to question (as Jukka has already done) why you're avoiding
HTMLFormElement.reset (and functionality like it). It will reset form
elements back to their default state. Are you trying to make a hybrid
solution that both clears certain elements, and resets others? Some
clarity, along with the form markup itself would be welcome.

[0]: http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-20509171
[1]: http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-26091157

 

[dhtml]

Which reset function? Is this something comparable to the destruct
function triggered by <input type=reset>?

Please post the URL, but only if you wish to get constructive help.


I doubt that. In any case, you are not describing a real problem with a URL.

A URL can't describe a problem. The problem should be stated in the
message text and subject.

We need the entire URL to help you.

Count me out on that one -- I actually prefer to see code inline. What
is most important though is to describe the goal not the step. And
from the looks of it, <input type=reset> would do what that OP wants,
though generally reset buttons provide a bad user experience
perspective.

 

[dhtml]

The bit I am stuck with is

if (elements.checked) {
elements.checked = false;
}

This unclicks the radio buttons. However on the actual form its more
like this...

O No thanks
O 1
O 2
O 3

Initially the form loads with "No thanks" already checked. If the user
has now clicked 1, 2 or 3 and uses my reset button to call this function
I want to use this to set all radio buttons to [0] (ie to check "No
Thanks" or whatever the first value [0] is.

You'll want to look into HTMLInputElement.defaultChecked[0]. It stores
the value of the "checked" attribute.

Furthermore, you may want to look into HTMLInputElement.defaultValue[1].
It functions like "defaultChecked", except it applies to the "value"
attribute.

I've made a demo to help you understand:

http://jsbin.com/omomog/edit#source

I do have to question (as Jukka has already done) why you're avoiding
HTMLFormElement.reset (and functionality like it). It will reset form
elements back to their default state. Are you trying to make a hybrid
solution that both clears certain elements, and resets others? Some
clarity, along with the form markup itself would be welcome.

The code actually calls `oForm.reset()` before it does the
inexplicable other stuff.

 

[Thomas 'PointedEars' Lahn]

I have a reset function for a user form which clears text fields, resets
drop down boxes to initial values and moves focus to first input field.

However I need to reset radio buttons to their inital value (of zero).

The bit I am stuck with is

if (elements.checked) {
elements.checked = false;
}

This unclicks the radio buttons. However on the actual form its more like
this...

O No thanks
O 1
O 2
O 3

Initially the form loads with "No thanks" already checked. If the user has
now clicked 1, 2 or 3 and uses my reset button to call this function I
want to use this to set all radio buttons to [0] (ie to check "No Thanks"
or whatever the first value [0] is.

Radiobuttons are special in that they are/should be in a radiobutton group,
defined by the `name' attribute value of the respective
`input[type="radio"]' elements. In a radiobutton group at most one
radiobutton can be checked. That means if you check one radiobutton (i. e.,
set its non-true `checked' value to `true'), the others in the same group
*automatically* become unchecked.

Also, form controls of the same name (which includes radiobuttons of a
group) make a NodeList, in which you can access the nth control in that
NodeList with index n−1.

This is the entire function, any help greatly appreciated. I need to be
able to address elements[0]

No, as you are not using a *name* for `i' (but a number), there is no
`elements[0]'.

function clearForm(oForm) {
var elements = oForm.elements;
oForm.reset();

As you are calling the reset() method, isn't the following loop a bit
pointless? reset() already resets all controls of the form, *including*
the radiobuttons.

for(i=0; i<elements.length; i++) {

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

is less error-prone and more efficient, as the value of `element.length' is
invariant here. Also, do not write control statements as if they were
function calls.

field_type = elements.type.toLowerCase();

You have again forgotten to declare the identifier left-hand side, which
makes it either global, or the assignment ineffective or a runtime error.
But no variable.

switch(field_type) {
case "text":
case "password":
case "textarea":
case "hidden":
elements.value = "";

The DRY programming principle would suggest that you store the value of
`elements' in a variable at the top of the loop, and use that variable in
the loop. Not only is that easier to maintain, but also it is more
efficient (as it saves one property access per use):

var element = elements;
…
element.value = "";

break;
case "radio":
case "checkbox":
if (elements.checked) {
elements.checked = false;
}

Radiobuttons are special, so in the unlikely case the reset() call above is
insufficient, you need to do an extra loop (*outside* of *this* loop) to
check the first one of each group.

In that case, you should make the distinction between the case for "radio"
and "checkbox" here, and, instead of unchecking the radiobutton, make an
Object having the radiobutton group name as property (or an Array with the
first radiobutton of each group as element).

Then you can easily check the first radiobutton of each group later by
iterating over the enumerable properties of the Object instance or the
elements of the Array instance.

Your code style as posted (indentation, whitespace etc.) leaves much to be
desired. Think clearly, and let your code reflect that.


HTH

PointedEars

 

[Thomas 'PointedEars' Lahn]

Initially the form loads with "No thanks" already checked. If the user
has now clicked 1, 2 or 3 and uses my reset button to call this function
I want to use this to set all radio buttons to [0] (ie to check "No
Thanks" or whatever the first value [0] is.

You'll want to look into HTMLInputElement.defaultChecked[0].

Unnecessary (and its HTMLInputElement::defaultChecked). The first
radiobutton in a radiobutton group always has index 0 (regardless of the
value), and checking it unchecks all other radiobuttons in that group.


PointedEars

 

[Thomas 'PointedEars' Lahn]

Initially the form loads with "No thanks" already checked. If the user
has now clicked 1, 2 or 3 and uses my reset button to call this function
I want to use this to set all radio buttons to [0] (ie to check "No
Thanks" or whatever the first value [0] is.

You'll want to look into HTMLInputElement.defaultChecked[0].

Unnecessary (and it's HTMLInputElement::defaultChecked). The first
radiobutton in a radiobutton group always has index 0 (regardless of the
value), and checking it unchecks all other radiobuttons in that group.


PointedEars

 

[Denis McMahon]

I have a reset function for a user form which clears text fields, resets
drop down boxes to initial values and moves focus to first input field.

However I need to reset radio buttons to their inital value (of zero).

Radio buttons shouldn't have an initial value of zero.

A radio group is a group of buttons of which one and only one is
selected. This is the default option for the group, and should be marked
as such, eg:

<form>
<input type="radio" value="1" name="music"> Classical<br>
<input type="radio" value="2" name="music"> Jazz<br>
<input type="radio" value="3" name="music" checked="checked"> Rock<br>
<input type="submit"><input type="reset">
</form>

If I don't want the default option to be visible for a radio button set,
what I usually do is something like this:

<form>
<input type="radio" value="0" name="music" checked="checked"
style="display:none">
<input type="radio" value="1" name="music"> Classical<br>
<input type="radio" value="2" name="music"> Jazz<br>
<input type="radio" value="3" name="music"> Rock<br>
<input type="submit"><input type="reset">
</form>

Now a value of "0" means "none of the visible options was selected".

It may be that the latter is a solution to your problem too.

Rgds

Denis McMahon

 

[Denis McMahon]

This unclicks the radio buttons. However on the actual form its more
like this...

O No thanks
O 1
O 2
O 3

Initially the form loads with "No thanks" already checked. If the user
has now clicked 1, 2 or 3 and uses my reset button to call this function
I want to use this to set all radio buttons to [0] (ie to check "No
Thanks" or whatever the first value [0] is.

Oh, assuming you have something like:

<input type="radio" name="r1" value = "0"> No Thanks<br>
<input type="radio" name="r1" value = "1"> 1<br>
<input type="radio" name="r1" value = "2"> 2<br>
<input type="radio" name="r1" value = "3"> 3<br>

Then change:

<input type="radio" name="r1" value = "0"> No Thanks<br>

to:

<input type="radio" name="r1" value = "0" id="someUniqueId"> No Thanks<br>

and then use the javascript:

document.getElementById("someUniqueId").checked = true;

to reset the radio control so that "No Thanks" is selected. Due to the
nature of radio buttons, setting any element in a radio group to
".checked=true" will un-check any other button in the same radio group
that was previously checked.

See here: http://www.sined.co.uk/tmp/radiotest1.htm

Rgds

Denis McMahon

 

[Thomas 'PointedEars' Lahn]

Radio buttons shouldn't have an initial value of zero.

What would be the reason for that?

A radio group is a group of buttons of which one and only one is
selected. This is the default option for the group, and should be marked
as such, eg:

<form>
<input type="radio" value="1" name="music"> Classical<br>
<input type="radio" value="2" name="music"> Jazz<br>
<input type="radio" value="3" name="music" checked="checked"> Rock<br>
<input type="submit"><input type="reset">
</form>

That's HTML5 at most. But imagine what would happen if you simply omitted
the `checked' attribute. It's optional, you know.

BTW, including a reset button in a form is almost always a stupid idea:

If I don't want the default option to be visible for a radio button set,
what I usually do is something like this:

<form>
<input type="radio" value="0" name="music" checked="checked"
style="display:none">
<input type="radio" value="1" name="music"> Classical<br>
<input type="radio" value="2" name="music"> Jazz<br>
<input type="radio" value="3" name="music"> Rock<br>
<input type="submit"><input type="reset">
</form>

Now a value of "0" means "none of the visible options was selected".

Works great with and without CSS. NOT. It's complete utter nonsense; don't
*ever* do this. If you don't pre-check any radiobutton of a radiobutton
group, it will not be part of the request. There is absolutely no need
to transmit a "hidden" default value for a radiobutton group.

Not that this code would have *anything* to do with the OP's question.

It may be that the latter is a solution to your problem too.

It does not even address the problem. Would you *please* get a minimum clue
before making suggestions.


PointedEars

 

[Thomas 'PointedEars' Lahn]

This unclicks the radio buttons. However on the actual form its more
like this...

O No thanks
O 1
O 2
O 3

Initially the form loads with "No thanks" already checked. If the user
has now clicked 1, 2 or 3 and uses my reset button to call this function
I want to use this to set all radio buttons to [0] (ie to check "No
Thanks" or whatever the first value [0] is.

Oh, assuming you have something like:

<input type="radio" name="r1" value = "0"> No Thanks<br>
<input type="radio" name="r1" value = "1"> 1<br>
<input type="radio" name="r1" value = "2"> 2<br>
<input type="radio" name="r1" value = "3"> 3<br>

Then change:

<input type="radio" name="r1" value = "0"> No Thanks<br>

to:

<input type="radio" name="r1" value = "0" id="someUniqueId"> No Thanks<br>

and then use the javascript:

There is no "javascript".

document.getElementById("someUniqueId").checked = true;
[…]

And just when one thought that you could not come up with a more stupid
idea…

The OP is *way* ahead of you.

document.forms[0].elements["r1"][0].checked = true;

Standards-compliant and also works everywhere (as it originates in "DOM
Level 0"). The head part of it would seldom be necessary, of course, as one
would have a reference to the `form' element object by passing `this' or
`this.form' as the OP has with their `oForm' argument. Hence the suggestion
to determine the names of the radiobutton groups in the first loop.

Not that any of this would be necessary, there's HTMLFormElement::reset()
and, as the OP says, the first radiobutton is already checked by default.

DOM Scripting 101.


PointedEars

 

[Garry Jones]

"Denis McMahon" wrote in message

Then change:
<input type="radio" name="r1" value = "0"> No Thanks<br>
to:
<input type="radio" name="r1" value = "0" id="someUniqueId"> No Thanks<br>
and then use the javascript:
document.getElementById("someUniqueId").checked = true;

Yes, brilliant. That did it.

My problem is there are two ways to reset the form. The user can have called
in the form from different places and the initial radio button value is a
user value. So a form reset just resets to the initial user value whilst
this code is just what I needed and it resets the form to a global default
value for the user to start again.

I am very thankful to everyone who posted. I am fairly home in php and sql
but quite limited in javascript, I usually google pieces of code and adapt
them to suit my needs. Biggest problem with this Crome, Safari, Firefox,
Opera and MSIE treat javascript code differently and whilst php, sql etc
behave the same everywhere I find javascript to be a pain, its like allowing
foreign drivers to drive on the same side of the road as they do back home
and building a road system to allow this. Anyway, gripe over, I'm happy and
think its wonderful USENET can still outgun message boards and FAQ's in
2011.

Garry Jones
Expat in Sweden

 

[Thomas 'PointedEars' Lahn]

"Denis McMahon" wrote in message
news:[email protected]...

It's attribution _line_, not attribution novel.

Then change:
<input type="radio" name="r1" value = "0"> No Thanks<br>
to:
<input type="radio" name="r1" value = "0" id="someUniqueId"> No Thanks<br>
and then use the javascript:
document.getElementById("someUniqueId").checked = true;

Yes, brilliant. That did it.

There is nothing brilliant about it. This way you will have to put an ID
for the default radiobutton in each radiobutton group, that you must not
have used elsewhere, when you could have simply used the radiobutton group
name to refer to the first (or whatever) radiobutton of that *particular*
form, and you will have search for it by document.getElementById() in the
*whole* document. Even the `defaultValue' approach is smarter than that.

My problem is there are two ways to reset the form. The user can have
called in the form from different places and the initial radio button
value is a user value. So a form reset just resets to the initial user
value whilst this code is just what I needed and it resets the form to a
global default value for the user to start again.

It is generally a bad idea to allow a user reset a form. They rarely need
it, and often do it accidentally, losing all their input.

Regardless, if you did the form well, reset() would have sufficed.


PointedEars

 

[Dr J R Stockton]

I have a reset function for a user form which clears text fields,
resets drop down boxes to initial values and moves focus to first input
field.

However I need to reset radio buttons to their inital value (of zero).

Radio buttons have Boolean values. Initially, all of a set are false,
unless the HTML includes "checked". The reader can select any one, but
not none. The coder can set any one, but not (or not necessarily) none.

The bit I am stuck with is

if (elements.checked) {
elements.checked = false;
}

There is no need to check that something is on before setting it off.

One cannot turn a radio button off (at least, not in all browsers); but
one can turn another one of the set on, which clears it colleagues.

If you want to set a set of N radio buttons all to off, then create
button N+1 and turn that on, by code as author or by click as user.
Button N+1 can be marked as readonly (maybe), disabled,
visibility:hidden, display:none, depending on author's preference.
Author may prefer to use Button 0 for that.