When you enter value in Enter Your Value field it will instantly update its price in Price field
Now i want to add all field sum which will be field 1,field 2,field 3,field 4,field 5 and field 6 and display the total sum in Total Amount but total calculation of the all field are not updating in Total Amount. As price field only get update after we enter value in Enter Your Value Field. Html Code
Im accepting result like below, when i quantity on iron bark total price 1x210= 210 and mixed gum total price 2x100 = 200 and Total Amount: iron-bark(210) + mixed gum(200). So Total Amount= 410
Your last function is waiting for a change event on these items.
$("#ironbarvalue, #redgumvalue,#mixedgumvalue,#brownbarkvalue").change(
function () {
However those elements are being changed dynamically so there is no change event associated with them. You would need to trigger the change yourself with .trigger("change");
You can use event delegation in jquery, so here I am sticking an eventListener on the form element. I have given the form element an id of ‘wood-order-form’. The quantity inputs I have given a className of ‘wood-qty’
$('#wood-order-form')
.on(
'keyup change', // listen to keyup and change events
'.wood-qty', // filtered to inputs with a className of wood-qty
(event) => {
updatePrice(event.target)
updateTotal()
}
)
I have also used a lookup using the input’s id name to get the individual wood prices
const perCubicMetre = {
ironbark: 210,
redgum: 200,
mixedgum: 100,
brownbark: 110
}
// example
const name = input.id // e.g. 'redgum'
perCubicMetre[name] // 200
Here is the code. It needs work though. In its current state the stacking fee is added regardless e.g. not optional. The delivery cost also needs to be incorporated.
$(document).ready(function() {
const stackingFee = 25
const perCubicMetre = {
ironbark: 210,
redgum: 200,
mixedgum: 100,
brownbark: 110
}
const updatePrice = (input) => {
const treeName = input.id
const qty = parseFloat(input.value) || 0
const rate = perCubicMetre[treeName]
// #${treeName}value e.g. #ironbarkvalue
$(`#${treeName}value`).attr('value', rate * qty)
}
// general function to total all the values of input elements
const sumInputValues = (inputs) => {
return inputs.reduce(
(total, input) => {
return total + (parseFloat(input.value) || 0)
}, 0
)
}
// total quantities * 25
const getStackingFee = () => {
const qtyInputs = $('.wood-qty').get() // need an array
return stackingFee * sumInputValues(qtyInputs)
}
const updateTotal = () => {
const totalInputs = $('.wood-total').get()
const total = sumInputValues(totalInputs) + getStackingFee()
$('#sum').attr('value', total)
}
$('#wood-order-form')
.on(
'keyup change',
'.wood-qty',
(event) => {
updatePrice(event.target)
updateTotal()
}
)
});
there is option to pick up or delivery, if its delivery then $50 will charge but if client comes to pickup then there is no delivery charge… delivery will added only if its checked…
im trying to add value only when checkbox is checked for stacking and delivery fee.
$('#brownbark').change(function(){
var brownbark = parseFloat($('#brownbark').val()) || 0;
$('#brownbarkvalue').attr('value', 110 * brownbark).trigger("change");
});
//Stacking Fee
$('#stackfee').change(function(){
if ($(this).is(':checked')) {
$(this).next('input[type="text"]').val(25).trigger("change");
} else {
$(this).next('input[type="text"]').val(0).trigger("change");
}
});
//Delivery Fee
$('#delivery').change(function(){
if ($(this).is(':checked')) {
$(this).next('input[type="text"]').val(50).trigger("change");
} else {
$(this).next('input[type="text"]').val(0).trigger("change");
}
});
$('#ironbarvalue, #redgumvalue,#mixedgumvalue,#brownbarkvalue,#stackfee,#delivery').change(function(){
var value1 = parseFloat($('#ironbarvalue').val()) || 0;
var value2 = parseFloat($('#redgumvalue').val()) || 0;
var value3 = parseFloat($('#mixedgumvalue').val()) || 0;
var value4 = parseFloat($('#brownbarkvalue').val()) || 0;
var value5 = parseFloat($('#stackfee').val()) || 0;
var value6 = parseFloat($('#delivery').val()) || 0;
$('#sum').attr('value',value1 + value2 + value3 + value4 + value5 + value6 );
});
but code is not working , even when checkbox is unchecked its adding value. I want to add value in Total Amount only when Stacking Fee & Delivery Fee are checked.
