Groups | Search | Server Info | Keyboard shortcuts | Login | Register [http] [https] [nntp] [nntps]

Groups > comp.lang.javascript > #7500

Re: Syntax for resetting radio button to initial value?

Followups directed to: comp.lang.javascript

Show key headers only | View raw

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>

Back to comp.lang.javascript | Previous | Next — Previous in thread | Next in thread | Find similar

Thread

Syntax for resetting radio button to initial value? "Garry Jones" <garry@garryjones.se> - 2011-10-16 23:16 +0200
  Re: Syntax for resetting radio button to initial value? "Jukka K. Korpela" <jkorpela@cs.tut.fi> - 2011-10-17 00:46 +0300
    Re: Syntax for resetting radio button to initial value? dhtml <dhtmlkitchen@gmail.com> - 2011-10-16 22:56 -0700
  Re: Syntax for resetting radio button to initial value? Matt McDonald <matt@fortybelow.ca> - 2011-10-16 16:49 -0600
    Re: Syntax for resetting radio button to initial value? dhtml <dhtmlkitchen@gmail.com> - 2011-10-16 22:57 -0700
    Re: Syntax for resetting radio button to initial value? Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2011-10-17 09:56 +0200
  Re: Syntax for resetting radio button to initial value? Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2011-10-17 09:51 +0200
  Re: Syntax for resetting radio button to initial value? Denis McMahon <denismfmcmahon@gmail.com> - 2011-10-17 10:56 +0000
    Re: Syntax for resetting radio button to initial value? Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2011-10-17 14:32 +0200
  Re: Syntax for resetting radio button to initial value? Denis McMahon <denismfmcmahon@gmail.com> - 2011-10-17 11:16 +0000
    Re: Syntax for resetting radio button to initial value? Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2011-10-17 14:45 +0200
    Re: Syntax for resetting radio button to initial value? "Garry Jones" <garry@garryjones.se> - 2011-10-17 20:31 +0200
      Re: Syntax for resetting radio button to initial value? Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2011-10-18 10:45 +0200
  Re: Syntax for resetting radio button to initial value? Dr J R Stockton <reply1142@merlyn.demon.co.uk> - 2011-10-18 20:50 +0100

csiph-web