CODEWITHSUNDEEP
javascripthtmlradio-buttonhidden-field
datisdesign
datisdesign

Reputation: 3195

change field value when select radio buttons

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.

Upvotes: 6

Views: 34388

Answers (4)

Dorjan
Dorjan

Reputation: 2037

Using jQuery 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 tweaking.

Upvotes: 1

mck89
mck89

Reputation: 294

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

Upvotes: 13

Alexey Ogarkov
Alexey Ogarkov

Reputation: 2916

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.

Upvotes: 1

scunliffe
scunliffe

Reputation: 63588

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>

Upvotes: -1

Related Questions