Capture form data and transform to UPPERCASE

Question

Capture form data and transform to UPPERCASE

Navigation

#1 by (3 votes)
#2 by (2 votes)
#3 by (2 votes)
#4 by (0 votes)

0

I have 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 uppercase in the input, in the JSON that is displayed in the alert it is small. How do I convert it to upper case?

javascript jquery

asked by anonymous 13.07.2017 / 17:14

4 answers

2

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

See the example below where I change the value in the blur event (when it loses focus), so when you 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>

13.07.2017 / 17:18

2

You can do this all at once in submitting the form, so it does not 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><formaction="javascript:void(0)">
    <input name="nome" type="text">
    <input type="submit" value="enviar">
</form>

13.07.2017 / 19:25

0

What you are looking for is the toUpperCase

JSON.stringify(obj).toUpperCase()

13.07.2017 / 17:19

Why does not this setTimeout work? Ajax, limit time even by reloading the page

score 3 · Accepted Answer

Try this:

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><formclass="form">

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

<input type="submit">

</form>

In summary: I removed the css command that displayed all uppercase and added a script that will automatically convert to every character entered by the user in any input of the form. So all data entered in any input will be saved in uppercase when you have it serialized.

If you do not intend to apply the automatic UpperCase effect to 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 to the fields in which 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());
});