Получить значение кнопки с помощью jQuery

Простой, я пытаюсь получить атрибут value кнопки, когда его нажали, используя jQuery, вот что у меня есть:

<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>

В Firefox мое предупреждение отображает "buttonValue", что отлично, но в IE7 отображается "Button Label".

Какой jQuery я должен использовать, чтобы всегда получать значение кнопки? Или я должен использовать другой подход?

Большое спасибо.

ОТВЕТ: Я использую

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

Ответ 1

Я знаю, что это было опубликовано некоторое время назад, но в случае, если кто-то ищет ответ и действительно хочет использовать элемент кнопки вместо элемента ввода...

Вы не можете использовать .attr('value') или .val() с помощью кнопки в IE. IE сообщает как .val(), так и .attr( "value" ) как текстовую метку (содержимое) элемента кнопки вместо фактического значения атрибута value.

Вы можете обойти его, временно удалив ярлык кнопки:

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

В IE есть несколько других причуд с кнопками. Я разместил исправление для двух наиболее распространенных проблем здесь.

Ответ 2

Поскольку значение кнопки является атрибутом, вам нужно использовать метод .attr() в jquery. Это должно сделать это

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

Вы также можете использовать attr для установки атрибутов, больше информации в документах.

Это работает только в JQuery 1.6+. См. Postpostmodern answer для более старых версий.

Ответ 3

Кнопка

не имеет атрибута value. Чтобы получить текст кнопки, попробуйте:

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

Ответ 4

Вы также можете использовать новые пользовательские атрибуты данных 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>

Ответ 5

Дайте кнопкам атрибут value, а затем извлеките значения, используя это:

$("button").click(function(){
  var value=$(this).attr("value");
});

Ответ 6

попробуйте это для вашей кнопки:

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

Ответ 7

Вдохновленный postpostmodern, я сделал это, чтобы сделать .val() работать на протяжении всего кода javascript:

jQuery(function($) {

    if($.browser.msie) {
        // Fixes a know issue, that buttons value is overwritten with the text

        // Someone with more jQuery experience can probably tell me
        // how not to polute jQuery.fn here:
        jQuery.fn._orig_val = jQuery.fn.val

        jQuery.fn.val = function(value) {
            var elem = $(this);
            var html
            if(elem.attr('type') == 'button') {
                // if button, hide button text while getting val()
                html = elem.html()
                elem.html('')
            }
            // Use original function
            var result = elem._orig_val(value);
            if(elem.attr('type') == 'button') {
                elem.html(html)
            }
            return result;
        }
    }
})

Однако он не решает проблему отправки, решаемую постпостмодерном. Возможно, это можно было бы включить в постпомодернистское решение здесь: http://gist.github.com/251287

Ответ 8

если вы хотите получить атрибут value (buttonValue), я бы использовал:

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

Ответ 9

 <!DOCTYPE html>
 <html>
 <head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">
 </script>
 <script>
 $(document).ready(function(){
   $("#hide").click(function(){
    $("p").toggle();

    var x = $("#hide").text();

      if(x=="Hide"){
      $("button").html("show");

      }
     else 
     {
     $("button").html("Hide");

      }

       });

   });

  </script>
  </head>
  <body>

 <p>If you click on the "Hide" button, I will disappear.</p>

 <button id="hide">Hide</button>



 </body>
 </html>