將單選按鈕的值更改為文本輸入的值

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

這是一個在實際操作中進行演示的小提琴 。 您需要在驗證中添加新選項的值是一個數字，並且可以滿足您的任何約束條件。

請務必注意，根據html規范，id不能以數字開頭，實際上，它們必須以a-zA-Z范圍內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>