Jquery, cannot read checkbox value after checkbox is appended

Question

My main goal is to get the amount that whatever the user has keyed in the textbox if the checkbox next to it is checked and sum all amount of the checked checkboxes.

But the current problem that I'm facing is, I can't even get the checkbox value after it is appended.

How to solve this problem? Jsfiddle link here

$('#add_exercise').on('click', function() { 
    $('#exercises').append('<div class="exercise"><input type="text" name="amount"><input type="checkbox" name="exercise[]" class="boxes"><button class="remove">x</button></div>');
    return false; //prevent form submission
});

$('#exercises').on('click', '.remove', function() {
    $(this).parent().remove();
    return false; //prevent form submission
});

$('.boxes').on('change', function() {

    console.log('qwe')
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form method="post" action="#">

    <label>Exercises</label>

    <fieldset id="exercises">
        <div class="exercise">
            <input type="text" name="amount" value="">
            <input type="checkbox" name="exercise[]" class="boxes"><button class="remove">x</button>
        </div>
    </fieldset>

    <button id="add_exercise">add exercise</button>

</form>

You have duplicated names in your form. When you append the `input type="text"` they are all named `amount` — Cid, Sep 27 '19 at 06:16

Bhushan Kawadkar · Accepted Answer · 2019-09-27T06:42:33.663

1

You are adding boxes dynamically so need to bind change or click event using .on and iterate all checked checkboxes to get the value of it's previous input and add it to get the sum.

see below

$('#add_exercise').on('click', function() { 
    $('#exercises').append('<div class="exercise"><input type="text" name="amount"><input type="checkbox" name="exercise[]" class="boxes"><button class="remove">x</button></div>');
    return false; //prevent form submission
});

$('#exercises').on('click', '.remove', function() {
    $(this).parent().remove();
    return false; //prevent form submission
});

$(document).on('click','.boxes', function() {
   var sum = 0;
   $('.boxes:checked').each(function(){
     //var val = $(this).prev('input').val();
     var val = $(this).siblings('input[name=amount]').val();
     sum += parseInt(val) || 0;
   });
   console.log("Sum = " + sum);
});

JSFiddle

edited Sep 27 '19 at 06:42

answered Sep 27 '19 at 06:19

Bhushan Kawadkar

27,451
5
33
55

Oh wow...this answers my main goal. Thank you – LearnProgramming Sep 27 '19 at 06:33
happy to help you :) – Bhushan Kawadkar Sep 27 '19 at 06:34
what if i dont want to use `$(this).prev('input').val();`, is it possible if I call the amount textbox id? because i might put a lot of input textboxes between these two input – LearnProgramming Sep 27 '19 at 06:37
you can use `.siblings('input[name=amount]').val()` .. check this https://jsfiddle.net/cbnp1wh2/1/ – Bhushan Kawadkar Sep 27 '19 at 06:40
see my updated answer. Consider you will have input name=amount. Similarly, you can use any common class for all amount input and use class selector in `siblings()` method instead of name selector – Bhushan Kawadkar Sep 27 '19 at 06:43
Once again, u saved me from all these problems. Thank you very much! – LearnProgramming Sep 27 '19 at 06:44

score 1 · Answer 2 · answered Sep 27 '19 at 06:24

Try this. It will work for both dynamic and static elements. This is called event delegation

$('.wrapper-class').on("event", '.selector-class', function() {
    // Your code
});

$('#add_exercise').on('click', function() { 
    $('#exercises').append('<div class="exercise"><input type="text" name="amount"><input type="checkbox" name="exercise[]" class="boxes"><button class="remove">x</button></div>');
    return false; //prevent form submission
});

$('#exercises').on('click', '.remove', function() {
    $(this).parent().remove();
    return false; //prevent form submission
});

$('#exercises').on('change','.boxes' ,function() {

    console.log('qwe')
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form method="post" action="#">

    <label>Exercises</label>

    <fieldset id="exercises">
        <div class="exercise">
            <input type="text" name="amount" value="">
            <input type="checkbox" name="exercise[]" class="boxes"><button class="remove">x</button>
        </div>
    </fieldset>

    <button id="add_exercise">add exercise</button>

</form>

Oh now I understand, my mistake was here `$('#exercises').on('change','.boxes' ,function() {` — LearnProgramming, Sep 27 '19 at 06:33

Jquery, cannot read checkbox value after checkbox is appended

2 Answers2

Linked