How to print the Value of a radio button in a javascript validation

connollyc4 · 09-20-2010, 03:41 AM

Hello All.

What my script does is if you do not select a radio button and you hit submit an error will pop up saying please select game1. this is taken from the name of the radio button.. How can i make it so it prints out the VALUES of the 2 radio buttons. end result should print please select Baltimore Ravens vs. Cincinnati Bengals rather than please select game1.

Code:

function isChecked(radgrp)
{
var i = radgrp.length;
do
if (radgrp[--i].checked)
return true;
while (i);
return false;
}

function validateTest(els)
{
var focus_me = null, msg = "";

if (!isChecked(els.game1))
{
msg += " Game #1\n";
focus_me = focus_me || els.game1[0];
}

if (!isChecked(els.game2))
{
msg += " Game #2\n";
focus_me = focus_me || els.game2[0];
}

if (!isChecked(els.game16))
{
msg += " Game #16\n";
focus_me = focus_me || els.game16[0];
}
if (msg != "")
{
 var prefix = "\n WARNING: The following Games(s) were not selected:\n\n";
var suffix = "\nClick OK to submit your picks anyway.\n\n";
var suffix = suffix + "\n Click CANCEL to correct your picks."
var ask = confirm(prefix + msg + suffix);
if (ask) {
 if (focus_me)
 focus_me.focus();
 return true;
 }
else{
 return false;
 }
}
}

Here is the radio button. If you dont select the radio button i want the javascript validation pop but to say "please select Baltimore Ravens vs. Cincinnati Bengals rather than game1 like it does now.

Code:

<INPUT TYPE=RADIO NAME="game1" VALUE="Baltimore Ravens">Baltimore Ravens<BR>

<INPUT TYPE=RADIO NAME="game1" VALUE="Cincinnati Bengals">Cincinnati Bengals<BR>

Thanks

Old Pedant · 09-20-2010, 03:56 AM

Have you never heard of indenting your code for readability?? Really, you will do yourself (and those reading your code) a big favor.

Changes are in red.

Code:

function isChecked(radgrp)
{
    for ( i = 0; i < radgrp.length; ++i )
    {
        if (radgrp[--i].checked) return true;
    }
    return false;
}

function pair(radgrp)
{
    return radgrp[0].value + " vs. " + radgrp[1].value;
}

function validateTest(els)
{
    var focus_me = null, msg = "";

    if (!isChecked(els.game1))
    {
        msg += pair(els.game1) + "\n";
        focus_me = focus_me || els.game1[0];
    }
    if (!isChecked(els.game2))
    {
        msg += pair(els.game2) + "\n";
        focus_me = focus_me || els.game2[0];
    }
    if (!isChecked(els.game16))
    {
        msg += pair(els.game16) + "\n";
        focus_me = focus_me || els.game16[0];
    }
    if (msg != "")
    {
        var prefix = "\n WARNING: The following Games(s) were not selected:\n\n";
        var suffix = "\nClick OK to submit your picks anyway.\n\n";
                   + "\n Click CANCEL to correct your picks."
        var ask = confirm(prefix + msg + suffix);
        if (ask) {
            if (focus_me)
            focus_me.focus();
            return true;
        } else{
            return false;
        }
    }
    // ??? return true, I would assume???
    return true;
}

Old Pedant · 09-20-2010, 04:02 AM

Incidentally, if you were only showing us *part* of the code...only games 1,2,16...and you really want to show *ALL* the games from 1 to 16, then do this:

Code:

function validateTest()
{
    var focus_me = null;
    var msg = "";
    var form = document.forms[0]; 
    
    for ( var game = 1; game <= 999999; ++game )
    {
        var rbg = form["game" + game];
        if ( rbg == null ) break; // no more games
        
        if ( ! rbg[0].checked && ! rbg[1].checked )
        {
            msg += rbg[0].value + " vs. " + rbg[1].value + "\n";
            focus_me = focus_me || rbg[0];
        }
    }
    if (msg != "")
    {
        var prefix = "\n WARNING: The following Games(s) were not selected:\n\n";
        var suffix = "\nClick OK to submit your picks anyway.\n\n";
                   + "\n Click CANCEL to correct your picks."
        var ask = confirm(prefix + msg + suffix);
        if (ask) {
            if (focus_me)
            focus_me.focus();
            return true;
        } else{
            return false;
        }
    }
    return true;
}

That actually will handle any number of consecutively numbered games, of course. The loop just stops when no set of numbered radio buttons are found.

I got rid of the functions since, with only two values per radio group, they really aren't needed.

connollyc4 · 09-20-2010, 04:27 AM

Thank You!

Your second post is even better. Works perfectly.