I need to have the form fill in the info from the search by cnpj

Navigation
1

Below is a snippet of code. I have doubts on how to do so, when clicking SEARCH, the CNPJ can be found on the receivers site and the fields below are filled in: link using the $ .ajax function of the jQuery library.

(Where "00000000000000" is the CNPJ to be searched for) 

<!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>
    
asked by anonymous 02.09.2017 / 20:04

1 answer

2

In this case you need to include a click event on the button, and then hold the Ajax call to fill out the form with the return. Here 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><formid="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>
    
02.09.2017 / 20:21
Read and interpret JSON files [duplicate] JTextPane Word Wrapper