CODEWITHSUNDEEP
jquery
Alexander Hein
Alexander Hein

Reputation: 990

Get value of selected radio-button?

How do I get the value of the selected radio-button and output it inside the value of the hidden input field "selectedquantity"?

<div class="quantityselect">
  <input type="radio" id="quantity0" name="radiobutton" value="50">
  <label for="quantity0">
  </label>
  <input type="radio" id="quantity1" name="radiobutton" value="100">
  <label for="quantity1">
  </label>
</div>


<input id="selectedquantity" type="hidden" name="quantity" value="">

Upvotes: 0

Views: 178

Answers (5)

OptimusCrime
OptimusCrime

Reputation: 14863

To set the checked value in your hidden value, you could use the following code:

$('#selectedquantity').val($("[name='radiobutton']:checked").val());

Wrap it in a change event, and it should look something like this:

$(document).ready(function () {
  $("[name='radiobutton']").change(function() {
    $('#selectedquantity').val($("[name='radiobutton']:checked").val());
  });
});

You can see a demo here: https://jsfiddle.net/k5y9gyf3/3/

Upvotes: 1

Nishant123
Nishant123

Reputation: 1966

Here you go! Use input[name=radiobutton] 

$('input[name=radiobutton]').click(function(){
    //alert($(this).val());
  $('#selectedquantity').val($(this).val());
  alert($('#selectedquantity').val());
});

Whichever option you select will get stored in the hidden field

Here is the demo

Upvotes: 0

Jayesh Chitroda
Jayesh Chitroda

Reputation: 5039

Try:

1) Use .change() event to check when radio button clicked

2) $('input[name=radiobutton]:checked').val() to get the selected value of radio button

 $('.quantityselect input').on('change', function() {
       alert($('input[name=radiobutton]:checked').val()); 
 });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="quantityselect">
  <input type="radio" id="quantity0" name="radiobutton" value="50">
  <label for="quantity0">
  </label>
  <input type="radio" id="quantity1" name="radiobutton" value="100">
  <label for="quantity1">
  </label>
</div>

Upvotes: 1

Luke
Luke

Reputation: 4063

First you want to attach a change event handler to the radio buttons. Then, when it is called, you want to grab the value of the radio and set it as the value of the input. The selectors I've used might need to change, but the logic is there.

$(document).ready(function() {
  
  $('input[type="radio"]').change(function() {
    $('#selectedquantity').val($(this).val());
  });
  
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="quantityselect">
  <input type="radio" id="quantity0" name="radiobutton" value="50">
  <label for="quantity0">
  </label>
  <input type="radio" id="quantity1" name="radiobutton" value="100">
  <label for="quantity1">
  </label>
</div>

<!-- un-hidden for demonstration -->
<input id="selectedquantity" type="text" name="quantity" value="">

Upvotes: 2

Think Different
Think Different

Reputation: 2815

Try this:

$(document).on('click','input[type="radio"]', function(e){
    $(document)find('#selectedquantity').val($(this).val());
});

Upvotes: 0

Related Questions