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 Alberto Nascimento
      Como faço que consiga colocar parágrafos no campo tipo "text" do formulário?
          <input name="Text1" style="width: 528px; height: 223px" type="text" /></form>
      Se eu pressiono ENTER automaticamente envia o formulário
      Como então consigo digitar ao preencher o formulário da forma abaixo?
       
    • By AndersonVSilva
      Bom dia Pessoal,
       
      Efetuei uma busca no forum e não encontrei alguma solução para meu problema.
       
      Tenho este form via HTML:
       
      <td><form id="form1" action="CallProc02.php" method="post"><input type="hidden" name="id" value="1" /></form></td> <td><input form="form1" type="text" name="DDDA" value="Ex: 75" /></td> <td><input form="form1" type="text" name="NumA" value="Ex: 982825441" /></td> <td><input form="form1" type="text" name="DtInit" value="Ex: 2018-01-01" /></td> <td><input form="form1" type="text" name="DtEnd" value="Ex: 2019-01-01" /></td> <td><input form="form1" type="submit" value="Enviar" /></td> E aqui está o código PHP:
      <?php $sDDDA = $_POST['DDDA']; $sNumA = $_POST['NumA']; $sDtInit = $_POST['DtInit']; $sDtEnd = $_POST['DtEnd']; $con = new PDO("mysql:host:IP;dbname=DB", "User", "Pass"); $stmt = $con->prepare("CALL NOC_cobranca_conecta_historico_msisdn(:qDDDA, :qNumA, :qDtInit, :qDtEnd) "); $stmt->bindParam(":qDDDA", $sDDDA, PDO::PARAM_STR, 3); $stmt->bindParam(":qNumA", $sNumA, PDO::PARAM_STR, 10); $stmt->bindParam(":qDtInit", $sDtInit, PDO::PARAM_STR, 12); $stmt->bindParam(":qDtEnd", $sDtEnd, PDO::PARAM_STR, 12); $stmt->execute(); $result = $stmt->fetchAll(PDO::FETCH_ASSOC); if ($result) { echo "OK"; } else { echo "NOK - Report Development Team"; } ?> No Apache ele fica logando o erro ' PHP Notice:  Undefined index: NumA in /var/www/html/Consulta/CallProc02.php' .
       
      Alguém pode me dizer oque estou fazendo errado?
       
      Obrigado desde já pela ajuda.
    • By sirrocha
      Olá pessoal, sou iniciante só que tenho um projeto com uma certa pressão de tempo pra fazer. Um dos problemas que estou tendo é relacionado ao clicar em um tipo "a href" e aplicar uma função. Pelo que vi, tenho que usar AJAX mas não tenho nenhuma noção de como iniciar, mesmo vendo muitos vídeos...

      Basicamente tenho uma página onde está carregando algumas sessões. Porém, ao clicar neste botão:
       
      1 <p><a class="link" name="final" id="fin" onclick="finalizar()" href="areaUsuario.php" style="text-decoration:none;">finalizar</a></p>

      Estava tentando chamar uma função do tipo finalizar(), que iria dar UNSET em duas sessões específicas que eu precisava desligar (por isso não posso usar o destroy para tirar todas).
       
      1 2 3 4 5 6 7 8 9 <script type="text/javascript">>     <?php     function finalizar() {         unset($_SESSION['prestacao']);         unset($_SESSION['nomeproj']);         header("location:areaUsuario.php");     }     ?> </script>

      O que eu fiz e falaram que estava errado era isso. Como posso usar o AJAX neste caso para desligar essas duas funções e enviar o usuário para a área inicial? Por favor, se possível, enviar uma base de como poderia fazer com o raciocínio. É algo urgente, mas também gostaria de aprender.
    • By DinhoPHP
      Pessoal, tenho um código PHP que busca imagens em subpastas, porém gostaria de fazê-lo com que fosse carregado aos poucos pois são muitas fotos, tentei de ns maneiras entender o AJAX, mas não tive sucesso. Favor! Peço ajuda.
       
      loadAjax.php
      $dir = new DirectoryIterator( './images/portfolio/sem_categoria' ); // array contendo os diretórios permitidos $diretoriosPermitidos = array("portfolio","sem_categoria"); foreach($dir as $file) { // verifica se $file é diferente de '.' ou '..' if (!$file->isDot()) { // listando somente os diretórios if ( $file->isDir() ) { // atribui o nome do diretório a variável $dirName = $file->getFilename(); // subdiretórios $caminho = $file->getPathname(); // chamada da função de recursividade recursivo($caminho, $dirName); } // listando somente os arquivos do diretório if ( $file->isFile() ) { // atribui o nome do arquivo a variável $fileName = $file->getFilename(); // print //echo "Arquivos: ".$fileName."<br>"; } } } function recursivo( $caminho, $dirName ){ global $dirName; $DI = new DirectoryIterator( $caminho ); foreach ($DI as $file){ if (!$file->isDot()) { if ( $file->isFile() ) { // $fileName = $file->getFilename(); // //echo $dirName.": ".$fileName."<br>"; echo "<div class='col-12 col-sm-6 col-md-4 col-lg-3 mb-2 d-flex justify-content-center' alt=''> <a href='{$fileName}' class='fresco' data-fresco-group='example' data-fresco-caption='ARJ SERVICE'> <img class='eni-img-thumb' src='images/portfolio/sem_categoria/{$dirName}/{$fileName}'> </a> </div>"; } } } } Tentei adaptar o código abaixo as minhas necessidades, mas não consegui.
      <script> //variavel para controle de registros retornados var pagina = 0; var pesquisa = true; //function carrega function carrega(){ $('#loading').html("<img src='img/loader.gif'/> Carregando Feeds...").fadeIn('fast'); $.ajax({ type: "POST", url: "loadAjax.php", data: "page="+pagina,//variavel passada via post cache: false, success: function(html){ if(html){ $('#loading').fadeOut('fast'); $("#result").append(html); //mostra resultado na div result pesquisa = true; }else{ $('#loading').html("Fim da pesquisa...").fadeIn('fast'); pesquisa = false; } }, error:function(html){ $('#loading').html("erro...").fadeIn('fast'); } }); }; //chama minha funcao ao carregar a pagina $(document).ready(function(){ carrega(); }); //funcao de controle do scroll da pagina, na qual ela chega ao fim é acionada chamando //minha function carrega novamente para trazer mais dados dinamicamente $(window).scroll(function(){ if($(window).scrollTop() + $(window).height() >= $(document).height()){ pagina += 1; carrega(); }; }); </script>  
    • By asacap1000
      Salve Galera!!
      Estou com um problema que acredito que seja muito facil mas não estou conseguindo colocar no código.
       
      Tenho um formulário simples onde temos apenas um campo a ser preenchido, input file.
      estarei utilizando ele no celular para fotos de processos de conferência. O que preciso é que assim que constar dados no campo ele automaticamente executa o form para salvar.
      segue script;
       
      <form name="form" id="form"class="form-horizontal" action="" method="post"> <div class="form-group form-group-lg"> <div class="col-sm-12"> <input id="foto" name="foto" hidden="1" value="<?=$prot_foto?>" type="text" maxlength="200" > <input id="lote" name="lote" hidden="1" value="<?=$lote?>" type="text" maxlength="200" > <label for='selecaoarquivo' ><figure><svg version="1.0" xmlns="http://www.w3.org/2000/svg" width="50" height="40" viewBox="0 0 512.000000 392.000000" preserveAspectRatio="xMidYMid meet"> <g transform="translate(0.000000,392.000000) scale(0.100000,-0.100000)" fill="#000000" stroke="none"> <path d="M1970 3073 l-151 -163 681 0 682 0 -19 24 c-10 14 -70 85 -133 160 l-115 134 -397 4 -397 3 -151 -162z m710 17 l0 -60 -190 0 -190 0 0 60 0 60 190 0 190 0 0 -60z"/> <path d="M3370 3005 l0 -95 240 0 240 0 0 95 0 95 -240 0 -240 0 0 -95z"/> <path d="M1154 2955 l-1 -45 224 0 223 0 0 45 0 45 -222 0 -223 0 -1 -45z"/> <path d="M1105 2829 c-114 -19 -200 -64 -266 -137 -85 -94 -116 -191 -126 -384 l-6 -128 713 0 713 0 72 68 c122 117 239 184 386 223 69 19 109 23 224 22 121 0 152 -4 228 -27 48 -14 118 -42 156 -61 78 -39 205 -137 248 -189 l28 -36 433 0 432 0 0 118 c0 123 -20 234 -56 304 -47 94 -138 168 -254 210 l-65 23 -1405 1 c-773 1 -1427 -2 -1455 -7z"/> <path d="M2715 2207 c-212 -23 -436 -233 -475 -446 -14 -78 -12 -196 5 -270 43 -181 197 -344 384 -408 52 -18 89 -23 171 -23 179 0 297 47 415 165 116 115 175 256 175 415 0 232 -158 458 -378 540 -68 26 -200 38 -297 27z"/> <path d="M712 1528 c5 -611 5 -613 63 -728 52 -102 125 -163 251 -207 l79 -28 1420 0 c1350 0 1423 1 1480 18 177 55 271 151 315 321 19 75 20 110 20 633 l0 553 -396 0 c-218 0 -394 -3 -392 -7 2 -5 15 -30 29 -58 54 -102 81 -210 86 -346 11 -261 -69 -472 -249 -651 -309 -311 -799 -341 -1140 -70 -167 133 -273 303 -314 503 -13 64 -15 114 -11 219 6 150 24 224 83 343 l34 67 -681 0 -680 0 3 -562z"/> </g> </svg></figure><h4>TIRAR FOTO</h4></label> <input type="file" id="selecaoarquivo" class="btn btn-danger" name="image[]" accept="image/*" capture="camera"> </div> </div><br> <p><br> <p> <button name="Cadastrar" id="cadastrar" value="Cadastrar" class="btn btn-success " type="Submit" onclick="javascript:document.getElementById('blanket').style.display = 'block';document.getElementById('aguarde').style.display = 'block';"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="25" viewBox="0 0 20 17"><path d="M10 0l-5.2 4.9h3.3v5.1h3.8v-5.1h3.3l-5.2-4.9zm9.3 11.5l-3.2-2.1h-2l3.4 2.6h-3.5c-.1 0-.2.1-.2.1l-.8 2.3h-6l-.8-2.2c-.1-.1-.1-.2-.2-.2h-3.6l3.4-2.6h-2l-3.2 2.1c-.4.3-.7 1-.6 1.5l.6 3.1c.1.5.7.9 1.2.9h16.3c.6 0 1.1-.4 1.3-.9l.6-3.1c.1-.5-.2-1.2-.7-1.5z"/></svg><h4>SALVAR FOTO</h4></button> </form> Se puderem me dar uma força nisso agradeço imensamente!!!
       
×

Important Information

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