Unable to calculate values of a selected Index

[mostwanted]

I want to be able to calculate subtotal by multiplying quantity and price but I cant because

    var quantity = parseInt("{{=details.quantities[index]}}"); in the code below carries the value of 1 and it does not change. Please assist me identify what could be wrong here and how can i rectify it?

Model:

db.define_table('client_order'),
    Field('quoted_item','list:string', required=True),
    Field('quantities','list:string', required=True))

View:
    {{for index, (item, qty) in enumerate(zip(details.quoted_item, details.quantities)):}}
        <tr>
            <td>{{=item}}</td>
            <td><input type="text" onchange="calculateSubtotal(this, {{=index}})" /></td>
            <td>{{=qty}}</td>
            <td><span id="subtotal{{=index}}"></span></td>
        </tr>
    {{pass}}

<script>
    function calculateSubtotal(input, index) {
    var price = parseFloat(input.value);
    var quantity = parseInt("{{=details.quantities[index]}}");
    var subtotal = parseFloat(price * quantity);
    document.getElementById("subtotal" + index).innerHTML = subtotal.toFixed(2);
    updateGrandTotal();
        console.log(parseFloat("{{=details.quantities[index]}}"));
}

</script>

Regards

[Leonel Câmara]

Looks like you're trying to mix javascript and python code in a quite impossible way. Just pass qty instead of index to the function and use that as the quantity.  

[mostwanted]

In my head it was all supposed to work...but ultimately this worked

<script>

        function calculateSubtotal(input, index) {
            var price = parseFloat(input.value);

            var quantity = parseInt(input.parentNode.nextElementSibling.innerHTML);

            var subtotal = parseFloat(price * quantity);

            var subtotalElement = document.getElementById("subtotal" + index);
            if (price == 0) {
                // If price is 0, display the hidden span with text "Not Available" in red
                subtotalElement.innerHTML = "";
                var notAvailableSpan = input.parentNode.previousElementSibling.querySelector("span.hidden");
                notAvailableSpan.style.display = "inline";
                subtotalElement.innerHTML = subtotal.toFixed(2);

            } else {
                var notAvailableSpan = input.parentNode.previousElementSibling.querySelector("span.hidden");
notAvailableSpan.style.display = "none";
subtotalElement.innerHTML = subtotal.toFixed(2);
                updateGrandTotal()

[Leonel Câmara]

That's a good solution, one has to be careful to remember that javascript is executed in the client and python in the server so basically you should only really use python to give javascript some initial data that it needs-

[mostwanted]

Thank you