change field value when select radio buttons

Question

I want to change the value of hidden input field when radio buttons selected :

    <input type="radio" name="r1" value="10" />10
    <br/>
    <input type="radio" name="r1" value="45" />45
    <br/>
    <input type="hidden" name="sum" value="" />

for example when user click on one the buttons the value of hidden field change to that value.

Answer 1

hook into the onclick event for the radio button "r1". Normally I'd suggest the onchange event but in IE it isn't fired until the user "blurs" the radio button.

If you are using a framework like jQuery, hook in the events in a nice unobtrusive manner... but if you want a quick n dirty solution, just add the events inline.

<input type="radio" name="r1" value="10" onclick="doIt(this);"/>10
<br/>
<input type="radio" name="r1" value="45" onclick="doIt(this);"/>45
<br/>
<input type="hidden" name="sum" value="" />

<script>
  function doIt(obj){
    //alert('my value is now: ' + obj.value);
    obj.form.elements['sum'].value = obj.value;//set hidden field to radio value
  }
</script>

Answer 2

You can try for example

<input type="radio" id="radio1r1" name="r1" value="10" />10
<br/>
<input type="radio" id="radio2r1" name="r1" value="45" />45
<br/>
<input type="hidden" name="sum" value="" />

jQuery("input[id^='radio']").click(function() {
    jQuery("input[name='sum']").val(jQuery(this).val());
}

So then when user click on each radio we handle it by various id with same start.

Answer 3

Use the onClick property:

<input type="radio" name="r1" value="10" onClick="document.getElementById('hidfield').value=this.value"/>10
    <br/>
    <input type="radio" name="r1" value="45" onClick="document.getElementById('hidfield').value=this.value"/>
    45
    <br/>
    <input type="hidden" name="sum" value="" id="hidfield" />

Answer 4

sure. Using jQeury it would be:

$(":radio").click(function () {
    var inputValue = $this.val();
    $(":hidden[name='sum']").val() = inputValue;

$(":hidden[name='sum']").name() = "lalala"; });

I've not double checked that code so it might need a little tweeking.

To get jQuery start: http://jquery.com/

I hope this helps!