Passing a form value to a JavaScript Function

Question

I have read through lots of postings here and around the net, and I even have books covering this subjective, but I just can't get it to work. I just can't get the Function to pick up the value of the "RadioDrink" variable. I have tried all sorts of combinations Using DOM methods like below and here using a collection (this) and (form) with no luck. Any help would be appreciated.

function ValDrink(form){
if (form.RadioDrink.value == "soup")
    {
    alert("Its soup OK!");
    return true; // OK
     }

======================here is my code.======================

<html>
<head>
<title>Test</title>

<script type="text/JavaScript">
<!--
function ValDrink()
{   
    if (document.forms.Drinks.RadioDrink.value == "soup")
    {
      alert("Its soup OK!");
      return true; // soup
    }
    else
    {
      alert("OK");
      return false; // not soup
    }
}
//-->
</script>

</head>

<body>
  <form method="post" id="Drinks" name="Drinks" onsubmit="return ValDrink()">
    <input type="radio" checked name="RadioDrink" value="Tea">Tea<br>
    <input type="radio" name="RadioDrink" value="Coffee">Coffee<br>
    <input type="radio" name="RadioDrink" value="Soup">Soup<br>
    <input type="checkbox" name="CheckMilk" value="Yes">Milk
    <input type="checkbox" name="CheckSugar" value="Yes">Sugar
    <br>
    <input type="submit" name="OKButton" value="Vend">
  </form>
</body>
</html>

loxxy · Answer 1 · 2013-01-31T12:11:26.450

You should check for each value in the radio group & use it instead. Something like :

function getCheckedRadio(radio_group) {
    for (var i = 0; i < radio_group.length; i++) {
        var button = radio_group[i];
        if (button.checked) {
            return button;
        }
    }
    return undefined;
}

Call it to get selected value. So In your case :

getCheckedRadio(document.forms.Drinks.RadioDrink);

score 0 · Answer 2 · answered Jan 31 '13 at 12:06

0

This will give the value of "Soup" checkbox:

document.forms["Drinks"]["RadioDrink"][0].checked

answered Jan 31 '13 at 12:06

amaters

2,266
2
24
44

score 0 · Answer 3 · answered Jan 31 '13 at 12:06

you need to do this in a different way. first of all your DOM is showing undefined value. you can add different ids to the radio buttons. you can do it like below

    <html>
<head>
<title>Test</title>

<script type="text/JavaScript">
<!--
function ValDrink()
{   
    if (document.getElementById("Rsoup").checked == true)
    {
    alert("its soup");
    return true; // soup
    }
    else
    {
    alert("its not soup");
    return false; // not soup
    }
}
//-->
</script>

</head>

<body>
<form method="post" id="Drinks" name="Drinks" onsubmit="return ValDrink()">
<input type="radio" checked name="RadioDrink" value="Tea">Tea<br>
<input type="radio" name="RadioDrink" value="Coffee">Coffee<br>
<input type="radio" name="RadioDrink" id="Rsoup" value="Soup">Soup<br>
<input type="checkbox" name="CheckMilk" value="Yes">Milk
<input type="checkbox" name="CheckSugar" value="Yes">Sugar
<br>
<input type="submit" name="OKButton" value="Vend">
</form>
</body>
</html>

score 0 · Answer 4 · answered Jan 31 '13 at 12:06

The problem is that this:

document.forms.Drinks.RadioDrink

returns an array-like reference to all three inputs with that name, it doesn't return a reference to the currently selected one. So you can't just test the value property.

The easiest to explain way to achieve what you want to do is to give the radio buttons unique ids:

<input type="radio" checked name="RadioDrink" id="RadioDrinkTea" value="Tea">Tea<br>
<input type="radio" name="RadioDrink" id="RadioDrinkCoffee" value="Coffee">Coffee<br>
<input type="radio" name="RadioDrink" id="RadioDrinkSoup" value="Soup">Soup<br>

And then directly select the one you want to test:

if (document.getElementById("RadioDrinkSoup").checked) {
    alert("It's soup OK!");
    return true; // soup
} else {
    alert("OK");
    return false; // not soup
}

score 0 · Answer 5 · answered Jan 31 '13 at 12:11

Try your coding like below... it will help you.....

<html>
<head>
<title>Test</title>

<script type="text/JavaScript">
<!--
function ValDrink() {
    var radios = document.getElementsByName('RadioDrink');
    var radioName;

    for (var i = 0, length = radios.length; i < length; i++) {
        if (radios[i].checked) {
            radioName = radios[i].value;
        }
    }
    if (radioName.toUpperCase() == "soup".toUpperCase())
    {
    alert("Its soup OK!");
    return true; // soup
    }
    else
    {
    alert("OK");
    return false; // not soup
    }
}
//-->
</script>

</head>

<body>
<form method="post" id="Drinks" name="Drinks" onsubmit="return ValDrink()">
<input type="radio" checked name="RadioDrink" value="Tea">Tea<br>
<input type="radio" name="RadioDrink" value="Coffee">Coffee<br>
<input type="radio" name="RadioDrink" value="Soup">Soup<br>
<input type="checkbox" name="CheckMilk" value="Yes">Milk
<input type="checkbox" name="CheckSugar" value="Yes">Sugar
<br>
<input type="submit" name="OKButton" value="Vend">
</form>

score 0 · Answer 6 · edited May 23 '17 at 12:27

Not a right way to get radios value. Use the following function, also can check this question

function ValDrink()
{   
    var radios =document.forms.Drinks.RadioDrink;

    for (var i = 0, length = radios.length; i < length; i++) {
        if (radios[i].checked && radios[i].value==="Soup") {
            alert("Its soup OK!"); // soup
            return true;
        }
    }
    alert("OK");
    return false; // not soup
}

Passing a form value to a JavaScript Function

6 Answers6