CODEWITHSUNDEEP
javascriptjqueryhtmltwitter-bootstraptwitter-bootstrap-3
user2657983
user2657983

Reputation:

Get Data-Values from Selected Bootstrap Button Group (Checkboxes) and Assign to Input

I'm trying to get the data-value from buttons similar to this, however, only when they are selected:

<div class="btn-group" data-toggle="buttons" id="genreButtons">
     <label for="genre2" class="btn btn-default">Button 1<input data-value="2" name="genre2" id="genre2" type="checkbox"></label>
     <label for="genre4" class="btn btn-default">Button 2<input data-value="4" name="genre4" id="genre4" type="checkbox"></label>
     <label for="genre5" class="btn btn-default">Button 3<input data-value="5" name="genre5" id="genre5" type="checkbox"></label>
     <label for="genre7" class="btn btn-default">Button 4<input data-value="7" name="genre7" id="genre7" type="checkbox"></label>
</div>

I'm trying to assign the value(s) to this input:

<input type="hidden" name="valueGenre" id="valueGenre" value="">

I have this JQuery, however, it does not work:

$.each($("#genreButtons input:active"), function()
{            
    $("#valueGenre").val($(this).val());
    console.log($(this).val())
});

I've also tried this JQuery:

$('#genreButtons').click(function(){
    $("#valueGenre").val($(this).val());
    console.log($(this).val())
});

What's the issue with my code, as no errors are thrown to the console?

Upvotes: 2

Views: 5678

Answers (2)

Alvaro Silvino
Alvaro Silvino

Reputation: 9743

first of all I think you are missing the name as id in 

<input type="hidden" name="valueGenre" value="">

and using 

$("#valueGenre").val($(this).val());

you should add the id in the input hidden

 <input type="hidden" name="valueGenre"  id="valueGenre" value="">

I just updated the input to a label and changed the val to append to explain better what was wrong: please see the snippet below:

$.each($("#genreButtons input:checked"), function()
{            
    $("#valueGenre").append($(this).attr('data-value'));
    
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="btn-group" data-toggle="buttons" id="genreButtons">
     <label for="genre2" class="btn btn-default">Button 1<input checked="" data-value="2" name="genre2" id="genre2" type="checkbox"></label>
     <label for="genre4" class="btn btn-default">Button 2<input data-value="4" name="genre4" id="genre4" type="checkbox"></label>
     <label for="genre5" class="btn btn-default">Button 3<input data-value="5" name="genre5" id="genre5" type="checkbox"></label>
     <label for="genre7" class="btn btn-default">Button 4<input checked=""  data-value="7" name="genre7" id="genre7" type="checkbox"></label>
</div>
<label name="valueGenre" id="valueGenre" > </label>

Upvotes: 0

Alex
Alex

Reputation: 810

I'm assuming you want all the values to that input. For the sake of simplicity, I am using a simple join with comma.

Here is the code you should use:

$('#genreButtons').find('input').on('change', function() {
    var val = [];
    $('#genreButtons').find('input:checked').each(function() {
        val.push($(this).data('value'));
    });
    $('input[name="valueGenre"]').val(val.join(','));
});

Full snippet below or on jsfiddle. 

$('#genreButtons').find('input').on('change', function() {
  var val = [];
  $('#genreButtons').find('input:checked').each(function() {
    val.push($(this).data('value'));
  });
  $('input[name="valueGenre"]').val(val.join(','));
  $('#debug').html(val.join(','));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="btn-group" data-toggle="buttons" id="genreButtons">
  <label for="genre2" class="btn btn-default">Button 1
    <input data-value="2" name="genre2" id="genre2" type="checkbox">
  </label>
  <label for="genre4" class="btn btn-default">Button 2
    <input data-value="4" name="genre4" id="genre4" type="checkbox">
  </label>
  <label for="genre5" class="btn btn-default">Button 3
    <input data-value="5" name="genre5" id="genre5" type="checkbox">
  </label>
  <label for="genre7" class="btn btn-default">Button 4
    <input data-value="7" name="genre7" id="genre7" type="checkbox">
  </label>
</div>

<input type="hidden" name="valueGenre" value="">
<div id="debug"></div>

Upvotes: 2

Related Questions