web-dev-qa-db-fra.com

Comment obtenir le type d'entrée en utilisant jquery?

J'ai une page où le type d'entrée varie toujours et j'ai besoin d'obtenir les valeurs en fonction du type d'entrée. Donc, si le type est une radio, il faut que je vérifie ce qui est coché, et si c’est une case à cocher, il me faut le faire maintenant, et si c’est une liste déroulante, j’ai besoin de savoir laquelle est sélectionnée, et moi si c’est un texte/textarea j'ai besoin de connaître les valeurs.

Une idée sur comment faire ça?

jqueryinputtypes
134
Luci

EDIT 1 février 2013. En raison de la popularité de cette réponse et des modifications apportées à jQuery dans la version 1.9 (et 2.0) concernant les propriétés et les attributs, j'ai ajouté quelques notes et un violon pour voir comment cela fonctionne lors de l'accès aux propriétés/attributs lors de la saisie, boutons et certains choisit. Le violon ici: http://jsfiddle.net/pVBU8/1/

obtenir toutes les entrées:

var allInputs = $(":input");

obtenir tous les types d'entrées:

allInputs.attr('type');

obtenir les valeurs:

allInputs.val();

Remarque: .val () n'est pas la même chose que: vérifié pour les types où cela est pertinent. utilisation:

.attr("checked");

EDIT 1 févr. 2013 - re: jQuery 1.9 utilise prop () pas attr () car attr ne renverra pas les valeurs appropriées pour les propriétés qui ont changé.

.prop('checked');

ou simplement

$(this).checked;

pour obtenir la valeur du chèque - quel qu’il soit actuellement. ou utilisez simplement le ': vérifié' si vous voulez seulement ceux qui sont cochés.

EDIT: Voici un autre moyen d’obtenir le type:

var allCheckboxes=$('[type=checkbox]');

EDIT2: Notez que la forme de:

$('input:radio');

est perçu sur

$(':radio');

ce qui équivaut à:

$('input[type=radio]');

mais "l'entrée" est souhaitée pour ne récupérer que les entrées et ne pas utiliser l'universel "*" lorsque la forme de $(':radio') est utilisée, ce qui équivaut à $('*:radio');

EDIT 19 août 2015: la préférence pour la $('input[type=radio]'); devrait être utilisée car elle permet ensuite aux navigateurs modernes d'optimiser la recherche d'une entrée radio.

EDIT le 1 février 2013 par commentaire re: select elements @dariomac

$('select').prop("type");

renverra "select-one" ou "select-multiple" en fonction de l'attribut "multiple" et

$('select')[0].type

retourne le même pour le premier select s'il existe. et

($('select')[0]?$('select')[0].type:"howdy")

retournera le type s'il existe ou "comment faire" si ce n'est pas le cas.

 $('select').prop('type');

renvoie la propriété du premier dans le DOM s'il existe ou "indéfini" s'il n'en existe pas.

$('select').type

renvoie le type du premier s'il existe ou une erreur s'il n'en existe pas.

243
Mark Schultheiss

Vous pouvez faire ce qui suit:

var inputType = $('#inputid').attr('type');
15
xil3

Si ce que vous dites, c'est que vous voulez obtenir toutes les entrées dans un formulaire qui ont une valeur sans vous soucier du type d'entrée, essayez ceci:

Exemple: http://jsfiddle.net/nfLfa/

var $inputs = $('form').find(':checked,:selected,:text,textarea').filter(function() {
    return $.trim( this.value ) != '';
});

Vous devriez maintenant avoir un ensemble d’éléments d’entrée ayant une certaine valeur.

Vous pouvez mettre les valeurs dans un tableau:

var array = $inputs.map(function(){
    return this.value;
}).get();

Ou vous pouvez les sérialiser:

var serialized = $inputs.serialize();
9
user113716
GetValue = function(id) {
  var tag = this.tagName;
  var type = this.attr("type");

  if (tag == "input" && (type == "checkbox" || type == "radio"))
    return this.is(":checked");

  return this.val();
};
7
Matthew Abbott

Le meilleur endroit pour commencer à chercher est http://api.jquery.com/category/selectors/

Cela vous donnera une bonne série d'exemples.

En définitive, la sélection des éléments dans le DOM est réalisée à l'aide de sélecteurs CSS. Par conséquent, si vous songez à obtenir un élément par identifiant, vous souhaiterez utiliser $ ('# elementId'), si vous souhaitez que toutes les balises d'entrée utilisent $ ('input') et enfin, la partie que vous voudrez si vous voulez que toutes les balises d’entrée avec un type de case à cocher utilisent $ ('input, [type = checkbox])

Remarque: vous constaterez que la plupart des valeurs souhaitées se trouvent sur des attributs. Le sélecteur CSS pour les attributs est donc: [nomAttribut = valeur]

Juste parce que vous avez demandé le menu déroulant comme ajouté à une zone de liste, essayez ce qui suit:


$('select, [size]).each(function(){
  var selectedItem = $('select, [select]', this).first();
});

Le code était de la mémoire, alors merci de nous le signaler pour les petites erreurs

4
Robert
$("#yourobj").attr('type');
4
Ergec

Il semblerait que la fonctionnalité attr devienne de plus en plus obsolète

$(this).attr('TYPE')
undefined
$(this).prop('type')
"text"
3
pat capozzi
var val = $('input:checkbox:checked, input:radio:checked, \
   select option:selected, textarea, input:text',
   $('#container')).val();

Commentaires:

  1. Je suppose qu’il existe exactement n élément de formulaire, qui peut être une zone de texte, un champ de saisie, un formulaire de sélection, un ensemble de boutons radio ou une seule case à cocher (vous devrez mettre à jour mon code si vous le souhaitez. besoin de plus de cases à cocher).

  2. L'élément en question réside dans un élément portant l'ID container (pour supprimer les ambiguïtés par rapport aux autres éléments de la page).

  3. Le code renverra ensuite la valeur de l'élément premier correspondant trouvé. Puisque j'utilise :checked et ainsi de suite, cela doit toujours correspondre exactement à la valeur de ce que vous recherchez.

3
Boldewyn

Dans mon application, je me suis retrouvé avec deux éléments différents ayant le même identifiant (mauvais). Un élément était une div et l'autre une entrée. J'essayais de résumer mes contributions et il m'a fallu un certain temps pour comprendre les identifiants en double. En plaçant le type de l'élément souhaité devant #, j'ai pu saisir la valeur de l'élément input et ignorer le div:

$("input#_myelementid").val();

J'espère que ça aide.

0
Tibi