1

Olá, estou tentando alterar o placeholder de um input fazendo a verificação entre 2 valores de input radio. Segue abaixo o js que tentei montar e o html.

$(document).ready(function () {
	$('#tipousuario').prop('checked',function () {                    
		if($(this).val() === '1'){
			$(this).attr({placeholder:"Insira seu CNPJ",maxlenght:"14"});
		}
		if($(this).val() ==='2'){
			$(this).attr({placeholder:"Insira seu CRC",maxlenght:"8"});
		}
	});
});
 <div class="col-lg-7">
    <div class="form-group">
        <div class="form-check form-check-inline">
            <input class="form-check-input" type="radio" name="tipouser" id="tipousuario" value="1" checked>
            <label class="form-check-label" for="inlineRadio1">CNPJ</label>
        </div>
        <div class="form-check form-check-inline">
            <input class="form-check-input" type="radio" name="tipouser" id="tipousuario" value="2">
            <label class="form-check-label" for="inlineRadio2">CRC</label>
        </div>
    </div>
    <div class="form-group">                                   
        <input type="text" required="required" class="form-control" maxlength="14" name="usuario" id="InputUsuario" pattern="[0-9]+$" placeholder="Usuário">                                    
        <small class="text-muted">Apenas números</small>
   </div>

1
  • Olá Rafael! Até hoje vc não marcou uma resposta com ✓. É importante pra comunidade que as perguntas sejam finalizadas, e para isso é preciso marcar uma resposta. Se nenhuma lhe atendeu, vc pode fazer questionamentos aos AR (autor da resposta), mas não deixe perguntas em aberto pq isso prejudica o propósito do site. ObG!
    – Sam
    30/05/2018 às 7:28

4 Respostas 4

2

