Assigning values by jQuery is not working

Asked

Viewed 179 times

0

I have a javascript code that fills fields in the form with "outsourced" data, most of the assignments are ok, the problem is in fields that we consider "Masked" and receive only numbers.

The code is as follows::

....
//Como a variável "input" é definida neste contexto
//Percorre todos os campos do formulário de origem da requisição
//e que "desejam" utilizar os dados da consulta. 
//O valor {id_formulario_origem) é substituído em tempo de execução...
jQuery('#{id_formulario_origem}').find("*[data-consulta-cnpj]").each(function () {
    utilizarDadosConsultaCNPJ(jQuery(this));
});
....
function utilizarDadosConsultaCNPJ(input)
{
....
var valor = htmlDecode(campo_correspondente.html()),
            numeros = valor.replace(/[^0-9]/g, '');
            input.val(numeros);
  • The corresponding field variable takes the value of the "outsourced field";

  • The number variable applies a small regex and leaves only numbers;

  • The input variable represents a jQuery input object;

Examples of values obtained by a console.log() of these variables:

88.350-450 88350450 jQuery.fn.init[1] 

Let’s work with the id input "address-cep" in this example, then follow the weirdest:

input.val(numeros); //Não funciona
input.val(htmlDecode(campo_correspondente.html())); //Não funciona
input.val = numeros; //Não funciona
jQuery(input).val(numeros); //Não funciona
jQuery("#" + input.attr("id")).val(numeros); //Não funciona


var inputJS = document.getElementById(input.attr("id"));
inputJS.val = numeros; //Não funciona

jQuery("#endereco-cep").val(numeros); //FUNCIONA!

Can anyone explain to me why using the id "typed" directly in the code work and the others not?

Perhaps an important detail, these fields are "Masked" and we use the following plugin from Mask: https://github.com/RobinHerbots/Inputmask

EDIT

We used the Yii 2.0 framework, so the statement may seem a little unusual to some.

<?= $form->field($model, 'cep', [
    'addon' => [
        'append' => [
            'content' => Html::button('<i class="fa fa-map-marker"></i>', ['id' => ConsultaCEPWidget::ID_BOTAO_INPUT_CEP, 'class' => 'btn grey-mint', 'title' => 'Consulta CEP']),
            'asButton' => true
        ]
    ],
    'options' => [
        'class' => 'btn-hidden-ajax'
    ]
])->widget(MaskedInput::className(),
    [
        'mask' => '99999-999',
        'options' => [
            'class' => 'form-control',
            'data' => [
                'consulta-cnpj' => 'cep', 'consulta-cnpj-tipo' => 'maskedNumeros',
                'consulta-cep' => 'cep',
                'consulta-cei' => 'cep', 'consulta-cei-tipo' => 'maskedNumeros',
            ]
        ]
    ]
);
?>

Result in HTML:

<div class="btn-hidden-ajax field-endereco-cep required has-success">
    <label class="control-label" for="endereco-cep">CEP</label>
    <div class="input-group">
        <input type="text" id="endereco-cep" class="form-control" name="Endereco[cep]"
                                    data-consulta-cnpj="cep" data-consulta-cnpj-tipo="maskedNumeros"
                                    data-consulta-cep="cep" data-consulta-cei="cep"
                                    data-consulta-cei-tipo="maskedNumeros"
                                    data-plugin-inputmask="inputmask_0bf71e59">
        <span class="input-group-btn">
            <button type="button" id="botao-consulta-cep" class="btn grey-mint" title="Consulta CEP">
                <i class="fa fa-map-marker"></i>
            </button>
        </span>
    </div>
    <div class="help-block"></div>
</div>

Javascript generated from inputmask:

var inputmask_0bf71e59 = {"mask":"99999-999"};
jQuery("#endereco-cep").inputmask(inputmask_0bf71e59);
  • may display the declaration of the input?

  • 1

    Rafael, you need to see what the "type" of this variable input, be for dom the method .val() won’t work because it belongs to jQuery.

  • @Marllonnasser I’ll ask the question...

  • @What’s up with that? then... I tested it this way now... input.val = numbers; and returned the following error: Uncaught Typeerror: input.val is not a Function

  • @Rafaelwithoeft as you create this input.val() ?

  • @devgaspa I will add in the question how the variable "input" is created...

  • I did some more tests and managed to solve the problem by taking regex to leave only numbers... input.val(value); worked... by how much I’ll leave this way ;/ what I don’t understand is that a few days ago it was all working perfectly...

Show 2 more comments
No answers

Browser other questions tagged

You are not signed in. Login or sign up in order to post.