Capture form data and transform to UPPERCASE

Question

I have the input:

 <input id="id_nome" name="nome" type="text" class="form-control input-style" style="text-transform: uppercase" autofocus required>

I have the following function in Jquery:

$(function () {
        $('.form').submit(function () {
            //serializando os campos do formulário
            var dados = jQuery(this).serializeArray();
            var obj = dados;
            alert(JSON.stringify(obj));
            return false;
        });
    });

Although the data is capitalized in the input, in the JSON that is displayed in Alert it is in minuscule. How do I convert it to uppercase?

Answer 1

Try it this way:

jQuery(':input').keyup(function(){
   $(this).val($(this).val().toUpperCase());
});
$('.form').submit(function () {
    //serializando os campos do formulário
    var dados = jQuery(this).serializeArray();
    var obj = dados;
    alert(JSON.stringify(obj));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<form class="form">

<input id="id_nome" name="nome" type="text" class="form-control input-style" autofocus required>

<input type="submit">

</form>

In short: I removed the css displaying everything in uppercase and adding a script that will automatically capitalize each character entered by the user in any input form. Thus all data entered in any input will be saved in capital letters when you have them serialized.

If it is not the intention to apply the effect of UpperCase automatic in all fields, you can apply to only one field or set of fields, using the id of the desired field or by applying a class for fields where you want to apply the effect.

jQuery('#idCampo').keyup(function(){
   $(this).val($(this).val().toUpperCase());
});

or

jQuery('.class').keyup(function(){
   $(this).val($(this).val().toUpperCase());
});

Answer 2

You can convert the value to uppercase and reassign to input the uppercase value at some input event.

See the example below where I change the value in the event blur (when it loses focus), so when you go to access the input value it will already be as you expect.

document.getElementById('meuInput').addEventListener('blur', function() {
  this.value = this.value.toLocaleUpperCase();
});

document.getElementById('verValor').addEventListener('click', function() {
  var valorMeuInput = document.getElementById('meuInput').value;
  console.log(valorMeuInput);
});

.meuInput {
  text-transform: uppercase;
}

<input type="text" id="meuInput" />
<button type="button" id="verValor">Ver valor</button>

Answer 3

You can do this at once in the form submission, so don’t overload js with unnecessary events.

$('form').submit(function(){
    var data = {};
    jQuery(this).find('input[type!=submit], select').each(function(){
        // JOGA OS VALORES EM UPPER CASE PARA O OBJETO DATA QUE VAI SER ENVIADO
        data[this.getAttribute('name')] = this.value.toUpperCase();
    }).serialize();
    console.log(data);
});

input{
    text-transform: uppercase; /* ENGANA O USUARIO MOSTRANDO QUE ESTA TUDO EM MAIÚSCULO*/
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<form action="javascript:void(0)">
    <input name="nome" type="text">
    <input type="submit" value="enviar">
</form>

Answer 4

What you are looking for is the function toUpperCase

JSON.stringify(obj).toUpperCase()