-2

When a user clicks a checkbox, I need the jquery update_flavors function to run and update the hidden input the value attribute with all the flavors.

Currently, the update_flavors function does not seem to get called.

Updated JSFiddle: https://jsfiddle.net/ecqp9nwm/7/

HTML

    <div class="row"> 
            {% assign flavors = "apple, orange, cherry" | split: ","%}

            {% for flavor in flavors %}
                <div class="col-md-6">
                  <div class="form-check">
                      <label class="form-check-label" for="checkbox-{{flavor | handleize }}"><input name='contact[{{flavor| handleize }}]' type="checkbox" class="checkbox-flavor form-check-input" id="checkbox-{{flavor | handleize }}"> {{flavor}}</label>
                  </div>
                </div>
            {% endfor %}
    </div>


      <input type="hidden" id="checkbox-flavors" name="contact[flavor]" value="">

Jquery

<script>
function update_flavors() {         
     var allVals = [];
     $('.checkbox-flavor :checked').each(function() {
       allVals.push($(this).val());
     });
     $('#checkbox-flavors').val(allVals);
  }


$(document).ready(function(){
    $(".checkbox-flavor").click(function(){
       update_flavors;
    });
});

</script>

Solution:

I had a space in my selector! big oversight! $('.checkbox-flavor :checked') should have been $('.checkbox-flavor:checked') and I needed to add a () to update_flavors();

working and improved: https://jsfiddle.net/ecqp9nwm/12

function update_flavors() {
  var allVals = $('.checkbox-flavor:checked').map(function() {
    return $(this).val()
  }).get();

  $('#checkbox-flavors').val(allVals.join(', '));
}

$(document).ready(function() {
  $(".checkbox-flavor").change(update_flavors);
});
user2012677
  • 5,465
  • 6
  • 51
  • 113
  • 1
    https://stackoverflow.com/questions/9454645/does-id-have-to-be-unique-in-the-whole-page Don't repeat ids. Use classes instead. – Taplar Nov 20 '18 at 22:56
  • Where do you have an element with the ID `checkbox-flavor` to be matched with `$("#checkbox-flavor")`? – j08691 Nov 20 '18 at 22:56
  • Oh, good point. flavor would be `apple`, `orange` or `cherry` (i guess?), so it's not even a dup id anyway. But still, you should use a class to avoid that issue. – Taplar Nov 20 '18 at 22:58
  • @j08691 typo, corrected, but still does not run. See js fiddle – user2012677 Nov 20 '18 at 23:00
  • Sorry, my correction was wrong, I undid it, my original was correct. There is a class for .checkbox-flavor, which is multiple checkboxes and one #checkbox-flavors, which is an input for all the flavors to go. – user2012677 Nov 20 '18 at 23:03
  • So now fix your click hander to actually call the update_flavors method. – Taplar Nov 20 '18 at 23:03
  • How do I fix my handler? I don't know what I did wrong. – user2012677 Nov 20 '18 at 23:22
  • Can someone please tell me what I did wrong with this post? why was it down voted? – user2012677 Nov 20 '18 at 23:25
  • 1
    `update_flavors();` You're missing your `()`, or get rid of the outer anonymous function – Taplar Nov 20 '18 at 23:27

1 Answers1

0

Currently your checkboxes have no values to be added. They just have labels.

This site is such a pain in the hind quarters to post any sort of solution to, but try something like this:

function updateFlavors(e) {
    console.log("update");
    var checks = $(".checkbox-flavor:checked");
    var vals = $.map(checks, function(elem, i) {
      var inp = $(elem);
      return inp.val();
});

$('#checkbox-flavors').val(vals.join(", "));}

$(document).ready(function() {
    $(".checkbox-flavor").each(function() {
        var inp = $(this);
        inp.val(inp.parent().find("label").text());
    })
    $(".check_holder").on("change", ".checkbox-flavor", updateFlavors);
});

By using the change handler, you update when an item is checked or unchecked. Also, by assigning the handler to a parent element, you only have one handler running instead of one for every input element.

Devi8
  • 1