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

Question

I'll start of telling that I'm using Bootstrap 3 and its button system for radio buttons:

So whichever of these buttons is clicked, the other button will be unclicked.
So what I'm struggling with is getting the value of the button that is checked and send it through an AJAX call to a PHP script. My problem is pure jQuery/Javascript though, I've been trying to alert() the correct value, but I can't get it there.

So the problem occurs as follow (demo try):

• I click one button
• I alert its value

I get the wrong result each time. So when I click 130 I get 110, then I continue to 160 and I get 130 and so on. I'm always one step back.

In the real world project, I need to take this value and send it with my AJAX call so I can determine something based on this number in my PHP script.
The way I tried to do this is create an JS Object like:

var selected_thumbwidth = { width: 110 };

And then change its value like this:

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

Then alerting this outside the click callback gives me the results I described above. Why am I selecting the .active class? Well, whenever a button is clicked, the .active class shifts to that button, making it look pressed. That's from Bootstrap.

I want to be able to take selected_thumbwidth.thumbWidth and put it in the data option of $.ajax, which I guess is irrelevant to mention.

This is how the HTML looks like:

<div class="options">
    <span class="glyphicon glyphicon-resize-small valign-middle pointer resize-toggle" title="Resize your image on the fly to the size of your choice. Proportions will be kept."></span> 
    <span class="glyphicon glyphicon-adjust valign-middle pointer thumb-toggle" title="Change the thumbnail size of your image. The sizes are measured in pixels. Proportions will be 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 that there's more HTML than I showed in the image above. The complete HTML design looks like this in the real world:

I'm not very familiar with these reference techniques in Javascript, but I'm really interested on learning it and get out of this stuck-zone.

---

Update - 02/02/2014

I have followed code-jaff's answer and this is my code right now:

var selected_thumbwidth = { thumbWidth: 110 };

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

Please note that I'm not submitting a regular form, I just didn't want to complicate my question above as I thought it was irrelevant, but I guess it is. I'm using a jQuery plugin, named jQuery File Upload and I need to send the selected number along with the form. This is how I do 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 that using an object enables me to assign a value by reference, so when clicking a different button, I pass the value of the radio button to the object's thumbWidth property and then it would automatically submit the changed value with the AJAX request.

In my case, it keeps sending 110 all the time, even though I click a different button.

I'm assuming that assigning by reference is not the solution here.

Answer 1

Here is a simple solution, will get you to the actual solution for your 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 the question update, you need to set the data on upload start - I've just gone through the 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(),
    }    
});

Answer 2

Here's your simplified html

    <input class="btn-xs" type="radio" name=btn-xs value="110" checked>90</input>
    <input class="btn-xs" type="radio" name=btn-xs value="110">110</input>
    <input class="btn-xs" type="radio" name=btn-xs value="130">130</input>
    <input class="btn-xs" type="radio" name=btn-xs value="160">160</input>
    <input class="btn-xs" type="radio" name=btn-xs value="200">200</input>

Add a javascript function

onclick="alert(this.value)"

attach to each input.

    <input class="btn-xs" type="radio" name=btn-xs value="110" checked onclick="alert(this.value)">90</input>
    <input class="btn-xs" type="radio" name=btn-xs value="110" onclick="alert(this.value)">110</input>
    <input class="btn-xs" type="radio" name=btn-xs value="130" onclick="alert(this.value)">130</input>
    <input class="btn-xs" type="radio" name=btn-xs value="160" onclick="alert(this.value)">160</input>
    <input class="btn-xs" type="radio" name=btn-xs value="200" onclick="alert(this.value)">200</input>

If you want to get fancier (and cleaner), look up how to attach a click function to elements as selected by class name (jQuery is easiest). Here's a link.

Answer 3

This is wrong ! You should make use of the browser capabilities ! The radio box can be checked and unchecked if you specify a name group to all of your radio buttons ! Then in CSS you can design unchecked and checked radio button.

Another solution is to remove all active class to all the radio button of your group and to assign the class only to the selected one.

Here is an example: http://jsfiddle.net/xQ2HL/1

<html>
  <head>
  <meta http-equiv="content-type" content="text/html; charset=iso-8859-2">
  <title></title>
  <style>
  .active:before { content: "->" }
  .active{ width: 40px; }
  </style>
  <script src="jquery-1.11.0.min.js"></script>
  <script type="text/javascript">

  $(function(){
    // Binding for the radio button
    $("input[type=radio][name=group1]").click(function(){

      // Get the value
      var value = $(this).val();

      // Reset active state class
      $("input[type=radio][name=group1]").removeClass("active");

      // Assign the new active class to the clicked element
      $(this).addClass("active");

      // Ajax query or whatever you want to do here
      // ...

    });
  });
  </script>


  <body>
    90: <input type="radio" name="group1" value="90" /><br>
    110: <input type="radio" name="group1" value="110" /><br>
    130: <input type="radio" name="group1" value="130" /><br>
  </body>
</html>