无需提交表单即可点击单选按钮上的值

时间:2016-07-19 15:42:16

标签: javascript html forms radio-button submit

我在链接上看到了添加复选框的功能,但我需要立即添加单选按钮以及任何类型的编码。

http://www.madirish.net/tech.php?section=1&article=7

我的表格如下:

    <form action="orders.php" method="post" name="Reservar" target="_self">

        <table width="800" border="0">
        <?php
        foreach ($rows as $row) {
        ?>
        <tr>
         <td><input name="platofuerte" type="radio" onClick="checkTotal()" value="<?php echo $row['Producto_Precio']; ?>" />
         </td>
         <td><input name="platofuerte1" type="hidden" value="<?php echo $row['Producto_ID']; ?>" /><img src='<?php echo htmlspecialchars($row['Producto_Imagen']); ?>' alt='image' name="imagen" id="imagen" />
         </td>
         <td width=""><input name="" type="label" value='<?php echo $row['Producto_Nombre']; ?>' />
         </td>
         <td width=""><input name="" type="label" value='<?php echo $row['Producto_Descripcion']; ?>' />
        </td>
        <td width=""><input name="price" type="label" value='$<?php echo $row['Producto_Precio']; ?>' />
        </td></tr>
        </table>

                <table width="800" border="0">

                        <td><input name="bebida" type="radio" onClick="checkTotal()" value="<?php echo $row['Producto_Precio']; ?>" />

                        </td>

                         <td><input name="bebida1" type="hidden" value="<?php echo $row['Producto_ID']; ?>" /><img src='<?php echo htmlspecialchars($row['Producto_Imagen']); ?>' alt='image' name="imagen" id="imagen" />

                        </td>

                        <td width=""><input name="" type="label" value='<?php echo $row['Producto_Nombre']; ?>' />

                        </td>

                        <td width=""><input name="" type="label" value='<?php echo $row['Producto_Descripcion']; ?>' />

                        </td>

                        <td width=""><input name="price" type="label" value='$<?php echo $row['Producto_Precio']; ?>' />

                        </td>

                        </tr>

                        <?php

                    /*}*/

                   } ?>

                </table>


                <table width="800" border="0">


                        <td><input name="postre" type="radio" onClick="checkTotal()" value="<?php echo $row['Producto_Precio']; ?>" />

                        </td>

                         <td><input name="postre1" type="hidden" value="<?php echo $row['Producto_ID']; ?>" /><img src='<?php echo htmlspecialchars($row['Producto_Imagen']); ?>' alt='image' name="imagen" id="imagen" />

                        </td>

                        <td width=""><input name="" type="label" value='<?php echo $row['Producto_Nombre']; ?>' />

                        </td>

                        <td width=""><input name="" type="label" value='<?php echo $row['Producto_Descripcion']; ?>' />

                        </td>

                        <td width=""><input name="" type="label" value='$<?php echo $row['Producto_Precio']; ?>' />

</td>
</tr>
</table>
<table width="800" border="0">
<tr>
<td><input name="aperitivo" type="radio" onClick="checkTotal()" value="<?php echo $row['Producto_Precio']; ?>" />
</td>
<td><input name="aperitivo1" type="hidden" value="<?php echo $row['Producto_ID']; ?>" /><img src='<?php echo htmlspecialchars($row['Producto_Imagen']); ?>' alt='image' name="imagen" id="imagen" />
 </td>
 <td width=""><input name="" type="label" value='<?php echo $row['Producto_Nombre']; ?>' />
</td>
<td width=""><input name="" type="label" value='<?php echo $row['Producto_Descripcion']; ?>' />
</td>
<td width=""><input name="" type="label" value='$<?php echo $row['Producto_Precio']; ?>' />
        </td>
        </tr>
 </table>
<input type="submit" name="Reservar" id="Reservar" value="Reservar" />
            </p>
            <p>&nbsp;</p>
            <p>&nbsp;</p>


           <input type="text" size="2" name="total" value="0"/>
        </form>

在最后一个输入文本框中,理论上显示所选单选按钮的总数。我怎样才能做到这一点。这个支持的代码用于一组具有相同名称的无线电和相邻文本行中的单选按钮

我的php页面运行单选按钮组名称的查询,所以每组最多有4个项目。我需要将从每个组中选出的那些无线电的总数加起来。

复选框的建议脚本如下:

<script type="text/javascript">
    function checkTotal() {
        document.listForm.total.value = '';
        var sum = 0;
        for (i=0;i<document.listForm.choice.length;i++) {
          if (document.listForm.choice[i].checked) {
            sum = sum + parseInt(document.listForm.choice[i].value);
          }
        }
        document.listForm.total.value = sum;
    }
</script>

2 个答案:

答案 0 :(得分:0)

我不知道我是否理解你的问题,但我认为它可以解决这个问题:

在单选按钮上,您可以使用此功能将元素作为参数传递给您的函数。

<td><input name="bebida" type="radio" onclick="checkTotal(this)" value="2" />

现在,checkTotal函数将接收元素,您可以根据需要对其进行操作。

checkTotal = function (e) {
    console.log(e.value);
}

根据您想要做什么,您可以使用onclick或onchange。不同之处在于,即使已经选择了收音机,onclick仍然可以正常工作。

希望它能解决你的问题。

答案 1 :(得分:0)

我通过为每组无线电创建一个组然后添加组并在空文本输入框中显示总数来解决它。