Je dois obtenir tous les éléments d'entrée dans un div puis attacher des gestionnaires d'événements, de sorte que chaque fois que les valeurs changent, un champ caché est mis à jour. Les éléments enfants dans la div peuvent déjà contenir des gestionnaires d'événements, si c'est le cas, l'attach doit les enchaîner.Eléments d'entrée JQuery
Toute aide est très appréciée.
poignées jQuery enchaînant automatiquement, ce qui suit devrait fonctionner:
$("div input").change(function() { whatever(); });
Eh bien, je suis curieux de savoir pourquoi vous avez besoin de mettre à jour un champ caché et que vos données dupliquées. Mais si vous insistez, voici une solution "taille unique", bien que vous puissiez perdre de la flexibilité au lieu d'attacher manuellement chaque élément.
D'abord, le HTML:
<form id="form">
<input type="text" id="txtName" />
<input type="hidden" id="hdnName" />
<input type="text" id="txtEmail" />
<input type="hidden" id="hdnEmail" />
<select id="selGender">
<option value="male">Male</option>
<option value="female">Female</option>
</select>
<input type="hidden" id="hdnGender" />
</form>
Maintenant, le Javascript:
$(document).ready(function() {
$("#form").find("input[type='text'], select").change(function() {
$this = $(this);
var id = $this.attr("id");
id = id.split(3, id.length - 1);
$("#hdn" + id).val($this.val())
});
});
Pour que cela fonctionne, il suppose que vous disposez chacun de vos champs text champs, aussi qu'ils suivent la convention de nommage je ici ([txt|sel]FieldName, hdnFieldName)
Cela va-t-il également attacher le gestionnaire d'événements à la zone de texte? – rahul
Pas comme il est écrit, bien qu'il ne soit pas beaucoup plus difficile d'étendre ce code d'une telle manière. (le support de textarea peut être ajouté aussi facilement que le support choisi si je ne me trompe pas) –
Ma condition est que j'ai un div où les éléments html sont insérés par le modèle html. Chaque fois que l'une des valeurs d'éléments html est modifiée dans la div, je dois parcourir tous les éléments et stocker leurs valeurs dans un seul champ caché que je peux récupérer du côté serveur. – codeasp
$("#divID :input").change(function(){
// write your code here
});
où divID est l'identifiant unique de la div. Ceci sélectionne tous les éléments input, textarea, select et button à l'intérieur du div.
Voir :input Selector
Si vous voulez éviter l'élément de bouton vous pouvez utiliser l'opérateur not comme
$("#divI :input:not('button')").change(function(){
});
J'ai mis une alerte dans le corps de la fonction, mais je ne suis pas alertes. Est-ce que ça marche pour toi? Je testais sur les boîtes de sélection. En passant, il peut y avoir une variété d'éléments d'entrée, y compris select, zones de texte, bouton radio, etc – codeasp
Oui, mon code devrait fonctionner pour les zones de texte, les cases d'option et les cases de sélection au moins cependant, pas à chaque pression de touche). La raison la plus probable pour laquelle cela ne fonctionne pas est que vous ne sélectionnez pas les éléments attendus dans le sélecteur (c'est-à-dire le bit "div input"). Pour tester cette théorie, essayez: $ ("div input"). Each (function() {alert (this);}); Cela devrait vous indiquer si vous êtes en train de sélectionner les bons éléments. –
Il ne fonctionnera pas pour les boîtes de sélection, car il ne recherche que les étiquettes d'entrée. Vous auriez besoin de changer le sélecteur à quelque chose comme $ ("input, select"). – monksp