Syntax for resetting radio button to initial value?

Discussion in 'Javascript' started by Garry Jones, Oct 16, 2011.

  1. Garry Jones

    Garry Jones Guest

    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
     
    Garry Jones, Oct 16, 2011
    #1
    1. Advertising

  2. 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/
     
    Jukka K. Korpela, Oct 16, 2011
    #2
    1. Advertising

  3. On 10/16/2011 3:16 PM, Garry Jones wrote:
    > 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


    --
    Matt McDonald: Web/Flash Developer; Edmonton, Alberta, Canada
     
    Matt McDonald, Oct 16, 2011
    #3
  4. Garry Jones

    dhtml Guest

    On Oct 16, 2:46 pm, "Jukka K. Korpela" <> 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
     
    dhtml, Oct 17, 2011
    #4
  5. Garry Jones

    dhtml Guest

    On Oct 16, 3:49 pm, Matt McDonald <> wrote:
    > On 10/16/2011 3:16 PM, Garry Jones wrote:
    >
    >
    >
    >
    >
    >
    >
    >
    >
    > > 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.
    --
    Garrett
     
    dhtml, Oct 17, 2011
    #5
  6. 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.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
    --
    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$>
     
    Thomas 'PointedEars' Lahn, Oct 17, 2011
    #6
  7. 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$>
     
    Thomas 'PointedEars' Lahn, Oct 17, 2011
    #7
  8. 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$>
     
    Thomas 'PointedEars' Lahn, Oct 17, 2011
    #8
  9. 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
     
    Denis McMahon, Oct 17, 2011
    #9
  10. 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
     
    Denis McMahon, Oct 17, 2011
    #10
  11. Denis McMahon wrote:

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


    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:
    <http://www.useit.com/alertbox/20000416.html>

    > 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
    --
    realism: HTML 4.01 Strict
    evangelism: XHTML 1.0 Strict
    madness: XHTML 1.1 as application/xhtml+xml
    -- Bjoern Hoehrmann
     
    Thomas 'PointedEars' Lahn, Oct 17, 2011
    #11
  12. Denis McMahon wrote:

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


    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
    --
    Danny Goodman's books are out of date and teach practices that are
    positively harmful for cross-browser scripting.
    -- Richard Cornford, cljs, <cife6q$253$1$> (2004)
     
    Thomas 'PointedEars' Lahn, Oct 17, 2011
    #12
  13. Garry Jones

    Garry Jones Guest

    "Denis McMahon" wrote in message
    news:4e9c0e71$0$28585$...

    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
     
    Garry Jones, Oct 17, 2011
    #13
  14. Garry Jones wrote:

    > "Denis McMahon" wrote in message
    > news:4e9c0e71$0$28585$...


    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
    --
    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$>
     
    Thomas 'PointedEars' Lahn, Oct 18, 2011
    #14
  15. In comp.lang.javascript message <j7fhjv$btu$>, Sun, 16
    Oct 2011 23:16:48, Garry Jones <> posted:

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

    --
    (c) John Stockton, nr London, UK. ?@merlyn.demon.co.uk Turnpike 6.05 WinXP.
    Web <http://www.merlyn.demon.co.uk/> - FAQ-type topics, acronyms, and links.
    Command-prompt MiniTrue is useful for viewing/searching/altering files. Free,
    DOS/Win/UNIX now 2.0.6; see <URL:http://www.merlyn.demon.co.uk/pc-links.htm>.
     
    Dr J R Stockton, Oct 18, 2011
    #15
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Scott D Johnson
    Replies:
    1
    Views:
    1,112
    Scott D Johnson
    Sep 27, 2006
  2. mazdotnet
    Replies:
    0
    Views:
    635
    mazdotnet
    Feb 27, 2007
  3. Hiten
    Replies:
    1
    Views:
    690
    Vidar Petursson
    May 26, 2004
  4. BobbyMy
    Replies:
    0
    Views:
    212
    BobbyMy
    Aug 27, 2005
  5. ST

    Syntax to populate a radio button list and Label?

    ST, Sep 8, 2006, in forum: ASP .Net Web Controls
    Replies:
    1
    Views:
    194
Loading...

Share This Page