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

Question

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

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

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

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

ответ:
Теперь я использую

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

404 9

jQuery

9 ответов:

Comments

Ничего не найдено.

postpostmodern · Accepted Answer · 2012-03-01 20:01:02

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

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

вы можете обойти его, временно удалив кнопку этикетка:
var getButtonValue = function($button) {
    var label = $button.text(); 
    $button.text('');
    var buttonValue = $button.val();
    $button.text(label);
    return buttonValue;
}
есть несколько других причуд с кнопками в IE. Я написал исправление для двух наиболее распространенных проблем здесь.

Neil Aitken · Accepted Answer · 2012-03-01 19:14:01

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

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

Mandeep Pasbola · Accepted Answer · 2012-10-19 17:18:06

кнопка не имеет атрибута значения. Чтобы получить текст кнопки попробуйте:
$('.my_button').click(function() {
     alert($(this).html());
});

krichard · Accepted Answer · 2010-12-02 12:50:48

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

steady_daddy · Accepted Answer · 2013-06-13 13:58:41

дайте кнопкам атрибут значения, а затем получить значения с помощью этого:
$("button").click(function(){
  var value=$(this).attr("value");
});

Natrium · Accepted Answer · 2009-01-28 12:16:41

попробуйте это для вашей кнопки:
<input type="button" class="my_button" name="buttonName" value="buttonValue" />

sbglasius · Accepted Answer · 2010-09-16 12:39:03

вдохновленный 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;
        }
    }
})
однако это не решает проблему отправки, решенную postpostmodern. Возможно, это можно было бы включить в решение postpostmodern здесь:http://gist.github.com/251287

Wayne Austin · Accepted Answer · 2009-01-28 12:13:50

Если вы хотите получить атрибут value (buttonValue), то я бы использовал:
<script type="text/javascript">
    $(document).ready(function() {
        $('.my_button').click(function() {
            alert($(this).attr('value'));
        });
    });
</script>

vlass · Accepted Answer · 2017-07-11 02:47:10

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