I have a form on a JSP page. When the client enters the CPF, via AJAX, I get the CPF I make an appointment in the bank, if she has already registered. I get all his data, and I fill in the fields automatically.
But I'm in trouble, AJAX calls the page carrega_cpf.jsp
But when I put the JavaScript on this page, for it to populate the form fields, it does not work.
Does anyone know of any alternatives, to make JavaScript work on the page that is loaded by AJAX?
You can create a page that receives the cpf as a parameter and returns the customer data in json . By doing this, you perform the search with ajax , and fill in the values in inputs .
I'll leave an example using CEP's as a basis.
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 enter the zip code, and after it exits the input , the function will be called 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 do not have information on how your code is jsp , but if you have any questions on how to return the data at json , look at 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><divclass="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 is a example in JsFiddle .
Example Credits: Search CEP