improve total computing on order form

This commit is contained in:
Laetitia Getti 2023-07-31 16:32:31 +02:00 committed by Laetitia Getti
parent e4bd680fe2
commit 52b7804281

View file

@ -69,7 +69,7 @@
<p>Il n'y a pas de produits disponibles dans cette commande !</p>
{% else %}
<p class="title">Commander</p>
<form method="post" action="{% url 'order:order' grouped_order.id %}">
<form id="inputs-parent" method="post" action="{% url 'order:order' grouped_order.id %}">
<!-- Tableau de commandes - sur ordi -->
<table class="table is-hidden-touch">
@ -86,7 +86,7 @@
{% csrf_token %}
<td>{{ item.name }}</td>
<td>{{ item.price }} €</td>
<td><input name="quantity_{{ item.id }}" onblur="findTotal()" size="4" type="number" value="0" min="0" {% if item.get_remaining_nb == 0 %}disabled{% endif %}></input>
<td><input name="quantity_{{ item.id }}" size="4" type="number" value="0" min="0" {% if item.get_remaining_nb == 0 %}disabled{% endif %}></input>
{% if item.get_remaining_nb is not null %}
<span class="is-italic mini-title">
{% if item.get_remaining_nb == 0 %}Produit épuisé
@ -115,7 +115,7 @@
<p>{{ item.price }} €</p>
</div>
<div class="card-footer-item">
<td><input name="quantity_{{ item.id }}" onblur="findTotal()" size="4" type="number" value="0" min="0" {% if item.get_remaining_nb == 0 %}disabled{% endif %}>
<td><input name="quantity_{{ item.id }}" size="4" type="number" value="0" min="0" {% if item.get_remaining_nb == 0 %}disabled{% endif %}>
</input></td>
{% if item.get_remaining_nb is not null %}
<span class="is-italic mini-title">
@ -167,7 +167,7 @@
<script>
{% block extra_js %}
// Compute total price whenever a value in input is modified
function findTotal(){
document.getElementById("inputs-parent").addEventListener("change", function() {
var inputs = document.getElementsByTagName("input");
total_price = 0;
for(let input of inputs){
@ -176,15 +176,12 @@ function findTotal(){
item_id = input_name.split("_")[1];
prices = {{ prices_dict | safe }};
total_price += prices[item_id] * input.value;
console.log(prices[item_id] * input.value);
}
}
console.log(total_price);
console.log(document.getElementsByClassName('total'));
[].forEach.call(document.getElementsByClassName('total'), function (el) {
el.innerHTML = total_price;
})
}
});
{% endblock %}
</script>