jQuery obtient des valeurs à partir des entrées et crée un tableau

J'ai beaucoup d'entrées sur une page. Je veux créer un tableau associatif avec chaque entrée du nom et de la valeur à l'aide de jQuery. J'ai essayé:

<input class="activeInput" type="text" name="key1" value="red">
<input class="activeInput" type="text" name="key3" value="France">

inputValues = $('.activeInput').val();

MODIFIER - Grâce à la perspicacité des commentaires, il semble peut-être la création d'un objet est une meilleure façon d'aller. Toutes les suggestions sur la façon de créer un objet à la place?

source d'informationauteur Don P

  1. 49

    Vous pouvez utiliser .chacun() pour itérer sur les éléments, et d'ajouter les noms et les valeurs d'une carte (un objet ordinaire) comme ceci:

    var map = {};
$(".activeInput").each(function() {
    map[$(this).attr("name")] = $(this).val();
});

alert(map.key1); //"red"

    Le voir en action.

  2. 8

    Je suis au courant de cette question est de quatre ans, et l'on a accepté la réponse ne saurait suffire. Néanmoins, je voudrais contribuer à une réponse pour le bien de l'achèvement, puisque cette question est le premier résultat de recherche sur Google.

    jQuery a une fonction de mappage à partir de la version 1.2 (sorti en 2007). On pourrait faire quelque chose d'aussi simple que la suite (c'est pas une solution de navigateur):

    var $inputValues = $('.activeInput').map((i, el) => el.val());

    Bien que personne ne devrait jamais utiliser la flèche des fonctions en JavaScript, ils ne sont pas pris en charge dans IE ou Safari. La suite est une solution de navigateur:

    var $inputValues = $('.activeInput').map(function() {
    return $(this).val();
});

    Il est important de noter que la valeur de retour est pas un tableau natif. Cela peut entraîner des problèmes lorsque l'on essaie d'utiliser des méthodes qui existent dans la gamme.le prototype. Pour convertir le résultat dans un tableau, on peut effectuer les opérations suivantes:

    var inputValues = $('.activeInput').map(function() {
    return $(this).val();
}).toArray();
  3. 4

    En cours d'exécution par le biais d'une boucle, vous pouvez créer un objet avec de la ficelle accessible valeurs. Javascript n'est pas le concept d'un tableau associatif, mais à l'aide de support de la syntaxe, vous pouvez accéder aux propriétés d'un objet dans beaucoup de la même manière qu'un tableau associatif fonctionne en PHP.

    var values = {};
$('.activeInput').each(function() {
    values[this.name] = this.value;
});

console.log(values['key1'], values['key3']);
//Note, this is the same as above.
console.log(values.key1, values.key3);

    Dans votre console, vous devriez voir: rouge France

    Ici est un JsFiddle http://jsfiddle.net/rEtVt/.

    C'est aussi mentionnée comme une table de hachage (concept) utilisé pour de rapides recherches.

  4. 2
    var inputValues = new Array();
$('input').each(function(){
    inputValues[$(this).attr('name')] = $(this).val();
});

    Que c'est en supposant, bien sûr, que vous souhaitez la valeur de toutes les entrées.

    Cela étant dit, de nombreuses raisons de ne pas utiliser et le Tableau ont été portées à mon attention.

  5. 0

    Si vous avez besoin de sérialiser formulaire de soumission ajax, alors vous devriez jeter un oeil à sérialiser et serializeArray les méthodes jQuery. Des cas particuliers peuvent se produire lorsque vous avez de nombreuses entrées avec le même name attribut qui ont à faire ensemble sur le serveur.

    Sinon, je voudrais appeler jquery serializeArray sur l'élément de formulaire et effectuer une itération sur ses résultats pour le convertir en objet.

    UPD: ajout de l'exemple http://jsfiddle.net/zQNUW/

  6. -1

    Essayez ceci:

    var values = new Object() //creates a new instance of an object
$('.activeInput').each(function() {
    values[$(this).attr('name')] = $(this).val()
})

    Pour vérifier les propriétés de l'objet:

    output = ""
for (property in values) {
  output += property + ': ' + values[property]+'; ';
}
alert(output)