将表单值传递给JavaScript函数

时间:2013-01-31 11:58:52

标签: javascript

我已经在这里和网络上阅读了大量的帖子,我甚至有书籍涵盖了这种主观性,但我无法让它发挥作用。我只是无法获取函数来获取“RadioDrink”变量的值。我尝试了各种组合使用像下面这样的DOM方法,这里使用集合(this)和(形式)没有运气。 任何帮助将不胜感激。

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

======================这是我的代码。==================== ==

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

6 个答案:

答案 0 :(得分:0)

您应该检查广播组中的每个值&amp;用它代替。类似的东西:

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;
}

调用它以获取所选值。所以在你的情况下:

getCheckedRadio(document.forms.Drinks.RadioDrink);

答案 1 :(得分:0)

这将给出“Soup”复选框的值:

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

答案 2 :(得分:0)

你需要以不同的方式做到这一点。首先,您的DOM显示未定义的值。您可以向单选按钮添加不同的ID。你可以像下面这样做

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

答案 3 :(得分:0)

问题在于:

document.forms.Drinks.RadioDrink

返回对具有该名称的所有三个输入的类似数组的引用,它不返回对当前所选输入的引用。所以你不能只测试value属性。

最容易解释的方法是实现您想要做的是给单选按钮提供唯一的ID:

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

然后直接选择您要测试的那个:

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

答案 4 :(得分:0)

尝试下面的编码......它会帮助你.....

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

答案 5 :(得分:0)

无法获得无线电价值的正确方法。使用以下功能,也可以查看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
}