¿Cómo puedo cambiar todos los valores de entrada a mayúsculas usando Jquery?

2 minutos de lectura

Quiero cambiar todos los valores de mi formulario a mayúsculas antes de enviar el formulario.

Hasta ahora tengo esto pero no funciona.

$('#id-submit').click(function () {
        var allInputs = $(":input");
        $(allInputs).value.toUpperCase();
        alert(allInputs);
});

  • allInputs.val().toUpperCase()

    – PlantTheIdea

    1 de marzo de 2013 a las 17:36

  • Aprender acerca .val()

    – epascarello

    1 de marzo de 2013 a las 17:38

  • @LifeInTheGrey val() solo obtiene el valor del primer elemento

    – Cristóbal

    1 de marzo de 2013 a las 17:39

  • Lo siento, debería haber puesto más contexto. si está usando jQuery, debe usar jQuery .val() en lugar de vanilla JS .value. Eso es todo lo que estaba tratando de transmitir, perdón por la confusión. por lo tanto comentar, no responder.

    – PlantTheIdea

    1 de marzo de 2013 a las 17:41


avatar de usuario
Selvakumar Arumugam

Prueba como a continuación,

$('input[type=text]').val (function () {
    return this.value.toUpperCase();
})

Deberías usar input[type=text] en vez de :input o input ya que creo que su intención es operar solo en el cuadro de texto.

  • $(allInputs) en realidad debería ser $(“:input”), no es necesario duplicar $

    – Cristóbal

    1 de marzo de 2013 a las 17:43


usar css:

input.upper { text-transform: uppercase; }

probablemente sea mejor usar el estilo y convertir el lado del servidor. También hay un complemento de jQuery para forzar mayúsculas: http://plugins.jquery.com/plugin-tags/mayúsculas

  • NOTA: esto solo mostrará el texto en mayúsculas, no convertirá los valores para guardarlos de esa manera.

    – PlantTheIdea

    1 de marzo de 2013 a las 17:37

  • @GustavoReyes como dice esta respuesta, realmente necesita hacer la conversión en el servidor de todos modos. No puede estar seguro de que se ejecutará el código del lado del cliente.

    – Puntiagudo

    1 de marzo de 2013 a las 19:22

$('#id-submit').click(function () {
    $("input").val(function(i,val) {
        return val.toUpperCase();
    });
});

VIOLÍN

Use css text-transform para mostrar texto en todo el tipo de texto de entrada. En Jquery, puede transformar el valor a mayúsculas en el evento de desenfoque.

CSS:

input[type=text] {
    text-transform: uppercase;
}

jquery:

$(document).on('blur', "input[type=text]", function () {
    $(this).val(function (_, val) {
        return val.toUpperCase();
    });
});

Puedes usar cada()

$('#id-submit').click(function () {
      $(":input").each(function(){
          this.value = this.value.toUpperCase();          
      });
});

  • “Esto funciona de maravilla” hasta que se encuentra con un elemento de selección.

    – Kevin B.

    1 de marzo de 2013 a las 17:49

  • “Esto funciona de maravilla” hasta que se encuentra con un elemento de selección.

    – Kevin B.

    1 de marzo de 2013 a las 17:49

¿Ha sido útil esta solución?