Récupérer la valeur d'un bouton avec jQuery

Question

J'essaie de récupérer la valeur de l'attribut d'un bouton lorsqu'il a été pressé en utilisant jQuery, voici ce que j'ai :

<script type="text/javascript">
    $(document).ready(function() {
        $('.my_button').click(function() {
            alert($(this).val());
        });
    });
</script>

<button class="my_button" name="buttonName" value="buttonValue">
    Button Label</button>

Dans Firefox, mon alerte affiche "buttonValue", ce qui est très bien, mais dans IE7, elle affiche "Button Label".

Quel jQuery dois-je utiliser pour obtenir toujours la valeur du bouton ? Ou devrais-je utiliser une approche différente ?

Merci beaucoup.

RÉPONSE : J'utilise maintenant

<input class="my_button" type="image" src="whatever.png" value="buttonValue" />

Answer 1

La valeur d'un bouton étant un attribut, vous devez utiliser la méthode .attr() de jquery. Ceci devrait faire l'affaire

<script type="text/javascript">
    $(document).ready(function() {
        $('.my_button').click(function() {
            alert($(this).attr("value"));
        });
    });
</script>

Vous pouvez également utiliser attr pour définir des attributs, plus d'infos dans les docs .

Cela ne fonctionne que dans JQuery 1.6+. Voir la réponse de postpostmodern pour les versions plus anciennes.

Answer 2

Je sais que cela a été posté il y a un certain temps, mais au cas où quelqu'un chercherait une réponse et voudrait vraiment utiliser un élément bouton au lieu d'un élément d'entrée...

Vous ne peut pas utiliser .attr('value') ou .val() avec un bouton dans IE. IE signale à la fois le .val() et le .attr("value") comme étant le libellé (contenu) de l'élément bouton au lieu de la valeur réelle de l'attribut value.

Vous pouvez contourner ce problème en supprimant temporairement l'étiquette du bouton :

var getButtonValue = function($button) {
    var label = $button.text(); 
    $button.text('');
    var buttonValue = $button.val();
    $button.text(label);
    return buttonValue;
}

Il y a quelques autres bizarreries avec les boutons dans IE. J'ai posté une solution pour les deux problèmes les plus courants ici .

Answer 3

Le bouton n'a pas d'attribut de valeur. Pour obtenir le texte du bouton, essayez :

$('.my_button').click(function() {
     alert($(this).html());
});

Answer 4

Vous pouvez également utiliser les nouveaux attributs de données personnalisés de HTML5.

<script type="text/javascript">
$(document).ready(function() {
    $('.my_button').click(function() {
        alert($(this).attr('data-value'));
    });
});
</script>

<button class="my_button" name="buttonName" data-value="buttonValue">Button Label</button>

Answer 5

Essayez ceci pour votre bouton :

<input type="button" class="my_button" name="buttonName" value="buttonValue" />