Comment ajouter un écouteur d'événement à plusieurs éléments?

Question

var input = document.getElementById('thumbimg'); 
      input.addEventListener('change', function() { $("input.imgcheck").attr("disabled", ""); }, false); 

J'utilise ce code pour activer le bouton d'envoi lorsque l'utilisateur sélectionne un fichier à télécharger. Mais que faire si je veux ajouter plus d'un champ de téléchargement? Je dois savoir comment activer le bouton de soumission uniquement si tous les champs de téléchargement sont remplis. Des idées?

Answer 1

Mise à jour:

@Simeon fait un commentaire important et il a raison. Pour résoudre ce problème, vous pouvez vérifier la valeur de chaque champ et voir si elle est vide ou non:

var $fields = $('.thumbimg'), 
    $submit = $("input.imgcheck"), 
    numRequiredFields = $fields.length; // or 3 as per your comment (somewhere) 

function runOnChange() { 
    var $filledFields = $fields.filter(function(){ 
     return $(this).val() !== ""; 
    }); 
    if($filledFields.length >= numRequiredFields) 
     // all fields changed 
     // run logic here 
     $submit.attr("disabled", ""); 
    } 
    else { 
     $submit.attr("disabled", "disabled"); 
    } 
} 

$fields.change(runOnChange); 

j'espérais pour éviter l'inspection tous les domaines à chaque changement, mais il semble que ce soit inévitable.

---

réponse originale:

Vous devrait garder une trace des champs ont changé. Si vous avez plus d'un champ de téléchargement de fichiers, vous devez utiliser des classes, pas d'ID:

var numFields = $('.thumbimg').length, 
    changedFields = 0; 

function runOnChange() { 
    changedFields++; 
    if(changedFields >= numFields) { 
     // all fields changed 
     // run logic here 
     $("input.imgcheck").attr("disabled", ""); 
    } 
} 

$('.thumbimg').change(runOnChange); 

De plus, si vous utilisez jQuery de toute façon, alors cohérente et l'utiliser tout au long du script. Surtout ne pas utiliser addEventListener, ce qui ne fonctionne pas dans IE8 et ci-dessous. jQuery est là pour abstraire des différences de ce navigateur.

Answer 2

D'une part, vous pouvez utiliser un sélecteur plus générique. Par exemple:

$(".mytest").change(function() { $(this).attr("disabled", ""); } ; 

appliquera l'événement à chaque élément qui contient la classe mytest. En revanche, vous pouvez utiliser le code delegate function. Par exemple:

$("#myContainer").delegate(".mytest", "change", function(){ $(this).attr("disabled", ""); }); 

appliquera l'événement à chaque élément qui contient la classe mytest mais appartient au conteneur principal dont l'id est myContainer.

[EDIT] (modifié le code ci-dessus) Pour vérifier si vos entrées sont remplis, vous pouvez utiliser ce code (devrait fonctionner même si non testé ici) en utilisant les name selector:

if ($('input[disabled!=""]').length !== 0) { 
    // submit 
} 

Cordialement,

Max

Answer 3

Vous pouvez utiliser

$('input').change(function() { 

}); 

pour lier la fonction à l'événement change() pour tous les éléments <input>. Ajoutez ensuite des vérifications au corps de la fonction et activez le <input type="submit"/> si la validation réussit.

Certains plugins jQuery sont disponibles. Vous pouvez utiliser jQueryFormValidtor (par exemple) et jQuery Form Validation Plugins pour commencer.

Answer 4

La réponse acceptée -t a fait fonctionne pas correctement. Le bouton de soumission serait activé si l'utilisateur change le fichier/l'image dans le premier champ de fichier un certain nombre de fois. Regardez le this demo, qui vérifie que chaque entrée a une valeur. Code:

var fileInputs = $('input[type=file]'); 
var submitBtn = $('input[type=submit]'); 
fileInputs.change(function() { 
    if(fileInputs.filter('[value=""]').length == 0) 
     submitBtn.removeAttr('disabled'); 
    else 
     submitBtn.attr('disabled', 'disabled'); 
});