for each control in form

Discussion in 'Javascript' started by Rokinroj, Oct 10, 2007.

  1. Rokinroj

    Rokinroj Guest

    Hello to all,

    I have a form that I validate via javascript and have come across a
    bit of a problem with the radio buttons.

    In my main ValidateForm method after doing the usual checks for
    required fields and formating, I call out to a separate function to
    validate that all of the radio button controls have been answered (Yes
    or No) since I have not defaulted any of them.
    My requirement is to provide the radio name and the selected answer on
    FormPost so in order to achieve this it is my understanding that the
    radio buttons can not all share the same name.
    Also the radio buttons are dynamically switched between visible and
    not visible based on drop down selections on the form. This is being
    done by setting the dropdowns onchange event to call the function
    below.

    BTW, this all works great to this point. Just trying to provide all
    of the details.

    <code>
    <select name="interest1"
    onchange="setForm1Options(document.form1.interest1.options[document.form1.interest1.selectedIndex].value);"></
    select>
    </code>

    <code>
    function setForm1Options(chosenValue)
    {
    if(chosenValue == '12')
    {

    document.getElementById('trTableRow1').style.display='inline';
    document.getElementById('trTableRow2').style.display='none';
    document.getElementById('trTableRow3').style.display='none';
    }
    }
    </code>

    And the relevant html is as folows...

    <code>
    <table>
    <tr id="trTableRow1" style="display:none;">
    <td>
    <div class="formLabel">*Is this fubar?</div>
    <input type="radio" name="IsFubar" value="YES" /> Yes
    <input type="radio" name="IsFubar" value="NO" /> No
    </td>
    </tr>
    <tr id="trTableRow2" style="display:none;">
    <td>
    <div class="formLabel">*Was this fubar?</div>
    <input type="radio" name="WasFubar" value="YES" /> Yes
    <input type="radio" name="WasFubar" value="NO" /> No
    </td>
    </tr>
    <tr id="trTableRow3" style="display:none;">
    <td>
    <div class="formLabel">*Will this ever be fubar?</div>
    <input type="radio" name="WillBeFubar" value="YES" />
    Yes
    <input type="radio" name="WillBeFubar" value="NO" /> No
    </td>
    </tr>
    </table>
    </code>

    The form updates beautifully and instantly. This happens on several
    for several different "<tr>" tags and fires on several different
    dropdowns. So it always unknown what combination of selections will
    have created which combinations of radios.

    The problem is that since I don't know what radio buttons will be
    visible, and they don't share any common names I gather all of the
    elements on the form and check the element type via the javascript
    below.

    <code>
    function checkRadios(form)
    {
    var _allelements = form.elements;
    for(var i = 0 ; i < _allelements.length ; ++i)
    {
    if(_allelements.type == "radio")
    {
    var radiogroup = _allelements[_allelements.name];
    var itemchecked = false;
    for(var j = 0 ; j < radiogroup.length ; ++j)
    {
    if(radiogroup[j].checked)
    {
    itemchecked = true;
    break;
    }
    }
    if(!itemchecked)
    {
    alert("Please make a selection");
    if(_allelements.focus)
    _allelements.focus();
    return false;
    }
    }
    }
    return true;
    }
    </code>

    This also works well, unfortunately it works too well, as it in the
    example above this would return and validate against 6 radios,
    including the ones that the visitor can't even see.

    SO...

    Although this is very long and detailed explanation of my problem, the
    question (not the solution) is simple. Is there a way that I can
    validate against only the visible fields? A javascript solution is
    optimal, but at this point if it requires a slight redesign of the
    form I can live with that too.

    Thanks in advance for your help, and my apologies for the long
    rambling post.

    Thanks
    -R
     
    Rokinroj, Oct 10, 2007
    #1
    1. Advertising

  2. Rokinroj

    Rokinroj Guest

    I did come up with a solution.

    <code>

    var _allelements = form.elements;
    for(var i = 0 ; i < _allelements.length ; ++i)
    {
    if(_allelements.type == "radio")
    {
    var radiogroup = _allelements[_allelements.name];
    for(var j = 0 ; j < radiogroup.length ; ++j)
    {
    if (radiogroup[j].parentNode.parentNode.style.display !
    = 'none')
    {
    if(radiogroup[j].checked)
    {
    break;
    }
    else
    {
    alert("Please make a selection");
    if(_allelements.focus)
    _allelements.focus();
    return false;
    }
    }
    }
    }
    }
    return true;

    </code>

    Hopefully this can help somebody.

    -R
     
    Rokinroj, Oct 11, 2007
    #2
    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. John Blair
    Replies:
    1
    Views:
    421
    Eliyahu Goldin
    Aug 3, 2005
  2. Tjerk Wolterink

    xsl:for-each for each 3 elements problem

    Tjerk Wolterink, Nov 3, 2004, in forum: XML
    Replies:
    3
    Views:
    441
    Tjerk Wolterink
    Nov 3, 2004
  3. Pat Maddox
    Replies:
    6
    Views:
    162
    Marcin Mielżyński
    Jan 20, 2006
  4. Igor Nn
    Replies:
    7
    Views:
    445
    Johnny Morrice
    May 28, 2011
  5. PerlFAQ Server
    Replies:
    0
    Views:
    149
    PerlFAQ Server
    Jan 26, 2011
Loading...

Share This Page