obtener - name jquery val()

Recuperar el valor del botón con jQuery

Question

Una simple, estoy tratando de recuperar el atributo de valor de un botón cuando se presiona usando jQuery, esto es lo que tengo:

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

En Firefox, mi alerta muestra ''buttonValue'', que es genial, pero en IE7 muestra ''Button Label''.

¿Qué jQuery debería usar para obtener siempre el valor del botón? ¿O debería usar un enfoque diferente?

Muchas gracias.

RESPUESTA: ahora estoy usando

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

Answer 1

Como el valor de un botón es un atributo, debe usar el método .attr () en jquery. Esto debería hacerlo

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

También puede usar attr para establecer atributos, más información en los documentos .

Esto solo funciona en JQuery 1.6+. Ver la respuesta de postpostmodern para versiones anteriores.

Answer 2

Dale a los botones un atributo de valor y luego recupera los valores usando esto:

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

Answer 3

El botón no tiene un atributo de valor. Para obtener el texto del botón, pruebe:

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

Answer 4

Inspirado por postpostmodern, he hecho esto para hacer que el trabajo .val () funcione a lo largo de mi código 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;
        }
    }
})

Sin embargo, no resuelve el problema de envío, resuelto por postpostmodern. Tal vez esto podría incluirse en la solución de postpostmodern aquí: http://gist.github.com/251287

Answer 5

Sé que esto fue publicado hace un tiempo, pero en caso de que alguien esté buscando una respuesta y realmente quiera usar un elemento de botón en lugar de un elemento de entrada ...

No puede usar .attr(''value'') o .val() con un botón en IE. IE informa tanto .val () como .attr ("valor") como la etiqueta de texto (contenido) del elemento de botón en lugar del valor real del atributo de valor.

Puede solucionarlo eliminando temporalmente la etiqueta del botón:

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

Hay algunos otros caprichos con botones en IE. He publicado una solución para los dos problemas más comunes aquí .

Answer 6

También puede usar los nuevos atributos de datos personalizados 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 7

intente esto para su botón:

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

Answer 8

si quieres obtener el atributo de valor (buttonValue) entonces usaría:

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

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