Reputation: 990
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
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
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
Upvotes: 0
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
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
Reputation: 2815
Try this:
$(document).on('click','input[type="radio"]', function(e){
$(document)find('#selectedquantity').val($(this).val());
});
Upvotes: 0