CODEWITHSUNDEEP
javascriptjquery
Meules
Meules

Reputation: 1389

Run function on input change and checkbox change

I have a Bootstrap modal with multiple forms in it. All the forms have an input field and checkbox. I try to run a function update_amounts_modal every time a change event takes place. This working when I change the input value but doesn't work when I check/uncheck the checkbox.

UPDATE I'VE CREATED A FIDDLE HERE

The function:

function update_amounts_modal(){
  var sum = 0.0;
  $('form').each(function() {
    var qty = $(this).find('.qty input').val();
    var price = $(this).find('.price input').val();
    qty= parseInt(qty) || 0;
    price= parseFloat(price) || 0;
    var amount = (qty*price)
                 sum+=amount;
  });
    $('.total-modal').text('€'+sum.toFixed(2));
}

The change function:

  update_amounts_modal();
  $('form .qty').change(function(){
    update_amounts_modal();
    $('.total-modal').change();
  });

HTML:

<form method="post" data-target="#modal" data-async="" action="action_url">
  <div class="qty cell">
    <input type="text" class="qty" value="1" name="quantity">
  </div>
  <div class="price cell">
    <span class="euro">€</span><input type="text" disabled="" class="price" value="0.60">
  </div>
  <div class="checkbox cell">
     <input type="checkbox" checked="" value="12933006" name="product[]" class="idRow">
  </div>
</form>

//And more forms exactly like this but with different input values!

<div class="total-modal">€0.00</div>

What actually needs to happen is that by checking/unchecking the value needs to be recalculated with the function. So if you have set qty to 10 and you uncheck the checkbox then this amount (10x eg. €0.25) must be deducted from the total.

I thought something like this should work but that isn't:

$(".idRow").change(function(){
  if($(this).attr("checked")){
    update_amounts_modal();
  }
  else{
    update_amounts_modal();
  }

I don't get an error there's just nothing happening. Is there a better way to accomplish this?

Upvotes: 3

Views: 1902

Answers (4)

Moshtaf
Moshtaf

Reputation: 4903

I'm not sure figure out your question correctly or not but i think you are looking for something like this:

function update_amounts_modal() {
    var sum = 0.0;
    $('form').each(function () {
        var qty = $(this).find('.qty').val();
        var price = $(this).find('.price').val();
        var isChecked = $(this).find('.idRow').prop("checked");
        if (isChecked){
            qty = parseInt(qty, 10) || 0;
            price = parseFloat(price) || 0;
            var amount = (qty * price);
            sum += amount;
        }
    });
    $('.total-modal').text('€' + sum.toFixed(2));
}

$().ready(function () {
    update_amounts_modal();
    $('form .qty, form .idRow').change(function () {
        update_amounts_modal();
    });
});

Check JSFiddle Demo


Update:

If in some forms you don't have a CheckBox (in other words some prices aren't optional) so you have to check that CheckBox exist or not and if exist, so check that is checked or not.
in order to do that, modify the update function like this:

function update_amounts_modal() {
    var sum = 0.0;
    $('form').each(function () {
        var qty = $(this).find('.qty').val();
        var price = $(this).find('.price').val();
        var checkbox = $(this).find('.idRow');
        if (checkbox.prop("checked") || checkbox.length == 0){
            qty = parseInt(qty, 10) || 0;
            price = parseFloat(price) || 0;
            var amount = (qty * price);
            sum += amount;
        }
    });
    $('.total-modal').text('€' + sum.toFixed(2));
}

in this line: if (checkbox.prop("checked") || checkbox.length == 0){ we say that sum the value if checkbox is checked (checkbox.prop("checked")) or there is no CheckBox (checkbox.length == 0).

Check JSFiddle Demo

Upvotes: 2

Cody Seibert
Cody Seibert

Reputation: 98

If you expect the values to update based on the checked property, then your sum function needs to actually use that check box right?

JS:

$('form').each(function () {
    if ($(this).find(".idRow").prop("checked") === true){
        //
        // The normal computations you had before...
        //
    } 
});

Upvotes: 0

Oposyma
Oposyma

Reputation: 129

u can do 

<div class="checkbox cell">
    <input type="checkbox"/>
</div>

jQuery("div.checkbox > input:checkbox").on('click',function(){
    alert('asdasd');
});

http://jsfiddle.net/1r7rk21w/

Upvotes: 0

Yunus Aslam
Yunus Aslam

Reputation: 2466

Try this : Instead of attr use prop 

$(".idRow").change(function(){
   if($(this).prop("checked")){
    update_amounts_modal();
   }
   else{
       update_amounts_modal();
    }
});

Upvotes: 2

Related Questions