Add mascara from a select

Navigation
0

Good morning, I'm trying to add a mask to cpf from a select, but I'm not getting it.

HTML 

<select class="form-control" id="select" style="width:100px;" title="Escolha..." name="select"> 
    <option>Escolha...</option>             
    <option value="user_nome">Nome</option>
    <option value="user_cpf">CPF</option>
    <option value="user_email">Email</option>
    <option value="user_loja">Loja</option>
</select>

<input type="text" id="busca" class="form-control" placeholder="Digite sua busca" name="busca" style="width:250px;">

jQuery: 

var $select = $('#select option:selected').val();
if( $select == "CPF") {
    var $busca = $('#busca');
    $busca.mask('999.999.999-99');
}
    
asked by anonymous 17.04.2017 / 13:31

4 answers

0

Complementing the @Jessika response, follow an alternative using the change() function of jquery itself.

* Note that you must use the jquery mask plugin
* The unmask() method removes the mask from the field if it is not a CPF. 

$("#select").change(function() {
  addMaskToInput();
});

function addMaskToInput() {
  var $select = $('#select option:selected').val();
  var $busca = $('#busca');
  if ($select == "user_cpf") {
    $busca.mask('999.999.999-99');
  } else {
    $busca.unmask();
  }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/jquery.mask/1.14.10/jquery.mask.js">
</script>
<select class="form-control" id="select" style="width:100px;" title="Escolha..." name="select"> 
    <option>Escolha...</option>             
    <option value="user_nome">Nome</option>
    <option value="user_cpf">CPF</option>
    <option value="user_email">Email</option>
    <option value="user_loja">Loja</option>
</select>

<input type="text" id="busca" class="form-control" placeholder="Digite sua busca" name="busca" style="width:250px;">
    
17.04.2017 / 14:00
0

Note that the value of the CPF option is not "CPF". 

<option value="user_cpf">CPF</option>

Emphas in: 

value="user_cpf"

You need to change your value comparison to: 

if( $select == "user_cpf") {
    
17.04.2017 / 13:43
0

Well you need to put an event in select to call its function when select is changed. Another thing that you are doing wrong is in the comparison of if , since you have to compare with value option ("user_cpf") and not with "CPF"; 

document.getElementById("select").addEventListener("change", myFunction);
function myFunction(){
	var $select = $('#select option:selected').val();
  if( $select == "user_cpf"){
  var $busca = $('#busca');
  $('#busca').mask('999.999.999-99');
  }
}
<select class="form-control" id="select" style="width:100px;" title="Escolha..." name="select"> 
            <option>Escolha...</option>             
            <option value="user_nome">Nome</option>
            <option value="user_cpf">CPF</option>
            <option value="user_email">Email</option>
            <option value="user_loja">Loja</option>
        </select>

    <input type="text" id="busca" class="form-control" placeholder="Digite sua busca" name="busca" style="width:250px;">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script><scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/jquery.mask/1.14.10/jquery.mask.min.js"></script>
    
17.04.2017 / 13:57
0

Creates an object to map the masks. And then you can use it like this: 

var mascaras = {
  user_cpf: '999.999.999-99',
  // aqui podes ter mais campos
}

$('#select').on('change', function() {
  var mask = mascaras[this.value];
  if (mask) $('#busca').mask(mask);
  else $('#busca').unmask();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/jquery.mask/1.14.10/jquery.mask.js"></script>
<select class="form-control" id="select" style="width:100px;" title="Escolha..." name="select"> 
    <option>Escolha...</option>             
    <option value="user_nome">Nome</option>
    <option value="user_cpf">CPF</option>
    <option value="user_email">Email</option>
    <option value="user_loja">Loja</option>
</select>

<input type="text" id="busca" class="form-control" placeholder="Digite sua busca" name="busca" style="width:250px;">
    
17.04.2017 / 14:12
Executing Expected Class When Starting Web Application FILE function in C