Question

我有这个带有单选按钮的代码。我想获取文本框的值并将其设置为所选单选按钮的值。

HTML

<form action="add.php" id="registration" method="post" name='registration'
onsubmit="return formValidation();">
    Monthly amount of<br>
    <input id="300" name="amounts" type="radio" value="300"><label for="300">P
    300.00</label><br>
    <input id="amntother" name="amounts" type="radio" value="">P
    <input disabled="disabled" id="otherAmount" name="amntotherSpecify" type=
    "text" value=""><label for="amntother">(please specify)</label><br>
    <button name="submit" style="width:305px" type="submit" value=
    "Submit">ADD</button>
</form>

的Javascript

window.onload = function() {
    var promised = document.getElementsByName("amounts");
    for (var i = 0; i < promised.length; i++) {
        promised[i].onclick = function() {
            var rads = this.form[this.name];
            for (var i = 0; i < rads.length; i++) {
                var textField = this.form[rads[i].value.toLowerCase() + "Amount"];
                if (textField) textField.disabled = !rads[i].checked;
            }
        }
    }
}

Answer 1

    <form form="view" name='registration' method="POST"  action="add.php" onSubmit="return formValidation();">  
    Monthly amount of</br>
    <input type="radio" name="amounts" id="300" value="300"  ><label for="300">P 300.00</label><br/>
    <input type="radio" name="amounts" id="amntother" value=""   >P<br/>
    <input type="text" name="amntotherSpecify" id="otherAmount" value=""  onchange="addValueToRadioBtn();"/><label for="amntother">(please specify)</label><br/>
<button type="submit" name="submit" value="Submit" style="width:305px">ADD</button>

<script>  
function addValueToRadioBtn() {
    if (document.getElementById("amntother").checked == true){
        document.getElementById("amntother").value = document.getElementById("otherAmount").value;
    }
    //added an alert box just to test that the value has been updated
    alert(document.getElementById("amntother").value);
} 

</script>

我已删除已禁用的值，以便在更改此值时输入值，如果选择了单选按钮（otheramount），则其他金额值将反映在文本框中输入的值。

请注意，如果禁用该文本，则无法用户添加任何值。如果这不是你想要的，你可以更详细地解释如何填充文本框以及你想要实现的更多内容。

无论如何希望这个脚本有帮助

Answer 2

您没有指定formValidation或add.php。如果您只想添加指定的值作为选项，则不需要回调服务器来执行此操作。只需使用新选项更新表单：

HTML

<form form="view" name='registration' method="post" action="add.php" onsubmit="return formValidation();">  
    <div id="amountOptions">
        Monthly amount of</br>
        <input type="radio" name="amounts" id="opt300" value="300" ><label for="opt300">P 300.00</label><br/>
    </div>
    <input type="text" name="amntotherSpecify" id="newvalue" value=""/>
    <input type="button" id="btnNewValue" value="Specify your own amount"/>
</form>

的JavaScript

var btnNewValue = document.getElementById('btnNewValue');
btnNewValue.addEventListener('click', function()
{
    var div = document.getElementById('amountOptions');
    var newAmount = document.forms[0].amntotherSpecify.value;

    var optCheck = document.getElementById('opt'+newAmount);
    if(optCheck !== null)
        return;

    var newopt = document.createElement('input');
    newopt.type = 'radio';
    newopt.id = 'opt'+newAmount;
    newopt.name = 'amounts';
    newopt.value = newAmount;

    var newoptLabel = document.createElement('label');
    newoptLabel.for = newopt.id;
    newoptLabel.innerHTML = 'P ' + newAmount;

    var br = document.createElement('br');

    div.appendChild(newopt);
    div.appendChild(newoptLabel);
    div.appendChild(br);

    var newAmount = document.forms[0].amntotherSpecify.value = '';
});

在这里a fiddle展示它的实际效果。您需要添加验证，即新选项的值是一个数字，并且符合您的任何限制。

请注意，根据html规范，ID不能以数字开头，实际上它们必须以a-zA-Z范围内的字符开头。

Answer 3

这个选项怎么样......

轻微修改HTML - 额外按钮，额外标签标签

HTML

<form form="view" name='registration' method="POST"  action="add.php" onSubmit="return formValidation();">  
    Monthly amount of</br>
    <input type="radio" name="amounts" id="300" value="300" ><label for="300">P 300.00</label><br/>
  <input type="radio" name="amounts" id="amntother" value="" ><label id="labelamntother" for="amntother">P</label>
    <input type="text" name="amntotherSpecify" id="otherAmount" value=""  /><label for="amntother">(please specify)</label><br/>
    <button type="button" name="reset" value="Reset Value" style="width:305px" onclick="location.reload(true)">Reset Radio Button Value</button>
<button type="submit" name="submit" value="Submit" style="width:305px">ADD</button>
    </form>

的Javascript

   <script>
    document.getElementById("otherAmount").onkeyup = function() {
       document.getElementById("labelamntother").innerHTML ="P " + this.value;   
    }
     </script>

将单选按钮值更改为文本输入的值

3 个答案:

HTML

的JavaScript