Comment détecter le changement dans une zone de saisie de texte dans jQuery

voix
0

J'ai deux zone de texte de saisie de texte et je veux faire le total de tout ce qui n'entré par l'utilisateur. Voici mon code:

$(document).ready(function(){
    var total = 0;
    $(.test).on(input, function(){
        // Print entered value in a div box
        total += parseInt($(this).val());
        $(#result).text(	total);
    });
});
<script src=https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js></script>
<p><input type=text class=test placeholder=Type something... id=myInput></p>
    <p><input type=text class=test placeholder=Type something... id=myInput></p>
    <div id=result></div>

Quand je l' entrée d' 10abord , puis il faut 11, alors si j'entre 100 puis il faut 111, je ne reçois pourquoi ce qui se passe. Là où je fais une erreur, me guider?

Créé 24/10/2019 à 12:52
source utilisateur
Dans d'autres langues...                            


3 réponses

voix
2

Sur votre code lorsque vous entrez le premier chiffre , il a été calculé au total parce que total += parseInt($(this).val()). par exemple, si votre premier chiffre est 1 alors à ce total de temps est mise à jour comme total = 1, sur la deuxième pression de touche, par exemple, prendre 0, alors votre total d'entrée devient 10. il calcule la valeur totale actuelle comme total = total + 10. c'est la raison pour laquelle vous obtenez 11 comme réponse

Essayez comme ça.

$(document).ready(function(){
    var total = 0;
    $(".test").on("input", function(){
        // Print entered value in a div box
        if ($("#myInput1").val() && $("#myInput2").val()) {
           total = parseInt(parseInt($("#myInput1").val()) + parseInt($("#myInput2").val()));
           $("#result").text(total);
        }
    });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p><input type="text" class="test" placeholder="Type something..." id="myInput1"></p>
<p><input type="text" class="test" placeholder="Type something..." id="myInput2"></p>
<div id="result"></div>

Créé 24/10/2019 à 12:58
source utilisateur

voix
0

La raison pour laquelle il ne vous a pas montré le résultat que vous voulez, parce que le calcul est faux. Vous ajoutez maintenant le nombre au total, chaque fois que l'on change de champ d'entrée. Donc, si vous tapez 123, il faut 0 + 1, puis 1 + 12, puis 13 + 123 de sorte que vous aurez 136 comme résultat.

J'ai écrit une solution possible à votre question. Le code est dans le violon ci-dessous.

Vous pouvez ajouter une fonction où vous calculer le total de tous les champs d'entrée (peut être plus de 2, il est générique).

function calculateTotal(){
  var total = 0;
    $( ".test" ).each(function( index ) {
      var value = $(this).val();
      if(value == ""){
        return;
      }
      total += parseInt(value);

    });
  $("#result").text(    total);
}

Et le changement de vos champs d'entrée, vous exécutez simplement cette fonction.

$(document).ready(function(){
    var total = 0;
    $(".test").on("input", function(){
        calculateTotal();
    });
});

Votre exemple est dans ce violon: https://jsfiddle.net/xL6hgder/2/

Créé 24/10/2019 à 13:01
source utilisateur

voix
0

Utilisez l'événement de changement au lieu de l'événement d'entrée. Il ne se déclenche que lorsque la valeur est « commited », au lieu de chaque combinaison de touches. Voir mdn pour plus de détails.

Créé 24/10/2019 à 12:59
source utilisateur

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more