javascript loop doesn't work for django formset field calculation only calcuate one formset field with id such as id_forms-0-rate

user_11614304 0
Viewed 21

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>
calculation formset django jquery javascript
1 Answers

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 %}
user_40482730
Related