This is the code in my template it takes value from input field id and calculate the value. The code only works for one formset field or item such as one having id= id_form-0-rate. I dont know why loop doesnot work for added formset such as one having id= id_form-1-rate.
template.html
<script type = "text/javascript" >
var id= $("#id_form-TOTAL_FORMS").val();
console.log(id);
for(let i=0; i<10; i++)
{
console.log(i);
$("#id_form-" + i + "-quantity").keyup(function () {
var rate = parseFloat($("#id_form-" + i + "-rate").val());
var quantity = parseFloat($("#id_form-" + i + "-quantity").val());
var discount = parseFloat($("#id_form-" + i + "-discount").val());
$("#id_form-" + i + "-amount").val(rate * quantity - discount);
});
$("#id_form-" + i + "-rate").keyup(function () {
var rate = parseFloat($("#id_form-" + i + "-rate").val());
var quantity = parseFloat($("#id_form-" + i + "-quantity").val());
var discount = parseFloat($("#id_form-" + i + "-discount").val());
$("#id_form-" + i + "-amount").val(rate * quantity - discount);
});
$("#id_form-" + i + "-discount").keyup(function () {
var rate = parseFloat($("#id_form-" + i + "-rate").val());
var quantity = parseFloat($("#id_form-" + i + "-quantity").val());
var discount = parseFloat($("#id_form-" + i + "-discount").val());
$("#id_form-" + i + "-amount").val(rate * quantity - discount);
});
}
</script>
Don't need your complicated code. Just need only these lines:
<script>
$(document).on('keyup',"input[id$='-quantity']",fn);
$(document).on('keyup',"input[id$='-rate']",fn);
$(document).on('keyup',"input[id$='-discount']",fn);
function fn(){
var rate = parseFloat($(this).closest("#parent").find("input[id$='-rate']").val());
var quantity = parseFloat($(this).closest("#parent").find("input[id$='-quantity']").val());
var discount = parseFloat($(this).closest("#parent").find("input[id$='-discount']").val());
$(this).closest("#parent").find("input[id$='-amount']").val(rate * quantity - discount);
};
</script>
{% csrf_token %}
{{ formset.management_form }}
{% for form in formset %}
<div id="parent">
{{ form.as_p }}
</div>
{% endfor %}