Jump to content
Dineysil

Ajax e radio no form

Recommended Posts

Boa tarde!

 

Sou iniciante em Javascript e Ajax e estou precisando de criar uma função para:
Em um Form tenho dois "radios" jurídico e físico, preciso que ao clicar em uma opção no form alterne uma "Label" e uma "Text"
Se a opção for Físico a Label será CPF: e a Text terá uma mascara de cpf

Se a opção for Jurídico a Label será CNPJ: e a Text terá uma mascara de cnpj

 

Com relação as máscaras eu já as tenho.

 

O site está em ASP Clássico

Agradeço se alguém poder ajudar.

 

Claudiney

Share this post


Link to post
Share on other sites

Toma!

 

HTML:

<div>
  <fieldset>
    <legend>Escolha o tipo</legend>
    <label>
      <input type="radio" value="fisica" data-target="tipo_documento" name="tipo_documento" checked />
      Pessoa Física
    </label>

    <label>
      <input type="radio" value="juridica" data-target="tipo_documento" name="tipo_documento" />
      Pessoa Jurídica
    </label>
  </fieldset>

  <label>
    <span data-target="label_documento">Digite o CPF:</span>
    <input type="text" />
  </label>
</div>

Javascript:

var radioInputs = document.querySelectorAll('[data-target=tipo_documento]');

radioInputs.forEach(function (input) {
  input.addEventListener('change', function (event) {
    var pergunta = event.target.value === 'fisica'
      ? 'Digite o CPF:'
      : 'Digite o CNPJ:';
    
    document.querySelector('[data-target=label_documento]')
      .innerText = pergunta;
  });
});

Resultado: https://jsbin.com/soqajorefu/3/edit?html,js,output

 

O código está utilizando o atributo data-* para dizer quem é quem... os radios precisam ter o mesmo name pra funcionar. Acredito que você terá problemas com a função de máscara, mas aí já é outro problema....

 

Qualquer dúvida, grita! :-)

Share this post


Link to post
Share on other sites
12 minutos atrás, Michael Granados disse:

Toma!

 

HTML:


<div>
  <fieldset>
    <legend>Escolha o tipo</legend>
    <label>
      <input type="radio" value="fisica" data-target="tipo_documento" name="tipo_documento" checked />
      Pessoa Física
    </label>

    <label>
      <input type="radio" value="juridica" data-target="tipo_documento" name="tipo_documento" />
      Pessoa Jurídica
    </label>
  </fieldset>

  <label>
    <span data-target="label_documento">Digite o CPF:</span>
    <input type="text" />
  </label>
</div>

Javascript:


var radioInputs = document.querySelectorAll('[data-target=tipo_documento]');

radioInputs.forEach(function (input) {
  input.addEventListener('change', function (event) {
    var pergunta = event.target.value === 'fisica'
      ? 'Digite o CPF:'
      : 'Digite o CNPJ:';
    
    document.querySelector('[data-target=label_documento]')
      .innerText = pergunta;
  });
});

Resultado: https://jsbin.com/soqajorefu/3/edit?html,js,output

 

O código está utilizando o atributo data-* para dizer quem é quem... os radios precisam ter o mesmo name pra funcionar. Acredito que você terá problemas com a função de máscara, mas aí já é outro problema....

 

Qualquer dúvida, grita! :-)

 

Michael Granados muito obrigado, é isso aí!

Perfeito!

Share this post


Link to post
Share on other sites

Uma outra dúvida, no text vou colocar uma máscara para CPF e uma para o CNPJ  em javascript , alternando estas mascaras no text de acordo com a opção selecionada.

<script>
function MascaraCPF(cpf)

var strCPF = []; 
strCPF = strCPF + cpf; 
if (strCPF.length == 3){ 
strCPF = strCPF + '.'; 
document.form1.cpf.value = strCPF;
}
if (strCPF.length == 7){ 
strCPF = strCPF + '.'; 
document.form1.cpf.value = strCPF; 
}
if (strCPF.length == 11){ 
strCPF = strCPF + '-'; 
document.form1.cpf.value = strCPF; 
}
}
</script> 

Share this post


Link to post
Share on other sites

E a dúvida seria...? Não, brincadeira... Bom, neste caso você tem três opções:

 

