0

我试图在更改不同的单选按钮时更改输入中的 value 属性（类型 radio）我想调用一个函数并更改以表单形式发送的值：

<table border ='1'>
    <tr>
        <th colspan='2'>Thank You</th>
    </tr>
    <tr> 
        <td>
            <input type='radio' name='Choice' value=5 onchange="changeAmount('5');">
        </td>
        <td>
            I
        </td>
    </tr>
    <tr>
        <td>
            <input type='radio' name='Choice' value=10 onchange="changeAmount('10');">
        </td>                            
        <td>
            $10 
        </td>
    </tr>
    <tr>
        <td>
            <input type='radio' name='Choice' value=20 onchange="changeAmount('20');">
        </td> 
        <td>
            $20
        </td>
    </tr>
</table>

<form action="insertPageHere" method="post" target="_top">   

function changeAmount(value){
    if (value == 5)
    document.write("<input type='hidden' name='amount' value='5'>");
    else if (value == 10)
    document.write("<input type='hidden' t' value='10'>");
    else
    document.write("<input type='hidden' name='t' value='20'>");

}
</script>


</form>

我试过用 php 做这个，我遇到了类似的问题，如果有人可以提前告诉我如何完成这项工作，那将不胜感激，谢谢。

4

2 回答 2

1

这正是表单的设计目的。没有理由使用 javascript 添加或更改隐藏的输入字段来传递此信息，因为如果将其放在表单标签之间，这将完全一样。

<form>
  <input type='radio' name='amount' value="5"> 5 <br/>
  <input type='radio' name='amount' value="10"> 10 <br/>
  <input type='radio' name='amount' value="20"> 20
</form>

附带说明：不鼓励使用表格进行标记，在这种情况下，也不需要。上面的代码将完全一样，如果需要，您可以为单选按钮添加边距，以使它们与 5、10 和 20 之间的间距更大。

于 2013-08-31T07:52:41.567 回答
0

我同意 Sumurai8 的观点——听起来你可能只是想把你的无线电输入放在一个表格中。

但是，如果有充分的理由说明情况并非如此，那么以下几行的内容如何（请参阅此jsFiddle 中的实际操作 - 请注意，JS 只是在脚本标记中附加到 HTML 中，并且还请注意我已经整理你的 HTML 一点）：

(function() {
    function changeAmount(element) {
        var amountElement = document.getElementById('amount');
        var amount = element.value;
        amountElement.value = amount;
    }

    var choices = document.getElementsByName('Choice');
    for (var i=0; i < choices.length; i++) {
        var choice = choices[i];
        choice.onchange = function() { changeAmount(this); }
    }
})();

您只需要在一个<script type="text/javascript">标签中，在所有 HTML（包括<form>jsFiddle 链接中显示的）下方。

于 2013-08-31T07:59:53.363 回答