3 Réponses :
Vous devez créer un tableau et mapper le champ de saisie, par exemple:
function getTotal(array) {
var i = 0, total = 0, el;
while (i < array.length) {
el = document.getElementById('quiz-' + array[i++]);
if (el) total += parseInt(el.value) | 0;
}
return total;
}
Puis quelque part:
let array = [1, 2, 3, 4, 5]
{ array.map((id) => <input type="number" value={"quiz-" + id} id={"quiz-" + id}>) }
Espérons, cela vous aidera.
En complément de la solution JS, vous pouvez utiliser un dict à la place d'une liste pour les étudiants.
// python
students = {1: 'Mr. A', 2: 'Mr. B', 3: 'Mr. C'}
// html
{% for id, name in students.items() %}
<div>
{{ name }}:
<input type="text" value="Quiz1" name="quiz-{{ id }}[]" id="quiz-{{ id }}">
<input type="text" value="Quiz2" name="quiz-{{ id }}[]" id="quiz-{{ id }}">
<input type="text" value="Quiz3" name="quiz-{{ id }}[]" id="quiz-{{ id }}">
<input type="text" value="Total" name="total-{{ id }}[]" id="quiz-total-{{ id }}">
</div>
{% endfor %}
Dans le modèle, vous pouvez appliquer l'événement onchange de JavaScript pour obtenir les valeurs de chaque zone de texte lorsqu'elle est modifiée. Ensuite, vous pouvez ajouter cette valeur aux notes totales du même élève.
De plus ,
J'ai mis à jour le code Python pour utiliser Dictionary plutôt que List des noms d'étudiants. Il utilise la méthode request.form.getlist () pour obtenir les notes de chaque élève sous forme de liste. Cette liste contient 3 notes de quiz et la note totale de chaque élève.
app.py :
<html>
<head>
<title>Dynamic calculation using JS</title>
</head>
<body>
<div class="container">
<h1>Give the grades</h1>
<form action="/results" method="post">
{% for student_id, student_name in students.items() %}
<div class="student_wrapper">
{{ student_name }}:
<input type="text" onchange="update_marks(this);" placeholder="Enter Quiz 1 marks of {{ student_name }}" name="students_{{ student_id }}_marks" id="quiz_1_{{ student_id }}">
<input type="text" onchange="update_marks(this);" placeholder="Enter Quiz 2 marks of {{ student_name }}" name="students_{{ student_id }}_marks" id="quiz_2_{{ student_id }}">
<input type="text" onchange="update_marks(this);" placeholder="Enter Quiz 3 marks of {{ student_name }}" name="students_{{ student_id }}_marks" id="quiz_3_{{ student_id }}">
<input type="text" class="total_marks" value="0" placeholder="Total marks of {{ student_name }}" name="students_{{ student_id }}_marks">
</div>
{% endfor %}
<input type="submit" value="Select">
</form>
</div>
<script>
function update_marks(current_element){
var student_element = current_element.closest(".student_wrapper");
var total_marks_element = student_element.querySelector(".total_marks");
total_marks_element.value=parseInt(total_marks_element.value)+parseInt(current_element.value);
}
</script>
</body>
</html>
dynamic_input.html :
from flask import Flask, render_template, url_for, request, jsonify, redirect
app = Flask(__name__)
@app.route('/')
def search():
students = {1: 'Mr. A', 2: 'Mr. B', 3: 'Mr. C'}
return render_template('dynamic_input.html', students = students)
@app.route('/results', methods = ['GET', 'POST'])
def results():
if request.method == 'GET':
return redirect(url_for('search'))
else:
data = []
for student in request.form:
data.append(request.form.getlist(student))
return jsonify(data)
Si les marques peuvent être des nombres flottants, utilisez la fonction parseFloat plutôt que parseInt .
Figure 1: Avant de soumettre le formulaire, la note totale est mise à jour dans l'événement onchange de la marque de quiz.
Figure 2: Après avoir soumis le formulaire, les valeurs sont analysées dans une liste où le dernier élément correspond au total des notes.
Merci très cher. J'apprécie vraiment votre temps et vos efforts.
@JunaidBaber, votez pour et acceptez la réponse si elle résout votre problème. Merci.
a>