- manipular a forma como o input vai manipular as máscaras encapsulando-as em um método só variando conforme o tipo de campo, recomendo limpar o campo no momento em que o usuário trocar de CNPJ para CPF e vice-versa

- trocar o campo de input inteiro, atribuindo  devida máscara no momento da troca de tipo de campos

- deixar os dois campos na página com names distintos para fazer o tratamento do lado do servidor e apenas trocar o display/classe deles quando trocar o radio

 

Use your illusion.

Share this post


Link to post
Share on other sites

Você tem razão não ficou claro a dúvida, mas é relativo a sua primeira citação.
Quando selecionar a opção, vai alterar a label e a mascara do input, o problema  (dúvida) é aí como trocar a mascara.

Como eu disse estou iniciando em javascript e mexendo no seu código não consegui a proeza. kkk... 

Share this post


Link to post
Share on other sites

Adicionei lá as máscaras e a alteração, utilizei o removeEventListener e o addEventListener... também precisei colocar o mesmo ao iniciar a página...

 

https://jsbin.com/yobubidifa/1/edit?html,js,output

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Similar Content

    • By danielpinho
      Boa tarde pessoal,
       
      Estou desenvolvendo um sistema de pagamento via cartão de crédito que requer a execução de um ajax (request https) quando o usuário digita o número do cartão, a fim de capturar a bandeira do mesmo. O javascript deve enviar via ajax somente os 6 primeiros dígitos do cartão.
       
      A função já está funcionando parcialmente, da seguinte forma: quando o usuário digita o sexto dígito, o ajax faz a requisição e retorna o resultado.
       
      O problema é que quando o usuário continua digitando o restante do número do cartão, o ajax continua fazendo uma requisição a cada tecla pressionada, o que vai acabar sobrecarregando desnecessariamente o meu servidor.
       
      Eu sei que o ideal seria acionar a função somente quando a minha keyword tivesse lenght=6 (assim, ao continuar digitando a função não seria acionada), porém tem pessoas que copiam e colam o número do cartão de uma vez, e isso geraria um bypass na função...
       
      Além disso, o sistema deve ser capaz de reconhecer que houve uma eventual mudança nos 6 números digitados inicialmente, para fazer uma nova requisição ajax com esses números novos.
       
      A solução que pensei, em síntese, foi criar uma variável chamada "lastquery", inicialmente com o valor "000000". Digamos que os 6 dígitos pesquisados estivessem na variável "sixdigits". 
       
      Quando a requisição ajax fosse feita, a variável "lastquery" teria valor alterado para o mesmo valor de "sixdigits".
       
      E a requisição ajax ficaria condicionada da seguinte forma:   if (lasquery !== sixdigits) { executa ajax }.
       
      O problema é que não está dando certo. Ele continua executando normalmente, mesmo quando o valor de lastquery é o mesmo valor de sixdigits.
       
      Alguém mais inteligente do que eu consegue me ajudar? 
       
      Segue o código que não está funcionando perfeitamente. Reparem que fiz um alert para verificar o que estava dando errado, mas a mensagem que recebo no alert é sempre algo do tipo: "10100 is not equal to 10100". Não consigo entender porque isso acontece, já que lá em cima coloquei a condicionante !==.
       
      Obrigado!
       
      <form method="post"> <input type="text" name="ccnumber" id="ccnumber" value="" onkeyup="getcardbin()"> </form> <script> var lastquery = "000000"; function getcardbin() { var min_length = 6; var keyword = $('#ccnumber').val(); if (keyword.length >= min_length) { var justsix = keyword.substring(0, 6); if (justsix !== lastquery) { $.ajax({ url: '/getcardbin.cgi', type: 'POST', data: { 'tkn': 'token_interno', 'tid': 'token_interno', 'bin': justsix }, success:function(data){ $('#returnmsg').prepend(data); alert(justsix + ' is not equal to ' + lastquery); var lastquery = justsix; } }); } } } </script>  
    • By gust.php
      Fala pessoal.
       
      Quero fazer o seguinte: Tenho um campo select e um campo input. Quando eu selecionar um item do meu campo select, quero enviar o ID desse item, e o valor do campo input, que no caso é uma data, para um script PHP,  no PHP vou conferir uma situação e dizer se eu posso usar esse item ou não.
       
      Alguém pode me mostrar um exemplo?
       
      Obrigado.
    • By FabianoSouza
      Quero saber se é possível enviar formData e string na mesma requisição AJAX.
       
      $frmData = new FormData($form); $xhr.open('post', $form.getAttribute('action'), true); $xhr.setRequestHeader('content-type', 'text/plain;charset=utf-8'); $xhr.send($frmData); //******* quero saber se consigo enviar sting, além do objeto formData.  
    • By michael450
      Senhores, boa tarde.
       
      Estou com um probleminha... rss', preciso fazer a listagem de uma função da biblioteca "SPED-NFe"   na qual consulto quais as NFe que emitiram contra meu CNPJ, porém o ele executa toda a função e depois me trás o resultado, eu gostaria de trazer o resultado instantaneamente, como se fosse uma atualização segundo a segundo.
       
       
      Essas informações não são salvas em DB, é apenas para consulta.
      Se alguém puder ajudar serei muito grato,
       
      Abraço.
       
      Michael Douglas
    • By ricardonews
      olá pessoal, alguém ja teve dificuldade de logar no banco com um formulario de login feito pelo ajax quando a senha é criptografada?
      a minha está o sendo pelo md5 e quando deixo sem criptografia eu logo no banco.  Eu gostaria de logar com criptografia.
      vou deixar  a index e o arquivo que busca no banco de dados
      <!doctype html> <html> <?php require_once"config.php"; ?> <head> <title>Formulario de login</title> <style type="text/css"> html{ height:100%; background: linear-gradient(rgba(38, 128, 101, 0.9), rgba(52, 177, 140, 0.9)); } #div_login{ width:500px; margin:40px auto; position:relative; background-color: #ffffff; padding: 20px; border-radius: 5px; } #message{ width:100%; text-align:center; color:red; margin-bottom: 20px; } #div_login h1 { text-align: center; } #div_login input, #div_login textarea,#div_login a{ padding:10px; border:1px solid rgba(38, 128, 101, 0.9); border-radius:4px; -moz-border-radius:4px; -webkit-border-radius:4px; outline:none; box-sizing: border-box; width:100%; font:14px "Trebuchet MS", tahoma, arial; color:#090; margin-bottom:10px; } #div_login #but_submit,#div_login a { background-color: #27ae60; font-weight: bold; text-transform: uppercase; color: #ffffff; width: auto; margin: 0; padding: 10px 20px; } </style> <!--<link href="style.css" rel="stylesheet" type="text/css">--> <script src="jquery-3.2.1.min.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function(){ $("#but_submit").click(function(){ var username = $("#meu_nome").val().trim(); var password = $("#minha_senha").val().trim(); if( username != "" && password != "" ){ $.ajax({ url:'pesquisar.php', type:'post', data:{username:username,password:password}, success:function(response){ var msg = ""; if(response == 1){ window.location = "home.php"; }else{ msg = "email e senhas invalidos!"; } $("#message").html(msg); } }); } }); }); </script> </head> <body> <div class="container"> <div id="div_login"> <h1>Login</h1> <div id="message"></div> <div> <input type="text" class="textbox" id="meu_nome" name="meu_nome" placeholder="email" /> </div> <div> <input type="password" class="textbox" id="minha_senha" name="minha_senha" placeholder="senhas"/> </div> <div> <input type="button" value="logar" name="but_submit" id="but_submit" /> <a href="inicio.php"><strong>Cadastrar</strong></a> </div> </div> </div> </body> </html> agora vem oque busca os dados no banco e é justamente essa parte que eu não entendo oque acontece.
      <?php require_once "config.php"; // AQUI É O PESQUISAR PHP $uname = mysqli_real_escape_string($con,$_POST['username']); $password = mysqli_real_escape_string($con,$_POST['password']); if ($uname != "" && $password != ""){ $sql_query = "SELECT count(*) as cntUser FROM usuarios WHERE email='".$uname."' and password='".$password."'"; $result = mysqli_query($con,$sql_query); $row = mysqli_fetch_array($result); $count = $row['cntUser']; if($count > 0){ $_SESSION['uname'] = $uname; echo 1; }else{ echo 0; } } desde já fico agradeço 
×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.