recueillir la valeur uniquement à partir de l'entrée de texte qui a été modifié

Question

J'ai une page html qui, après l'appel ajax afficher beaucoup de lignes de données, dans chaque ligne j'ai un texte d'entrée avec une valeur différente, l'utilisateur peut modifier cette entrée de texte, puis appuyez sur un bouton pour effectuer une action de calcul.

Comment puis-je collecter avec javascript (jQuery) uniquement les valeurs qui ont été modifiées et les envoyer au script PHP. Je cherche un moyen simple, de ne pas enregistrer tous les grand nombre de vieilles valeurs puis comparer avec de nouvelles valeurs, Y at-il une telle solution?

Answer 1

Vous pouvez utiliser la fonction .data() de conserver une copie de leur origine valeurs, puis comparez-les à leurs valeurs lors de la soumission pour vous assurer que seules les valeurs modifiées sont soumises.

var inputs = $('input[type="text"]').each(function() { 
    $(this).data('original', this.value); 
}); 

$('#form').submit(function(){ 
    inputs.each(function() { 
     if ($(this).data('original') !== this.value) { 
      // Do something for the changed value 
     } else { 
      // And something else for the rest. 
     } 
    }); 
}); 

Voir une démonstration de cette ici: http://www.jsfiddle.net/yijiang/twCE9/

Answer 2

Vous pouvez utiliser l'événement onChange du champ de saisie et collecter les informations dans un champ masqué ou un tableau global pour cela.

Answer 3

Vous vous liez à l'événement de modification pour chaque entrée de données et stockez ces paires nom-valeur dans un tableau global ou dans des champs de formulaire masqués.

Une alternative serait d'ajouter une classe "modifiée" à chaque champ qui a été édité. Ensuite, quand ils soumettent le formulaire, vous pouvez soit créer un nouveau formulaire avec seulement ces éléments de classe changé ou supprimer les autres éléments de votre formulaire contenant toutes les entrées de texte.

<input type="text" class="data_input" name="name1" value="value1" /> 
<input type="text" class="data_input" name="name2" value="value2" /> 
... 
<input type="text" class="data_input" name="nameX" value="valueX" /> 

Puis dans votre JS

$(document).ready(function() { 
    $(".data_input").change(function() { 
     $(this).addClass('changed'); 
    }); 

Ou si vous êtes prêt à utiliser un tableau global:

var changedArr = []; 
$(document).ready(function() { 
    $(".data_input").change(function() { 
     changedArr.push({'name': $(this).attr('name'), 'value': $(this).val()}); 
    });