javascript - Dynamically getting a checked input's value and send with AJAX -

i'll start of telling i'm using bootstrap 3 , button system radio buttons:

so whichever of these buttons clicked, other button unclicked.
i'm struggling getting value of button checked , send through ajax call php script. problem pure jquery/javascript though, i've been trying alert() correct value, can't there.

so problem occurs follow (demo try):

• i click 1 button
• i alert value

i wrong result each time. when click 130 110, continue 160 , 130 , on. i'm 1 step back.

in real world project, need take value , send ajax call can determine based on number in php script.
way tried create js object like:

var selected_thumbwidth = { width: 110 }; 

and change value this:

$('.thumb-sizes .btn').click(function() {     selected_thumbwidth.thumbwidth = $('.thumb-sizes .active').children().val(); }); 

then alerting outside click callback gives me results described above. why selecting .active class? well, whenever button clicked, .active class shifts button, making pressed. that's bootstrap.

i want able take selected_thumbwidth.thumbwidth , put in data option of $.ajax, guess irrelevant mention.

this how html looks like:

<div class="options">     <span class="glyphicon glyphicon-resize-small valign-middle pointer resize-toggle" title="resize image on fly size of choice. proportions kept."></span>      <span class="glyphicon glyphicon-adjust valign-middle pointer thumb-toggle" title="change thumbnail size of image. sizes measured in pixels. proportions kept."></span>      <div class="hidden thumb-options">         &nbsp;         <div class="form-group">             <div class="btn-group mg-top thumb-sizes" data-toggle="buttons">                 <label class="btn btn-default btn-xs"><input type="radio" id="width-90" value="90">90</label>                 <label class="btn btn-default btn-xs active"><input type="radio" id="width-110" value="110" checked>110</label>                 <label class="btn btn-default btn-xs"><input type="radio" id="width-130" value="130">130</label>                 <label class="btn btn-default btn-xs"><input type="radio" id="width-160" value="160">160</label>                 <label class="btn btn-default btn-xs"><input type="radio" id="width-200" value="200">200</label>                  &nbsp;<button type="button" class="close" aria-hidden="true">&times;</button>             </div>         </div>     </div>      <div class="hidden resize-options">         <button type="button" class="close pull-right" aria-hidden="true">&nbsp;&times;</button>         &nbsp;<input class="form-control input-sm pull-right resize_width" type="text" pattern="[0-9]{0,5}" placeholder="new width (px)">     </div> </div> 

please note there's more html showed in image above. complete html design looks in real world:

i'm not familiar these reference techniques in javascript, i'm interested on learning , out of stuck-zone.

---

update - 02/02/2014

i have followed code-jaff's answer , code right now:

var selected_thumbwidth = { thumbwidth: 110 };  $('.btn input[type="radio"]').on('change', function() {     selected_thumbwidth.thumbwidth = $(this).data('val'); }); 

please note i'm not submitting regular form, didn't want complicate question above thought irrelevant, guess is. i'm using jquery plugin, named jquery file upload , need send selected number along form. how it:

$('#upload').fileupload({     dropzone:                   $('#drop'),     pastezone:                  $('#drop'),     url:                        'upload.php',     type:                       'post',     limitmultifileuploads:      10,     fileinput:                  $('#upload_button'),     formdata: {          upload_type: 'local',          thumbnail_width: selected_thumbwidth.thumbwidth,         resize_width: $('.options .resize_width').val(),     },     ... 

i thought using object enables me assign value reference, when clicking different button, pass value of radio button object's thumbwidth property , automatically submit changed value ajax request.

in case, keeps sending 110 time, though click different button.

i'm assuming assigning reference not solution here.

here simple solution, actual solution issue

html

<div class="btn-group" data-toggle="buttons">   <label class="btn btn-primary">     <input type="radio" name="options" id="option1" data-val = "110"> 110   </label>   <label class="btn btn-primary">     <input type="radio" name="options" id="option2" data-val = "120"> 120   </label>   <label class="btn btn-primary">     <input type="radio" name="options" id="option3" data-val = "130"> 130   </label> </div> 

javascript

$('.btn input[type="radio"]').on('change', function(e){     alert($(this).data('val'));     console.log($(this).data('val')); }); 

demo

as per question update, need set data on upload start - i've gone through documentation

$('#upload').on('fileuploadsubmit', function (e, data) {     // other options go here      // ...     data.formdata = {              upload_type: 'local',              thumbnail_width: $('.btn.active input[type="radio"]').data('val'),             resize_width: $('.options .resize_width').val(),     }     });