Получить значение кнопки с помощью jQuery - PullRequest
Новая
       60

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

52 голосов
/ 28 января 2009

Простой, я пытаюсь получить атрибут значения кнопки, когда она была нажата с помощью 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" />

Ответы [ 9 ]

87 голосов
/ 28 января 2009

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

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

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

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

40 голосов
/ 08 декабря 2009

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

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

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

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

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

16 голосов
/ 06 января 2012

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

$('.my_button').click(function() {
     alert($(this).html());
});
10 голосов
/ 02 декабря 2010

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

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

$("button").click(function(){
  var value=$(this).attr("value");
});
4 голосов
/ 28 января 2009

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

<input type="button" class="my_button" name="buttonName" value="buttonValue" />
1 голос
/ 07 апреля 2010

Вдохновленный 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

0 голосов
/ 11 июля 2017 
 <!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>
0 голосов
/ 28 января 2009

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

<script type="text/javascript">
    $(document).ready(function() {
        $('.my_button').click(function() {
            alert($(this).attr('value'));
        });
    });
</script>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...