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 variable field_correspondente takes the value of the field "outsourced";
-
The variable numbers applies a small regex and leaves only numbers;
-
The input variable represents a jQuery object of the input;
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 stranger:
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 the reason for using the "typed" id directly in the code to work and the others not?
Perhaps an important detail, these fields are "masked" and we use the following mask plugin: link
EDIT
We use the Yii 2.0 framework, so the statement may seem a bit unusual for 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',
]
]
]
);
?>
HTML result:
<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>
Generated inputmask Javascript:
var inputmask_0bf71e59 = {"mask":"99999-999"};
jQuery("#endereco-cep").inputmask(inputmask_0bf71e59);