current community

your communities

more stack exchange communities

company blog
Stack Exchange Inbox Reputation and Badges
tour help
up vote 9 down vote favorite

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.

share|improve this question
4  
you should consider using a different attribute than id for storing the value since id values starting with a number are prohibited: developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/‌​id web author must not use it to convey any information – Joshua 18 hours ago
    
any other suggestion? thank you. – Swee Hong 16 hours ago
    
you could either use a semantic id, like paymount-low and paymount-high and use the value for the numbers, or you define an attribute like data-paymount and store the numbers there. – Joshua 16 hours ago
    
@Joshua Slight nit pick: in HTML5 all-numeric IDs are valid. – Phylogenesis 14 hours ago
up vote 5 down vote accepted 
<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

share|improve this answer
    
Hi, thank's for your awnser, but the payment value should be radio id, not radio value . – Swee Hong 21 hours ago
up vote 17 down vote

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.

share|improve this answer
up vote 3 down vote

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=""/>

share|improve this answer
up vote 1 down vote 
<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.

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.