Syntax for resetting radio button to initial value?
 

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[i].checked) {
elements[i].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[i][0]

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

Garry Jones
Expat in Sweden

Re: Syntax for resetting radio button to initial value?
 

17.10.2011 0:16, Garry Jones wrote:

> 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.

--
Yucca, http://www.cs.tut.fi/~jkorpela/

Re: Syntax for resetting radio button to initial value?
 

On 10/16/2011 3:16 PM, Garry Jones wrote:
> The bit I am stuck with is
>
> if (elements[i].checked) {
> elements[i].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-HTM...ml#ID-20509171
[1]: http://www.w3.org/TR/DOM-Level-2-HTM...ml#ID-26091157


--
Matt McDonald: Web/Flash Developer; Edmonton, Alberta, Canada

Re: Syntax for resetting radio button to initial value?
 

On Oct 16, 2:46*pm, "Jukka K. Korpela" <jkorp...@cs.tut.fi> wrote:
> 17.10.2011 0:16, Garry Jones wrote:
>
> > 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.
>
A URL can't describe a problem. The problem should be stated in the
message text and subject.

> > This is the entire function
>
> 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.
--
Garrett

Re: Syntax for resetting radio button to initial value?
 

On Oct 16, 3:49*pm, Matt McDonald <m...@fortybelow.ca> wrote:
> On 10/16/2011 3:16 PM, Garry Jones wrote:
>
>
>
>
>
>
>
>
>
> > The bit I am stuck with is
>
> > if (elements[i].checked) {
> > elements[i].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.
--
Garrett

Re: Syntax for resetting radio button to initial value?
 

Garry Jones wrote:

> 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[i].checked) {
> elements[i].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[i][0]

No, as you are not using a *name* for `i' (but a number), there is no
`elements[i][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[i].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[i].value = "";

The DRY programming principle would suggest that you store the value of
`elements[i]' 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[i];
…
element.value = "";

> break;
> case "radio":
> case "checkbox":
> if (elements[i].checked) {
> elements[i].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
--
Prototype.js was written by people who don't know javascript for people
who don't know javascript. People who don't know javascript are not
the best source of advice on designing systems that use javascript.
-- Richard Cornford, cljs, <f806at$ail$1$8300dec7@news.demon.co.uk>

Re: Syntax for resetting radio button to initial value?
 

Matt McDonald wrote:

> On 10/16/2011 3:16 PM, Garry Jones wrote:
>> 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
--
Prototype.js was written by people who don't know javascript for people
who don't know javascript. People who don't know javascript are not
the best source of advice on designing systems that use javascript.
-- Richard Cornford, cljs, <f806at$ail$1$8300dec7@news.demon.co.uk>

Re: Syntax for resetting radio button to initial value?
 

Matt McDonald wrote:

> On 10/16/2011 3:16 PM, Garry Jones wrote:
>> 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
--
Prototype.js was written by people who don't know javascript for people
who don't know javascript. People who don't know javascript are not
the best source of advice on designing systems that use javascript.
-- Richard Cornford, cljs, <f806at$ail$1$8300dec7@news.demon.co.uk>

Re: Syntax for resetting radio button to initial value?
 

On Sun, 16 Oct 2011 23:16:48 +0200, Garry Jones wrote:

> 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

Re: Syntax for resetting radio button to initial value?
 

On Sun, 16 Oct 2011 23:16:48 +0200, Garry Jones wrote:

> 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