Obtenir la valeur du nom d'attribut de <input>


134

Comment obtenir la valeur du nom d'attribut d'une balise d'entrée à l'aide de jQuery. Veuillez aider.

<input name='xxxxx' value=1>

Réponses:


270

Donnez à votre entrée un identifiant et utilisez la attrméthode:

var name = $("#id").attr("name");

33

Utilisez la attrméthode de jQuery comme ceci:

alert($('input').attr('name'));

Notez que vous pouvez également utiliser attrpour définir les valeurs d'attribut en spécifiant un deuxième argument:

$('input').attr('name', 'new_name')

18
var value_input = $("input[name*='xxxx']").val();

Ce message est automatiquement signalé comme étant de mauvaise qualité car il s'agit d'un code très court / uniquement. Pourriez-vous l'élargir en ajoutant du texte pour expliquer comment cela résout le problème?
gung - Réintègre Monica le

2
Cela ne résout pas le problème. OP veut obtenir la valeur du nom; cela suppose que vous le savez déjà.
felwithe

16

Bien qu'il soit indéniable que jQuery est un outil puissant, c'est une très mauvaise idée de l'utiliser pour une opération aussi triviale que "obtenir la valeur d'attribut d'un élément".

À en juger par la réponse actuellement acceptée, je vais supposer que vous avez pu ajouter un attribut ID à votre élément et l'utiliser pour le sélectionner.

Dans cet esprit, voici deux morceaux de code. Tout d'abord, le code qui vous a été donné dans la réponse acceptée:

$("#ID").attr("name");

Et deuxièmement, la version Vanilla JS de celui-ci:

document.getElementById('ID').getAttribute("name");

Mes résultats:

  • jQuery: 300k opérations / seconde
  • JavaScript: 11 000 000 opérations / seconde

Vous pouvez tester par vous-même ici . La version "JavaScript brut" est plus de 35 fois plus rapide que la version jQuery.

Maintenant, ce n'est que pour une opération, avec le temps, vous aurez de plus en plus de choses dans votre code. Peut-être que pour quelque chose de particulièrement avancé, la solution optimale "pur JavaScript" prendrait une seconde pour s'exécuter. La version jQuery peut prendre 30 secondes à une minute entière! C'est énorme! Les gens ne vont pas s'asseoir pour ça. Même le navigateur s'ennuiera et vous offrira la possibilité de tuer la page Web pour avoir pris trop de temps!

Comme je l'ai dit, jQuery est un outil puissant, mais il ne doit pas être considéré comme la réponse à tout .


belle réponse, j'ai vérifié si javascript est plus rapide que jquery, non?
Rijo

Vous avez répondu à cette question 4 ans après que la question a été posée et vous n'avez pas répondu à la question. La personne a demandé comment le faire dans jQuery. Il appartient au programmeur d'utiliser jQuery ou Vanilla JS et est en dehors de la portée de la question
Zachary Weixelbaum

Vanilla JS! ?? Je plaisante, j'ai passé une demi-heure à rechercher ce qu'est le hack Vanilla JS.
Basheer AL-MOMANI

Peut-être que le développeur ne le sait pas. J'étais conscient du fait que les frameworks comme jQuery entraînent une surcharge. Mais je ne m'attendais pas à ralentir des tâches aussi simples avec un facteur 35 lors de l'utilisation de jQuery ...
Daniel

7

Vous devez écrire un sélecteur qui sélectionne d'abord le bon <input>. Idéalement, vous utilisez l'ID de l'élément $('#element_id'), à défaut l'ID de son conteneur $('#container_id input')ou la classe de l'élément $('input.class_name').

Votre élément n'a aucun de ces éléments et aucun contexte, il est donc difficile de vous dire comment le sélectionner.

Une fois que vous avez trouvé le sélecteur approprié, vous utiliserez la méthode attr pour accéder aux attributs de l'élément. Pour obtenir le nom, vous utiliseriez $(selector).attr('name')ce qui reviendrait (dans votre exemple) 'xxxxx'.


5

Une meilleure façon pourrait être d'utiliser 'this', il prend quel que soit le nom de 'id' et l'utilise. Tant que vous ajoutez le nom de classe appelé «mytarget».

Chaque fois que l'un des champs ayant une cible change, une boîte d'alerte avec le nom de ce champ s'affiche. Coupez et dépassez tout le script pour que cela fonctionne!

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>
<script>
$(document).ready(function() {
 $('.mytarget').change(function() {
var name1 = $(this).attr("name");
alert(name1);
 });
});
</script>

Name: <input type="text" name="myname" id="myname" class="mytarget"><br />
Age: <input type="text" name="myage" id="myage" class="mytarget"><br />

1
var theName;

theName = $("input selector goes here").attr("name");

1

utilisation de la valeur obtenir le nom de l'entrée

 $('input[value="1"]').attr('name');

en utilisant id obtenir le nom d'entrée

 $('input[class="id"]').attr('name');
   $('#id').attr('name');

en utilisant la classe obtenir le nom de l'entrée

 $('input[value="classname"]').attr('name');
   $('.classname').attr('name');  //if classname have unique value

0

Si vous avez affaire à un seul élément de préférence, vous devez utiliser le idsélecteur comme indiqué sur la réponse GenericTypeTea et obtenir le nom comme $("#id").attr("name");.

Mais si vous voulez, comme je l'ai fait quand j'ai trouvé cette question, une liste avec tous les noms d'entrée d'une classe spécifique (dans mon exemple une liste avec les noms de toutes les cases à cocher non cochées avec .selectable-checkboxclasse), vous pouvez faire quelque chose comme:

var listOfUnchecked = $('.selectable-checkbox:unchecked').toArray().map(x=>x.name);

ou

var listOfUnchecked = [];
$('.selectable-checkbox:unchecked').each(function () {
    listOfUnchecked.push($(this).attr('name'));
});

0

Passez la classe à la balise d'entrée et accédez à la valeur du nom à l'aide de la classe.

<input class="test-class" name='xxxxx' value=1>

<script>
    $('.test-class').attr('name');
</script>

Ou vous pouvez également accéder à la valeur en utilisant id.

<input id="test-id" name='xxxxx' value=1>

<script>
    $('#test-id').attr('name');
</script>

-2

Pour la ligne ci-dessous, initialement rencontré un problème avec le fait de donner un code unique que la valeur 'currnetRowAppName' ne prend pas d'espace avec la chaîne. Donc, après cela, donner un code unique '"+row.applicationName+"', cela prend également de la place.

Exemple:

<button class='btn btn-primary btn-xs appDelete' type='button' currnetRowAppName='"+row.applicationName+"' id="+row.id+ >

var viewAppNAME = $(this).attr("currnetRowAppName");
alert(viewAppNAME)

Cela fonctionne bien.

En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.