You can create a page Cpf as parameter and returns the client data in json. In doing so, you perform the search with the ajax
, and fills the values in the inputs
.
I’ll leave an example using CEP’s as a base.
First you create your form:
<div class="well">
<form class="form row" action="checkout-sample" method="POST">
<div class="form-group col-sm-2">
<label>CEP</label><input id="cep" class="form-control" name="cep" type="text">
</div>
<div class="form-group col-sm-2">
<label>Estado</label><input id="estado" class="form-control" name="estado" type="text">
</div>
<div class="form-group col-sm-3">
<label>Cidade</label><input id="cidade" class="form-control" name="cidade" type="text">
</div>
<div class="form-group col-sm-2">
<label>Bairro</label><input id="bairro" class="form-control" name="bairro" type="text">
</div>
<div class="form-group col-sm-3">
<label>Endereço</label><input id="endereco" class="form-control" name="endereco" type="text">
</div>
</form>
</div>
In this example, the user will type the zip code, and after it exits the input
, will be called the function to fetch the data.
jQuery(function($){
$("input#cep").change(function(){
var cep_code = $(this).val();
if( cep_code.length <= 0 ) return;
alert("Enviando consulta do CEP "+cep_code);
$.get("http://apps.widenet.com.br/busca-cep/api/cep.json", { code: cep_code },
function(result){
if( result.status!=1 ){
alert(result.message || "Houve um erro desconhecido");
return;
}
$("input#cep").val( result.code );
$("input#estado").val( result.state );
$("input#cidade").val( result.city );
$("input#bairro").val( result.district );
$("input#endereco").val( result.address );
$("input#estado").val( result.state );
//alert("Dados recebidos e alterados");
});
});
});
I have no information as to your code jsp, but if you have any questions on how to return the data in json, look this link.
jQuery(function($){
$("input#cep").change(function(){
var cep_code = $(this).val();
if( cep_code.length <= 0 ) return;
alert("Enviando consulta do CEP "+cep_code);
$.get("http://apps.widenet.com.br/busca-cep/api/cep.json", { code: cep_code },
function(result){
if( result.status!=1 ){
alert(result.message || "Houve um erro desconhecido");
return;
}
$("input#cep").val( result.code );
$("input#estado").val( result.state );
$("input#cidade").val( result.city );
$("input#bairro").val( result.district );
$("input#endereco").val( result.address );
$("input#estado").val( result.state );
//alert("Dados recebidos e alterados");
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="well"><form class="form row" action="checkout-sample" method="POST">
<div class="form-group col-sm-2"><label>CEP</label><input id="cep" class="form-control" name="cep" type="text"></div>
<div class="form-group col-sm-2"><label>Estado</label><input id="estado" class="form-control" name="estado" type="text"></div>
<div class="form-group col-sm-3"><label>Cidade</label><input id="cidade" class="form-control" name="cidade" type="text"></div>
<div class="form-group col-sm-2"><label>Bairro</label><input id="bairro" class="form-control" name="bairro" type="text"></div>
<div class="form-group col-sm-3"><label>Endereço</label><input id="endereco" class="form-control" name="endereco" type="text"></div>
</form>
</div>
If you prefer, here’s one example in Jsfiddle.
Credits from the example: Search ZIP code
But if you already have a form that fills in the fields automatically, what is the problem that is occurring? Why put another Javascript on the page? I didn’t understand, was confused your question.
– Ivan Ferrer