J'ai besoin d'aide pour calculer la somme des chiffres qu'un utilisateur est entré et l'affiche automatiquement. Lorsque l'utilisateur supprime un chiffre, la somme doit également calculer automatiquement.
p>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="col-lg-1"> <label>TEST 1 </label> <input type="hidden" name="section_id" value="<?php echo $section_id; ?>"> <input type="hidden" name="session_id" value="<?php echo $session_id; ?>"> <input type="hidden" name="student_id" value="<?php echo $student_id; ?>"> <input type="hidden" name="class_id" value="<?php echo $class_id; ?>"> <input type="number" name="mt_ca1" class="form-control input-sm rounded-0" required> </div> <div class="col-lg-1" id="t2"> <label>TEST 2</label> <input type="number" name="mt_ca2" class="form-control input-sm rounded-0" required> </div> <div class="col-lg-1" id="assg"> <label>TEST 3</label> <input type="number" name="mt_ca3" class="form-control input-sm rounded-0" required> </div> <div class="col-lg-1"> <label>TOTAL</label> <output id="result"></output> </div>
3 Réponses :
presque là. Vous ciblez p> '. COL-LG-1' code> qui sont des divs, pas des entrées. Vous devez cibler les entrées afin de lire leurs valeurs.
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-lg-1">
<label>TEST 1 </label>
<input type="hidden" name="section_id" value="<?php echo $section_id; ?>">
<input type="hidden" name="session_id" value="<?php echo $session_id; ?>">
<input type="hidden" name="student_id" value="<?php echo $student_id; ?>">
<input type="hidden" name="class_id" value="<?php echo $class_id; ?>">
<input type="number" name="mt_ca1" class="form-control input-sm rounded-0" required>
</div>
<div class="col-lg-1" id="t2">
<label>TEST 2</label>
<input type="number" name="mt_ca2" class="form-control input-sm rounded-0" required>
</div>
<div class="col-lg-1" id="assg">
<label>TEST 3</label>
<input type="number" name="mt_ca3" class="form-control input-sm rounded-0" required>
</div>
<div class="col-lg-1">
<label>TOTAL</label>
<output id="result"></output>
</div>
Au lieu de cela, cache vos entrées et (sur p> .col-lg-1 code> est un div strud> - vous attachez un événement de changement et essayez d'obtenir ceci.value code> d'un DIV qui ne fonctionnera pas. "entrée" code> événement) .ReRuce () code> ses valeurs dans un entier: p>
<div>
<label>TEST 1 </label>
<input type="number" name="mt_ca1" class="inp form-control input-sm rounded-0" required value="0">
</div>
<div class="col-lg-1" id="t2">
<label>TEST 2</label>
<input type="number" name="mt_ca2" class="form-control input-sm rounded-0" required value="0">
</div>
<div class="col-lg-1" id="assg">
<label>TEST 3</label>
<input type="number" name="mt_ca3" class="form-control input-sm rounded-0" required value="0">
</div>
<div class="col-lg-1">
<label>TOTAL</label>
<output id="result"></output>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Votre élément est le type de numéro et a des mêmes classes de formulaire-contrôle ', «INPUT-SM» et «arrondi-0». Donc, soit
$('.rounded-0').change(function() {
var total = 0;
$('.rounded-0').each(function() {
if ($(this).val() != '') {
total += parseInt($(this).val());
}
});
$('#result').html(total);
});
qu'est-ce qui ne va pas avec cette réponse au vote ?? :( @Missjargo
.Col-LG-1 est un div - vous attachez un événement de changement et essayez d'obtenirceci.value d'un div ...Changer quelque chose dans une entrée fait, en fait, déclencher un événement de changement dans le parent div parce qu'il bulle. Ce qui ne fonctionne pas, c'est
$ (this) .val () parce qu'un div n'a pas de valeur.