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

Change radio button value to the value of text input

本文关键字：文本 输入 单选按钮      更新时间：2023-09-26

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

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

    <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)被选中，那么其他金额值将反映在文本框中输入的值。

只是要注意，如果你禁用文本，那么没有用户将能够添加一个值。如果这不是你想要的，你能更详细地解释一下文本框将如何填充，以及你想要达到的效果吗?

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

不指定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 = '';
});

这里有一个小提琴来演示它的实际操作。你需要在验证中添加新选项的值是一个数字，并且符合你的任何约束。

需要注意的是，根据html规范，id不能以数字开头，事实上，它们必须以a-zA-Z范围内的字符开头。

这个选项怎么样?

对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>
相关文章：