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 HigorCrds
      Bom, o que eu consegui até agora foi fazer com que, ao usuário clicar em algum dos botões de paginação (1, 2, 3...) o PHP guarde uma SESSION com o número da página correspondente.
      Segue o código:
       
      <!-- BOTÃO COM O NÚMERO DA PÁGINA --> <button onclick="mudaVar(<?php echo $i; ?>);"> <?php echo $i; ?> </button> <!-- FUNÇÃO PARA GUARDAR SESSION PG --> function mudaVar(valor) { $.ajax({ url:'sessions.php?valor='+valor }); } // GUARDA SESSION PG if(isset($_GET['valor'])){ $_SESSION['pg'] = $_GET['valor']; } Até aí tudo bem, só que o problema é que a SESSION não é alterada naquele momento, só quando eu atualizo a página.
      Como corrigir isso?
    • By FabianoSouza
      Tenho a function A, que captura valores e os transfere para a function B (que é um AJAX).
       
      Preciso que a function B passe seu resultado para a function A. Creio que precise de um callback. Mas não estou sabendo com estruturar isso.
      Vejam como estão os códigos:
       
      FUNCTION A
      function upDateRating(e) { var $alvoClick = getTarget(e) , $ul = $alvoClick.parentNode , $idItem = $alvoClick.parentNode.parentNode.parentNode.parentNode.id , $valRating = $alvoClick.value var $array = [ { idItem:$idItem , favorito: 1 , rating: $valRating } ] upDateCard($array) }  
      FUNCTION B (AJAX)
      function upDateCard(e) { var $array = e , $dados = JSON.stringify($array); function ajax() { var $obj = createXMLHTTP(); $obj.open('post', 'minhaPagina', true); $obj.setRequestHeader('content-type', 'application/x-www-form-urlencoded'); $obj.onreadystatechange=function(){ if ($obj.readyState == 4 && $obj.status == 200){ try { var $strResp = JSON.parse($obj.responseText); } catch(e) { alert('Erro. Dados em formato inválido.') return false; } return $strResp //PRECISO PASSAR ESSE VALOR DE VOLTA PARA A FUNCTION A } } $obj.send(encodeURI('str='+$dados)) } ajax() }  
       
    • By sronze
      Ola estou com um problema em JavaScript
      O objetivo e digitar um ID/Nome em um input e ele buscar em um arquivo XML fazendo autocomplete e preencher outros dois inputs com os atributos associado ao ID/Nome da base XML.
       
      GIF de exemplo, obs(exatamente oque pretendo fazer): http://blog-media.chromaticsites.com.s3.amazonaws.com/google-places-autocomplete-3/autocomplete-error.gif
       
      Link do XML: https://www.w3schools.com/js/cd_catalog.xm
       
      Segue meu código:
      <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> <script src="https://code.jquery.com/jquery-1.12.4.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> </head> Nome:<input id="idInput"> UF:<input id="idInput02"> Ano:<input id="idInput03"> <script> var ValorXML1 = []; $(document).on('keyup' , '#idInput' ,function(){ var keyvalue = $("#idInput").val(); var xhttp; xhttp = new XMLHttpRequest(); xhttp.onreadystatechange = function() { if (this.readyState == 4 && this.status == 200) { ValorXML1 = []; CaregarXML(this , keyvalue); } }; xhttp.open("GET", "https://www.w3schools.com/js/cd_catalog.xml", true); xhttp.send(); }); function CaregarXML(xml , key) { var x, i, xmlDoc , key; xmlDoc = xml.responseXML; x = xmlDoc.getElementsByTagName("TITLE"); var cont = 0; for (i = 0; i < x.length; i++) { var valor = x[i].childNodes[0].nodeValue.trim(); var pattern = valor.substring(0 , key.length); if(key.toUpperCase() == pattern.toUpperCase() && cont < 5){ ValorXML1.push(valor); cont++; } } $("#idInput").autocomplete({ source: ValorXML1 }); } $( function() { $( "#idInput" ).autocomplete({ source:ValorXML1 }); }); </script>  
    • By Velomento Conde
      Ola pessoal estou para criar um sistema de avaliação de 5 estrelas, onde os usuários cadastrado na minha plataforma avaliem certo conteúdo seja salvo no banco de dado.
      Exemplo: Mariana = deu 2 estrala e Jonas de 5 estralas.
      e tudo dever ser privado, ninguém pode ver a avaliação de outro.
       
      Já fiz o sistema mas não consigo saber quem deu a avaliação. por favor se for algo simples queria vossa ajuda.
       
       
    • By rafael.munareto
      Pessoal, 
       
          No código abaixo quero recortar a foto e subir o nome do arquivo na variável que busco no banco de dados, consegui fazer o efeito de recortar e de visualizar mas não está aparecendo a imagem recortada e nem salvando o nome do arquivo com a nova dimensão, podem me ajudar:
       

      <?php
      error_reporting(E_ALL ^ E_NOTICE);
      require_once("mostra-alerta.php");
        include("coneta_mysql.php");
      /**
       * Jcrop image cropping plugin for jQuery
       * Example cropping script
       * @copyright 2008-2009 Kelly Hallman
       * More info: http://deepliquid.com/content/Jcrop_Implementation_Theory.html
       */
      if ($_SERVER['REQUEST_METHOD'] == 'POST')
      {
        $targ_w = $targ_h = 150;
        $jpeg_quality = 90;
        $src = "img/perfil/<?php echo $foto_perfil ; ?>";
        $img_r = imagecreatefromjpeg($src);
        $dst_r = ImageCreateTrueColor( $targ_w, $targ_h );
        imagecopyresampled($dst_r,$img_r,0,0,$_POST['x'],$_POST['y'],
        $targ_w,$targ_h,$_POST['w'],$_POST['h']);
        header('Content-type: image/jpeg');
        imagejpeg($dst_r,null,$jpeg_quality);
        exit;
      }
      ?>
      <html xmlns="http://www.w3.org/1999/xhtml">
      <head>
          <meta charset="UTF-8">
          <title>REDE A</title>
          <link rel="icon" href="img/logo_pequeno.png">
          <link href="css/principal.css" rel="stylesheet" />
          <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
          <link href="css/select2.min.css" rel="stylesheet" />
          <link href="https://fonts.googleapis.com/css?family=Raleway&display=swap" rel="stylesheet">
          <link rel="stylesheet" href="css/bootstrap.min.css">
          <script src="js/principal.js"></script>
          <script src="js/jquery.min.js" type="text/javascript"></script>
        <script src="js/jquery.Jcrop.js" type="text/javascript"></script>
        <script src="js/jquery.Jcrop.min.js" type="text/javascript"></script>
        <link rel="stylesheet" href="css/jquery.Jcrop.css" type="text/css" />
        <link rel="stylesheet" href="css/demos.css" type="text/css" />
      </head>
      <script type="text/javascript">
            jQuery(function($){
            // Create variables (in this scope) to hold the API and image size
            var jcrop_api, boundx, boundy;
            
            $('#cropbox').Jcrop({
              onChange: updatePreview,
              onSelect: updatePreview,
              aspectRatio: 1
              
            },function(){
              // Use the API to get the real image size
              var bounds = this.getBounds();
              boundx = bounds[0];
              boundy = bounds[1];
              // Store the API in the jcrop_api variable
              jcrop_api = this;
            });
            function updatePreview(c)
            {
              if (parseInt(c.w) > 0)
              {
                var rx = 100 / c.w;
                var ry = 100 / c.h;
                $('#preview').css({
                  width: Math.round(rx * boundx) + 'px',
                  height: Math.round(ry * boundy) + 'px',
                  marginLeft: '-' + Math.round(rx * c.x) + 'px',
                  marginTop: '-' + Math.round(ry * c.y) + 'px'
                });
              }
            };
              $(function(){
              $('#cropbox').Jcrop({
                aspectRatio: 1,
                onSelect: updateCoords
              });
            });
            function updateCoords(c)
            {
              $('#x').val(c.x);
              $('#y').val(c.y);
              $('#w').val(c.w);
              $('#h').val(c.h);
            };
            function checkCoords()
            {
              if (parseInt($('#w').val())) return true;
              alert('Please select a crop region then press submit.');
              return false;
            };
          });
      </script>
        <body>
            <main>
          <?php include("conecta_mysql.php"); 
                require_once("logica-usuario.php");
                include("foto_perfil_php.php");?>    
            <div id="outer">
            <div class="jcExample">
            <div class="article">
                <table>
                  <tr>
                    <td>
                      <img id="cropbox" alt="Flowers" src="img/perfil/<?php echo $foto_perfil ; ?>" style="width: 100%; margin-right: 2rem">
                    </td>
                    <td>
                        <div style="width:100px;height:100px;overflow:hidden;">
                            <img src="img/perfil/<?php echo $foto_perfil ; ?>" id="preview" alt="Preview" class="jcrop-preview" />
                          </div>
                    </td>
                  </tr>
                </table>
              <form action="alterar_imagem.php" method="post" onsubmit="return checkCoords();">
                <input type="hidden" id="x" name="x" />
                <input type="hidden" id="y" name="y" />
                <input type="hidden" id="w" name="w" />
                <input type="hidden" id="h" name="h" />
                <input type="submit" value="Recortar" />
            </form>
                <form method="post" enctype="multipart/form-data" name="cadastro">
                    <input class="btn btn-outline-success" id="escolha_foto" type="file" name="foto">
                    <button type="file" id="button_perfil" class="btn btn-outline-success" name="upload_foto"> OK </button>
                    <button class="btn btn-outline-success" onclick="refresh()">SAIR</button>
                </form>    
            </div>
            </div>
            </div> 
          </main>
       </body>
      <?php include('rodape.php') ?>
×

Important Information

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