Trigger function on input change and checkbox change
I have a Bootstrap modal with multiple forms in it. All forms have an input field and a checkbox. I am trying to run a function update_amounts_modal
every time a change event occurs. This works when I change the input value, but doesn't work when I check / uncheck the box.
UPDATE I CREATED FIDDLE HERE
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));
}
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 should actually happen is that by checking / unchecking the value, the value should be recalculated using a function. Therefore, if you qty
checked in 10 and you uncheck the box, this amount (10x, for example 0.25 €) must be deducted from the total.
I thought that something like this should work, but it doesn't:
$(".idRow").change(function(){
if($(this).attr("checked")){
update_amounts_modal();
}
else{
update_amounts_modal();
}
I'm not mistaken, just nothing happens. Is there a better way to do this?
source to share
I'm not sure if you asked 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();
});
});
Update:
If in some forms you don't have a CheckBox (in other words, some prices are not optional), so you need to check that the CheckBox exists or not, and if they exist, check the checkbox or not.
to do this, change the update function as follows:
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));
}
on this line: if (checkbox.prop("checked") || checkbox.length == 0){
we say we are summing the value if the checkbox is checked ( checkbox.prop("checked")
) or not CheckBox ( checkbox.length == 0
).
source to share