Sua lógica faz sentido, mas existem algumas falha em seu código, vamos lá:

  1. Na linha $('#tipousuario').prop('checked', na verdade precisa aplicar o evento ao elemento para capturar quando o valor for alterado, então alteramos para: $('.tipousuario').on('change',;
  2. Na linha $('#tipousuario'), como são 2 radio, fazendo a busca por ID só podemos pegar 1 elemento, pois por definição cada documento HTML não deve ter elementos com ID duplicados, então renomeei os ID's para tornarem-se únicos e acrescentei a classe tipousuario
  3. Na linha $(this).attr({, precisamos na verdade alterar os atributos no input text, então alteramos para selecionar pelo ID do input: $('#InputUsuario')

Segue abaixo com os ajustes:

$(document).ready(function () {
	$('.tipousuario').on('change',function () {
		if($(this).val() === '1'){
			$('#InputUsuario').attr({placeholder:"Insira seu CNPJ",maxlength :"14"});
		}
		if($(this).val() ==='2'){
			$('#InputUsuario').attr({placeholder:"Insira seu CRC",maxlength :"8"});
		}
	});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-lg-7">
    <div class="form-group">
        <div class="form-check form-check-inline">
            <input class="form-check-input tipousuario" type="radio" name="tipouser" id="tipousuario1" value="1" checked>
            <label class="form-check-label" for="inlineRadio1">CNPJ</label>
        </div>
        <div class="form-check form-check-inline">
            <input class="form-check-input tipousuario" type="radio" name="tipouser" id="tipousuario2" value="2">
            <label class="form-check-label" for="inlineRadio2">CRC</label>
        </div>
    </div>
    <div class="form-group">                                   
        <input type="text" required="required" class="form-control" maxlength="14" name="usuario" id="InputUsuario" pattern="[0-9]+$" placeholder="Insira seu CNPJ">                                    
        <small class="text-muted">Apenas números</small>
   </div>

2
  • Gostei da sua resposta +1 9/04/2018 às 21:18
  • Realmente não prestei atenção à esses detalhes simples. Obrigado 10/04/2018 às 11:14
1

Primeiro de tudo você não pode colocar o mesmo id para dois elementos diferentes, então eu o removi do elemento radio, e utilizei o name para manipular.

Acrescentei o evento change, para poder pegar a mudança de estados do elemento radio.

Inicializei o placeholder com Insira seu CNPJ.

E removi o $(this) na parte onde é enviado os valor, isso faz com que seja alterado os atributos do radio e não do input.

Resultado:

html(Só removi os ids repetido)

<div class="col-lg-7">
    <div class="form-group">
        <div class="form-check form-check-inline">
            <input class="form-check-input" type="radio" name="tipouser" value="1" checked>
            <label class="form-check-label" for="inlineRadio1">CNPJ</label>
        </div>
        <div class="form-check form-check-inline">
            <input class="form-check-input" type="radio" name="tipouser" value="2">
            <label class="form-check-label" for="inlineRadio2">CRC</label>
        </div>
    </div>
    <div class="form-group">                                   
        <input type="text" required="required" class="form-control" maxlength="14" name="usuario" id="InputUsuario" pattern="[0-9]+$" placeholder="Usuário">                                    
        <small class="text-muted">Apenas números</small>
   </div>

Código jquery:

$(function () {
    var usuario = $('[name="usuario"]');
  var tipouser = $('[name="tipouser"]');
  usuario.attr({placeholder:"Insira seu CNPJ",maxlength:"14"});
    tipouser.change(function () {                    
        if($(this).val() === '1'){
            usuario.attr({placeholder:"Insira seu CNPJ",maxlength:"14"});
        }
        if($(this).val() ==='2'){
            usuario.attr({placeholder:"Insira seu CRC",maxlength:"8"});
        }
    });
});

Exemplo: https://jsfiddle.net/bucnocqs/9/

1

Pode fazer usando ternário, pegando click nos radios buttons pelo name="tipouser".

Além do erro em ids duplicados, havia outro erro: em vez de maxlength você estava usando maxlenght (terminando com ht).

Código:

$(document).ready(function () {
   $('[name="tipouser"]').click(function() {
      $('#InputUsuario').attr(
         $(this).val() === '1' ? // operador ternário
         { placeholder:"Insira seu CNPJ", maxlength:"14" } : // aqui se o valor for igual a 1
         { placeholder:"Insira seu CRC", maxlength:"8" } // aqui se o valor não for 1
      );
   });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-lg-7">
   <div class="form-group">
     <div class="form-check form-check-inline">
         <input class="form-check-input" type="radio" name="tipouser" id="tipousuario1" value="1" checked>
         <label class="form-check-label" for="inlineRadio1">CNPJ</label>
     </div>
     <div class="form-check form-check-inline">
         <input class="form-check-input" type="radio" name="tipouser" id="tipousuario2" value="2">
         <label class="form-check-label" for="inlineRadio2">CRC</label>
     </div>
   </div>
   <div class="form-group">                                   
     <input type="text" required="required" class="form-control" maxlength="14" name="usuario" id="InputUsuario" pattern="[0-9]+$" placeholder="Insira seu CNPJ">                                    
     <small class="text-muted">Apenas números</small>
   </div>
</div>

2
  • Simplesmente genial 10/04/2018 às 0:58
  • Vlw , fiz rápido e n me dei conta dos detalhes. 10/04/2018 às 11:15
0

O id define um identificador exclusivo (ID) que deve ser único por todo o documento, portanto você não pode repeti-lo.

Ao invés de pegar seu input pelo id eu passo a pegar ele pelo atributo name.

Outro ponto importante é que no seu exemplo o valor de this depende de como a função é chamada. Ele faz referência ao input alterado, ou seja, <input type="radio" />.

Então quando você diz:

$(this).attr({placeholder:"Insira seu CRC",maxlenght:"8"});

você está modificando os atributos do input errado.

Mais um ponto importante é que o nome do atributo maxlength estava errado.

Sugestão: Limpe o valor do input a cada alteração pois se o máximo de caracters muda aquele valor pode não ser mais válido.

Exemplo funcionando:

$('input[name="tipouser"]').on("change", function(){
 
 //Como sugestão eu limpo o valor do input pois se o máximo 
 //de caracters muda aquele valor pode não ser mais válido:
 $("#InputUsuario").val("");
 
 
  if($(this).val() === '1'){
    $("#InputUsuario").attr({
      placeholder:"Insira seu CNPJ",
      maxlength:14
    });
  }
  
  if($(this).val() === '2'){
    $("#InputUsuario").attr({
      placeholder:"Insira seu CRC",
      maxlength:8
    });
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="col-lg-7">
    <div class="form-group">
        <div class="form-check form-check-inline">
            <input class="form-check-input" type="radio" name="tipouser"  value="1" checked>
            <label class="form-check-label" for="inlineRadio1">CNPJ</label>
        </div>
        <div class="form-check form-check-inline">
            <input class="form-check-input" type="radio" name="tipouser" value="2">
            <label class="form-check-label" for="inlineRadio2">CRC</label>
        </div>
    </div>
    <div class="form-group">                                   
        <input type="text" required="required" class="form-control"  name="usuario" id="InputUsuario" pattern="[0-9]+$" maxlength="14"  placeholder="Usuário">                                    
        <small class="text-muted">Apenas números</small>
   </div>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .