need to make the form fill the info from the search by cnpj

Asked

Viewed 2,098 times

1

Below is an excerpt of the code. I have doubts about how to make, when clicking SEARCH, the CNPJ is found on the site receitasws and the fields below are filled: http://www.receitaws.com.br/v1/cnpj/00000000000000 using the $.ajax function of the jQuery library.

(Where "00000000000000" is the CNPJ to be researched)

<!DOCTYPE html>
    <!DOCTYPE html>
    <html lang="pt-br">
    <head>
    	<title>.:Formulario:.</title>
    	<meta charset="utf-8">
    	<link rel="stylesheet" type="text/css" href="estilo.css">
    	<script src="jquery.js"></script>
    	<script src="jquery.validate.js"></script>
    	<script>
    		/*$(document).ready(function(){
    			$.ajax({
    				url:'http://www.receitaws.com.br/v1/cnpj/[cnpj]',
    				method:'GET',
    				dataType:'jSon',
    				complete: function(xhr){
    					console.log(xhr.responseJSON);
    				}
    			});
    
    		});	*/
    		/*{
              "scriptkey": "DATABASE_PASSWORD",
         	    "scriptvalue": "",
         	    "scriptdefaultvalue": "",
         	    "type": "password"
             },*/
    	</script>
    </head>
    <body>
    	<form id="formu">
    		
    
        <p>Cadastro de Empresa</p>
    		<fieldset id="first">
    
    			<label for="cnpj">CNPJ</label><br/>
    				<input id="cnpj" type="text" name="cnpj" size="35" maxlength="14" style="margin-right:20px; ">
    					<input type="submit" name="pesqui" value="Pesquisar"><br/><br/>
    			
    			<label for="razao">Razão social</label><br/>
    				<input id="razao" type="text" name="razao" size="35" maxlength="50"><br/><br/>
    			
    			<label for="nome">Nome fantasia</label><br/>
    				<input id="nome" type="text" name="nome" size="35" maxlength="50"><br/><br/>
    		</fieldset>
    		
    		<fieldset id="second">
    			
    			<label for="logradouro">Logradouro</label><br/>
    				<input id="logradouro" type="text" name="Logradouro" size="35" maxlength="50"><br/><br/>
    			
    			
    		</fieldset>
    		<br/><input id=save type="submit" name="salvar" value="Salvar">
    	</form>
    
    </body>
    </html>

javascript jquery html ajax

  • Where are the rest of the courses @Diego Marques

1 answer

4


In this case it is necessary to include an event of click on the button, and then perform the Ajax call to fill the form with the return. Below is an example:

$(document).ready(function(){

  // Adicionamos o evento onclick ao botão com o ID "pesquisar"
  $('#pesquisar').on('click', function(e) {
    
    // Apesar do botão estar com o type="button", é prudente chamar essa função para evitar algum comportamento indesejado
    e.preventDefault();
    
    // Aqui recuperamos o cnpj preenchido do campo e usamos uma expressão regular para limpar da string tudo aquilo que for diferente de números
    var cnpj = $('#cnpj').val().replace(/[^0-9]/g, '');
    
    // Fazemos uma verificação simples do cnpj confirmando se ele tem 14 caracteres
    if(cnpj.length == 14) {
    
      // Aqui rodamos o ajax para a url da API concatenando o número do CNPJ na url
      $.ajax({
        url:'https://www.receitaws.com.br/v1/cnpj/' + cnpj,
        method:'GET',
        dataType: 'jsonp', // Em requisições AJAX para outro domínio é necessário usar o formato "jsonp" que é o único aceito pelos navegadores por questão de segurança
        complete: function(xhr){
        
          // Aqui recuperamos o json retornado
          response = xhr.responseJSON;
          
          // Na documentação desta API tem esse campo status que retorna "OK" caso a consulta tenha sido efetuada com sucesso
          if(response.status == 'OK') {
          
            // Agora preenchemos os campos com os valores retornados
            $('#razao').val(response.nome);
            $('#nome').val(response.fantasia);
            $('#logradouro').val(response.logradouro);
          
          // Aqui exibimos uma mensagem caso tenha ocorrido algum erro
          } else {
            alert(response.message); // Neste caso estamos imprimindo a mensagem que a própria API retorna
          }
        }
      });
    
    // Tratativa para caso o CNPJ não tenha 14 caracteres
    } else {
      alert('CNPJ inválido');
    }
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="formu">
        <p>Cadastro de Empresa</p>
    		<fieldset id="first">
    
    			<label for="cnpj">CNPJ</label><br/>
    				<input id="cnpj" type="text" name="cnpj" size="35" maxlength="14" style="margin-right:20px; " value="27865757000102"><!-- Coloquei o value já preenchido apenas para facilitar os testes durante o desenvolvimento -->
    					<input id="pesquisar" type="button" name="pesqui" value="Pesquisar"><!-- Aqui incluímos o id="pesquisar" para poder aplicar o evento pelo ID e mudamos o type para "button"--><br/><br/>
    			
    			<label for="razao">Razão social</label><br/>
    				<input id="razao" type="text" name="razao" size="35" maxlength="50"><br/><br/>
    			
    			<label for="nome">Nome fantasia</label><br/>
    				<input id="nome" type="text" name="nome" size="35" maxlength="50"><br/><br/>
    		</fieldset>
    		
    		<fieldset id="second">
    			
    			<label for="logradouro">Logradouro</label><br/>
    				<input id="logradouro" type="text" name="Logradouro" size="35" maxlength="50"><br/><br/>
    			
    			
    		</fieldset>
    		<br/><input id=save type="submit" name="salvar" value="Salvar">
    	</form>

  • Diego, this ajax call can be inside the script?

  • 1

    Yes, but the 100% ideal is you put it in a Javascript file "example.js" and include it by the script tag, e.g.: <script src="example.js"></script>, so your code gets organized :)

  • I got it. Put a file to the lynched part. Beauty, Diego. Thanks a lot ,cara ! Anything, I ask you right here ! Thanks!!

  • 1

    We are always at your disposal. :)

Browser other questions tagged javascript jquery html ajax

You are not signed in. Login or sign up in order to post.