'I am not getting expected result when I am multiplying price with quantity
I am working on a billing application. When I need to generate a bill, I open the CREATE form and I enter the quantity and price of two items. The quantity, price and total of both the items are stored in the django. suppose i want to change the quantity in Bill then i have made a similar form i call edit form. So when I edit the quantity and price of both the items in the edit form, then the first item's multiplication is getting correct but the second item's multiplication is getting wrong. You can see the problem in the rectangular box
<script>
var item = {{itemid}};
var itemname = "{{itemname|escapejs}}";
services = itemname.replaceAll("'",'"')
a =JSON.parse(services)
itemid_list = '<option value="">Select Item</option>';
console.log((a))
console.log((a.length))
for(var x=0; x<item.length; x++){
itemid_list = itemid_list+ "<option value='"+item[x]+"'>"+a[x]+"</option>"
}
console.log(itemid_list)
const maxPoints = 5;
let count = 1;
// Adds new point
const deleteThisPoint = (target) => {
target.parentNode.remove();
var sum = 0;
$('input.extended_total').each(function() {
var num = parseInt(this.value, 10);
if (!isNaN(num)) {
sum += num;
}
});
$("#totalcount").text(String(sum));
};
const addNewPoint = (target) => {
const parentContainer = target.parentNode.parentNode;
const addIn = parentContainer.querySelector('.multiple-points');
const childCounts = addIn.childElementCount;
if(childCounts > maxPoints - 1) {
alert('maximum limit reached');
} else {
const data = $(`
<div class="d-flex">
<div class="form-group mt-3 d-flex">
<select class="form-control selectitem" name="item[]" id="selectitem${count}" required onchange="myfunc(${count})" style="width:140px;">
${itemid_list}
</select>
</div>
<div class="form-group mt-3 d-flex">
<input type="text" class="form-control" name="product_desc[]" id="product_desc${count}" placeholder="Product Description" style="width:225px;margin-left: 23px" >
</div>
<div class="form-group mt-3 d-flex">
<input type="text" id="unit_price${count}" name="unit_price[]" placeholder="Unit Price" class="form-control" style="width:140px;margin-left: 23px" onkeyup="changeprice(${count})">
<input type="hidden" id="hiddenunit_price${count}" name="unit_price[]" placeholder="Unit Price" class="form-control" >
</div>
<div class="form-group mt-3 d-flex">
<input type="text" id="qty${count}" name="qty[]" placeholder="Qty." class="form-control" required onkeyup="counttotal(${count})" style="width:55px;margin-left: 23px">
</div>
<div class="form-group mt-3 d-flex">
<input type="text" id="ou${count}" name="ou[]" placeholder="O/U" value="0" class="form-control" style="width:55px;margin-left: 23px">
</div>
<div class="form-group mt-3 d-flex">
<input type="text" id="extended_total${count}" name="extended_total[]" placeholder="Extended Total" class="form-control extended_total" style="width:140px;margin-left: 23px">
</div>
<button class="btn glixcel-btn-outline-red ms-2" type="button" onclick="deleteThisPoint(this)" style="height:38px;margin-top:15px;">
<i class="far fa-trash-alt"></i>
</button>
</div>
`).hide();
$(addIn).append(data);
count = count+1;
}
};
$('.selectitem').on('change', function(e) {
e.preventDefault();
var option = document.getElementById('selectitem').value;
console.log(option)
$.ajax({
data: {
option: option
},
type: 'POST',
url: '/fetchitems/'
})
.done(function(data) {
console.log(data['models_to_return'])
document.getElementById('product_desc').value=data['models_to_return'][0]['production_desc']
document.getElementById('unit_price0').value=data['models_to_return'][0]['unitprice']
document.getElementById('hiddenunit_price0').value=data['models_to_return'][0]['unitprice']
// var a =document.getElementById('product_desc').value;
// console.log(a)
// var ab = document.getElementById('unit_price0').value;
// console.log(ab)
// var ac = document.getElementById('hiddenunit_price0').value;
// console.log(ac)
});
});
function myfunc(argument) {
opt_val = document.getElementById('selectitem'+argument).value;
console.log(opt_val)
$.ajax({
data: {
option: opt_val
},
type: 'POST',
url: '/fetchitems/'
})
.done(function(data) {
document.getElementById('product_desc'+argument).value=data['models_to_return'][0]['production_desc']
document.getElementById('unit_price'+argument).value=data['models_to_return'][0]['unitprice']
document.getElementById('hiddenunit_price'+argument).value=data['models_to_return'][0]['unitprice']
});
}
$("#qty").keyup(function(){
unitprice = $('#unit_price0').val();
qty = $(this).val();
var total = unitprice*qty;
document.getElementById('extended_total').value = total;
var sum = 0;
$('input.extended_total').each(function() {
var num = parseInt(this.value, 10);
if (!isNaN(num)) {
sum += num;
}
});
$("#totalcount").text(String(sum));
});
function counttotal(argument) {
unitprice = $('#unit_price'+argument).val();
qty = $('#qty'+argument).val();
var total = unitprice*qty;
document.getElementById('extended_total'+argument).value = total;
var sum = 0;
$('input.extended_total').each(function() {
var num = parseInt(this.value, 10);
if (!isNaN(num)) {
sum += num;
}
});
$("#totalcount").text(String(sum));
}
function checkbox(checkbox) {
// checkval = $(this).val();
if (checkbox.checked)
{
document.getElementById('s_firm').value =document.getElementById('b_firm').value;
document.getElementById('s_address').value= document.getElementById('b_address').value;
document.getElementById('s_address2').value= document.getElementById('b_address2').value;
document.getElementById('s_city').value= document.getElementById('b_city').value;
document.getElementById('s_state').value= document.getElementById('b_state').value;
document.getElementById('s_zip').value= document.getElementById('b_zip').value;
document.getElementById('s_country').value= document.getElementById('b_country').value;
}else{
document.getElementById('s_firm').value ='';
document.getElementById('s_address').value= '';
document.getElementById('s_address2').value= '';
document.getElementById('s_city').value= '';
document.getElementById('s_state').value= '';
document.getElementById('s_zip').value= '';
document.getElementById('s_country').value='';
}
}
function changeprice(argument){
unitprice = $('#unit_price'+argument).val();
hiddenunitprice = $('#hiddenunit_price'+argument).val();
var total = hiddenunitprice-unitprice;
document.getElementById('ou'+argument).value = 0;
}
function SelectCustomer(){
selectval = $('#select_existing_cus').val();
$.ajax({
data: {
option: selectval
},
type: 'POST',
url: '/fetchcustomer/'
})
.done(function(data) {
console.log(data)
document.getElementById('b_firm').value=data['models_to_return'][0]['b_firmname']
document.getElementById('b_address').value=data['models_to_return'][0]['b_addr1']
document.getElementById('b_address2').value=data['models_to_return'][0]['b_addr2']
document.getElementById('b_city').value=data['models_to_return'][0]['b_city']
document.getElementById('b_state').value=data['models_to_return'][0]['b_state']
document.getElementById('b_zip').value=data['models_to_return'][0]['b_zip']
document.getElementById('b_country').value=data['models_to_return'][0]['b_country']
document.getElementById('s_firm').value=data['models_to_return'][0]['s_firmname']
document.getElementById('s_address').value=data['models_to_return'][0]['s_addr1']
document.getElementById('s_address2').value=data['models_to_return'][0]['s_addr2']
document.getElementById('s_city').value=data['models_to_return'][0]['s_city']
document.getElementById('s_state').value=data['models_to_return'][0]['s_state']
document.getElementById('s_zip').value=data['models_to_return'][0]['s_zip']
document.getElementById('s_country').value=data['models_to_return'][0]['s_country']
document.getElementById('buyername').value=data['models_to_return'][0]['customername']
document.getElementById('email').value=data['models_to_return'][0]['email']
document.getElementById('main_tel').value=data['models_to_return'][0]['contact1']
document.getElementById('alt_tel').value=data['models_to_return'][0]['contact2']
});
{% comment %} document.getElementById('ou'+argument).value = total; {% endcomment %}
}
</script><div class="row">
{% for i in product_order%}
<div class="col-md-2">
<label for="validationCustom03">Item</label>
<select class="form-control selectitem" name="item[]" id="selectitem" required>
<option value="">Select Item</option>
<option value="Demo Product">Demo Product</option>
<option value="123">123</option>
<option value="456">456</option>
<option value="123">123</option>
</select>
</div>
<div class="col-md-3">
<label for="validationCustom03">Product Description</label>
<input type="text" class="form-control" name="product_desc[]" id="product_desc" placeholder="Product Description" value="{{i.production_desc}}" >
</div>
<div class="col-md-2">
<label for="validationCustom03">Unit Price</label>
<input type="text" class="form-control" name="unit_price[]" id="unit_price0" placeholder="Unit Price" value="{{i.unitprice}}" onkeyup="changeprice(0)">
<input type="hidden" class="form-control" id="hiddenunit_price0" placeholder="Unit Price" >
</div>
<div class="col-md-1">
<label for="validationCustom03">Qty</label>
<input type="text" class="form-control" name="qty[]" id="qty" placeholder="Qty." value="{{i.quantity}}" required>
</div>
<div class="col-md-1">
<label for="validationCustom03">O/U</label>
<input type="text" class="form-control" value="0" name="ou[]" id="ou0" placeholder="O/U" value="{{i.ou}}" >
</div>
<div class="col-md-2">
<label for="validationCustom03">Extended Total</label>
<input type="text" class="form-control extended_total" name="extended_total[]" id="extended_total" placeholder="Extended Total" value="{{i.extend}}" disabled>
</div>
{% endfor %}
</div>I have used Ajax Python to build the application. I am trying for 3 days to solve this problem but I don't understand what exactly is the problem and how to solve it.
I hope someone will help me to solve this problem
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|