Copy radio value using its ID to insert into input as value using JavaScript

Question

I have some HTML code as follows:

<input name="bid" type="radio" value="1" id="1234"/>
<input name="bid" type="radio" value="2" id="5678"/>
<input type="text" id="paymount" name="paymount" value=""/>

Desired functionality:

When radio=1 is checked, the paymount field value will show as 1234. When radio=2 is checked, the paymount field value will show as 5678.

I have found posts on Stack Overflow, but a lot of them are related to hiding a text field.

Answer 1

Use change event handler for listening to the event.

// use `[].slice.call(document.querySelectorAll('[name="bid"]'))
// for older browser to covert NodeList to Array

// although check polyfill option of `ArrayforEach` for older browser
// or use simple `for` or `while` loop for iterating

// get all radio with the name,covert NodeList to array and iterate
Array.from(document.querySelectorAll('[name="bid"]')).forEach(function(ele) {
  // add event handler to the element
  ele.addEventListener('change', function() {
    // update value of the input element
    document.getElementById('paymount').value = this.id;
    // if you are used `data-id="value" attribute instead of `id`
    // then get the value using `this.dataset.id`
  });
});

<input name="bid" type="radio" value="1" id="1234" />
<input name="bid" type="radio" value="2" id="5678" />
<input type="text" id="paymount" name="paymount" value="" />

---

FYI : Use custom data-* attribute for storing the corresponding value purpose of id attribute is for uniquely identifying an element. The custom data-* attribute value can be retrieved from dataset property of the element.

Answer 2

<form name="radioForm">
    <input name="bid" type="radio" value="1" id="1234"/>
    <input name="bid" type="radio" value="2" id="5678"/>
    <input type="text" id="paymount" name="paymount" value=""/>
</form>     

<script type="text/javascript">
    var radio = document.radioForm.bid,
        input = document.getElementById('paymount');

    for(var i = 0; i < radio.length; i++) {
        radio[i].onclick = function() {            
            input.value = this.id;
        };
    }
</script>

jsFiddle

Answer 3

I am not sure if this the best solution, but the following is working as you need.

var inputs = document.querySelectorAll('input[name="bid"]'),
    paymount = document.getElementById('paymount');

// loop over element, and add event listener
for (var i = 0; i < inputs.length; i++) {
  inputs[i].addEventListener("change", onChange);
}
// callback 
function onChange(){
  paymount.value = this.id; // change paymount value to the selected radio id
}

<input name="bid" type="radio" value="1" id="1234"/>
<input name="bid" type="radio" value="2" id="5678"/>
<input type="text" id="paymount" name="paymount" value=""/>

Answer 4

<script>
    function getradio(i)
    {
        document.getElementById("paymount").value=i;
    }
</script>

<input name="bid" type="radio" value="1" id="1234" onclick="getradio(1234)"/>
<input name="bid" type="radio" value="2" id="5678" onclick="getradio(5678)"/>

<input type="text" id="paymount" name="paymount"/>

You can use JavaScript and call a function by using the onclick event on a radio button and pass the desired value.