web-dev-qa-db-fra.com

jQuery récupère les valeurs des entrées et crée un tableau

J'ai de nombreuses entrées sur une page. Je veux créer un tableau associatif avec le nom et la valeur de chaque entrée à 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();

EDIT - Grâce aux commentaires perspicaces, il semble que la création d'un objet soit une meilleure façon de procéder. Des suggestions sur la façon de créer un objet à la place?

javascriptjqueryinputkey-value
19
Don P

Vous pouvez utiliser .each() pour parcourir les éléments et ajouter les noms et les valeurs à une carte (un objet simple) comme ceci:

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

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

Voyez-le en action.

52
Jon

Je sais que cette question a quatre ans et la réponse acceptée suffit. Néanmoins, je voudrais apporter une réponse dans un souci de finalisation, car cette question est le premier résultat de recherche sur Google.

jQuery a une fonction de carte à partir de la version 1.2 (sortie en 2007). On pourrait faire quelque chose d'aussi simple que ce qui suit (c'est pas une solution multi-navigateur):

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

Bien que personne ne devrait jamais utiliser les fonctions fléchées en JavaScript, elles ne sont pas prises en charge dans IE ou Safari. Ce qui suit is une solution multi-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 pourrait provoquer des problèmes lorsque l'on tenterait d'utiliser des méthodes qui existent dans Array.prototype. Pour convertir le résultat en tableau, on peut procéder comme suit:

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

En les exécutant dans une boucle, vous pouvez créer un objet avec des valeurs accessibles par chaîne. Javascript n'a pas le concept d'un tableau associatif, mais en utilisant la syntaxe des crochets, vous pouvez accéder aux propriétés d'un objet 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

Voici un JsFiddle http://jsfiddle.net/rEtVt/ pour cela.

Ceci est également appelé un hashmap (concept) utilisé pour les recherches rapides.

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

Cela suppose, bien sûr, que vous voulez la valeur de toutes les entrées.

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

2
circusdei

Si vous avez besoin de sérialiser le formulaire pour la soumission ajax, alors vous devriez jeter un œil aux méthodes serialize et serializeArray jQuery. Des cas particuliers peuvent se produire lorsque vous avez de nombreuses entrées avec le même attribut name qui doivent créer un tableau sur le serveur.

Sinon, j'appellerais jquery serializeArray sur l'élément de formulaire et répéterais ses résultats pour le convertir en objet.

UPD: exemple ajouté http://jsfiddle.net/zQNUW/

1
Andrey Kuzmin