CODEWITHSUNDEEP
javascripthtmlradio-button
user3146700
user3146700

Reputation: 87

Change radio button value to the value of text input

I have this code which has a radio button. I want to get the value of the text box and set it as the value of the selected radio button.

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

Upvotes: 0

Views: 3719

Answers (3)

user1786058
user1786058

Reputation:

how about this option...

Slight modification to HTML - extra button, extra label tag

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>

Upvotes: 0

Matt Ellen
Matt Ellen

Reputation: 11612

You don't specify formValidation or add.php. If all you want to do is add the specified value as an option, you don't need to call back to the server to do that. Just update the form with the new option:

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

Here's a fiddle to demonstrate it in action. You'll want to add in validation that the new option's value is a number and fits whatever constraints you have.

It's important that you note that according to the html spec, ids cannot start with a number, in fact they must start with a character in the range a-zA-Z.

Upvotes: 0

user2029541
user2029541

Reputation: 666

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

I have removed the disabled value so that a value can be entered, on change of this value and if the radio button (otheramount) is selected then other amount value will reflect the value that was entered in the textbox.

Just to note that if you disable the text then no user will be able to add a value. If this isn't what you are looking for could you explain in more detail as to how the textbox will be populated and more in what you are trying to achieve.

Anyway hope this script helps

Upvotes: 1

Related Questions