https://github.com/bgelov/django-counting-in-admin
Javascript for counting numeric values on change_form.html template in Django administrative interface.
https://github.com/bgelov/django-counting-in-admin
counting django django-admin django-admin-javascript django-application django-javascript javascript
Last synced: 8 months ago
JSON representation
Javascript for counting numeric values on change_form.html template in Django administrative interface.
- Host: GitHub
- URL: https://github.com/bgelov/django-counting-in-admin
- Owner: bgelov
- License: cc0-1.0
- Created: 2023-06-08T00:38:46.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2023-06-08T01:19:41.000Z (over 2 years ago)
- Last Synced: 2025-01-03T15:47:12.460Z (9 months ago)
- Topics: counting, django, django-admin, django-admin-javascript, django-application, django-javascript, javascript
- Language: JavaScript
- Homepage:
- Size: 74.2 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# django-counting-in-admin
Javascript for counting numeric values on change_form.html template in Django administrative interface.
## How to use it?
templates -> admin -> -> -> change_form.html
```
...
{% block after_field_sets %}
Total: 0
{% endblock %}
...
{% block submit_buttons_bottom %}{% submit_row %}
Total: 0
let totalSum = 0;
const resultFieldTop = document.getElementById('resultFieldTop');
const resultFieldBottom = document.getElementById('resultFieldBottom');
// Function for calculating the total amount
function calculateTotalSum() {
totalSum = 0;
// get all inputs of the number type
const numberInputs = document.querySelectorAll('input[type="number"]');
// loop through each input and add its value to the total
numberInputs.forEach(input => {
// Check if the id contains the value "id_incomingproduct_set-"
if (input.id.includes("id_incomingproduct_set-")) {
const value = parseFloat(input.value) || 0; //convert value to a number, if possible
totalSum += value;
}
});
// console.log(totalSum);
resultFieldTop.textContent = totalSum; // Update field value
resultFieldBottom.textContent = totalSum; // Update field value
}
// Add an input event handler for all inputs with type number
document.addEventListener('input', function(event) {
const target = event.target;
if (target.tagName === 'INPUT' && target.type === 'number') {
calculateTotalSum();
}
});
calculateTotalSum();
{% endblock %}
...
```