Question

I need to update a hidden field based on user selected button

Code:

<div id="bankRadioButtons">
<table>
  <tr><td><input type="radio" id="Bank1" name="bankRadioButtons" /><label for="Bank1">Bank1</label></td></tr>
  <tr><td><input type="radio" id="Bank2" name="bankRadioButtons" /><label for="Bank2">Bank2</label></td></tr>
  <tr><td><input type="radio" id="Bank3" name="bankRadioButtons" /><label for="Bank3">Bank3</label></td></tr>
</table>
</div>
<input type="hidden" name="selectedBank" value="" />

Javascript code:

$("#bankRadioButtons").buttonset();
$("#bankRadioButtons").buttonset().bind('click', function(event) {
  // I need to write code here to update the hidden field 'selectedBank' based on user selected bank radio button

}

Answer 1

Description

Give your radio buttons a value then you can use jQuery’s change() and val() methods.

jQuery.change() Bind an event handler to the "change" JavaScript event, or trigger that event on an element.

jQuery.val() Get the current value of the first element in the set of matched elements.

Check out my sample and this jsFiddle Demonstration

Sample

<div id="bankRadioButtons">
<table>
  <tr><td><input type="radio" id="Bank1" value="Bank1" name="bankRadioButtons" /><label for="Bank1">Bank1</label></td></tr>
  <tr><td><input type="radio" id="Bank2" value="Bank2" name="bankRadioButtons" /><label for="Bank2">Bank2</label></td></tr>
  <tr><td><input type="radio" id="Bank3" value="Bank3" name="bankRadioButtons" /><label for="Bank3">Bank3</label></td></tr>
</table>
</div>
<input type="hidden" name="selectedBank" value="" />

$("input[type='radio'][name='bankRadioButtons']").change(function(event) {
    $("input[type='hidden'][name='selectedBank']").val($(this).val());
});

More Information

• jQuery.change()
• jQuery.val()

Update

The following would will in better performance. Use class and the id attribute in html.

<div id="bankRadioButtons">
<table>
  <tr><td><input type="radio" id="Bank1" value="Bank1" name="bankRadioButtons" class="bankRadioButtons" /><label for="Bank1">Bank1</label></td></tr>
  <tr><td><input type="radio" id="Bank2" value="Bank2" name="bankRadioButtons" class="bankRadioButtons"/><label for="Bank2">Bank2</label></td></tr>
  <tr><td><input type="radio" id="Bank3" value="Bank3" name="bankRadioButtons" class="bankRadioButtons"/><label for="Bank3">Bank3</label></td></tr>
</table>
</div>
<input type="hidden" name="selectedBank" id="selectedBank" value="" />

$(".bankRadioButtons").change(function(event) {
    $("#selectedBank").val($(this).val());
});

Updated jsFiddle