CODEWITHSUNDEEP
javascriptjqueryjquery-ui
nagendra
nagendra

Reputation: 593

jquery ui buttonset to select a checked radio button

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

}

Upvotes: 2

Views: 6874

Answers (3)

dknaack
dknaack

Reputation: 60468

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

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

Upvotes: 4

ParPar
ParPar

Reputation: 7549

Try this:

var value = $("input[@name=bankRadioButtons]:checked").val();
$("input[@name=selectedBank]").val(value);

Good-Luck !

Upvotes: 1

TwTw
TwTw

Reputation: 547

You can do:

$("#bankRadioButtons").buttonset();
$("#bankRadioButtons").buttonset().bind('click', function(event) {
 switch(this.id)
    {
      case "Bank1" : $("#selectedBank").val("Bank1"); 
       break;  // and then case "Bank2" etc.
    }

}

Upvotes: 2

Related Questions