I am using the viacep site example so when the user enters the zip code, the other address data is filled in, but I would like the state through a select to be filled in automatically. The example shows it being filled in an input.
My javascript
//Pessoa
function limpa_formulário_cep() {
//Limpa valores do formulário de cep.
document.getElementById('frm:tabForm:logradouro').value=("");
document.getElementById('frm:tabForm:complemento').value=("");
document.getElementById('frm:tabForm:bairro').value=("");
document.getElementById('frm:tabForm:cidade').value=("");
document.getElementById('frm:tabForm:estadoEndereco').value=("");
}function meu_callback(conteudo) {if (!("erro" in conteudo)) {
//Atualiza os campos com os valores.
document.getElementById('frm:tabForm:logradouro').value=(conteudo.logradouro);
document.getElementById('frm:tabForm:complemento').value=(conteudo.complemento);
document.getElementById('frm:tabForm:bairro').value=(conteudo.bairro);
document.getElementById('frm:tabForm:cidade').value=(conteudo.localidade);
document.getElementById('frm:tabForm:estadoEndereco').value=(conteudo.uf);
} //end if.
else {
//CEP não Encontrado.
limpa_formulário_cep();
alert("CEP não encontrado.");
}
}
function pesquisacep(valor) {
//Nova variável "cep" somente com dígitos.
var cep = valor.replace(/\D/g, '');
//Verifica se campo cep possui valor informado.
if (cep != "") {
//Expressão regular para validar o CEP.
var validacep = /^[0-9]{8}$/;
//Valida o formato do CEP.
if(validacep.test(cep)) {
//Preenche os campos com "..." enquanto consulta webservice.
document.getElementById('frm:tabForm:logradouro').value="...";
document.getElementById('frm:tabForm:complemento').value=("...");
document.getElementById('frm:tabForm:bairro').value="...";
document.getElementById('frm:tabForm:cidade').value="...";
document.getElementById('frm:tabForm:estadoEndereco').value="...";
//Cria um elemento javascript.
var script = document.createElement('script');
//Sincroniza com o callback.
script.src = '//viacep.com.br/ws/'+ cep + '/json/?callback=meu_callback';
//Insere script no documento e carrega o conteúdo.
document.body.appendChild(script);
} //end if.
else {
//cep é inválido.
limpa_formulário_cep();
alert("Formato de CEP inválido.");
}
} //end if.
else {
//cep sem valor, limpa formulário.
limpa_formulário_cep();
}
};
My xhtml. The state select I bring from the database
<p:fieldset legend="Endereço">
<p:panelGrid styleClass="noGridBorder">
<p:row>
<p:column />
</p:row>
<p:row>
<p:column>
<p:outputLabel value="CEP" for="cep" />
</p:column>
<p:column>
<p:inputMask id="cep" label="CEP" size="9" maxlength="9"
required="true" requiredMessage="O campo CEP é obrigatório."
value="#{pessoaBean.pessoaEndereco.cep}"
onblur="pesquisacep(this.value);" mask="99999-999" />
</p:column>
<p:column>
<p:outputLabel value="Logradouro" for="logradouro" />
</p:column>
<p:column colspan="5">
<p:inputText id="logradouro" onkeyup="alteraMaiusculo()"
required="true" label="Logradouro" size="95"
requiredMessage="O campo Logradouro é obrigatório."
value="#{pessoaBean.pessoaEndereco.logradouro}" />
</p:column>
</p:row>
<p:row>
<p:column>
<p:outputLabel value="Número" for="numero" />
</p:column>
<p:column>
<p:inputMask id="numero" label="Número" size="10"
maxlength="10" required="true"
requiredMessage="O campo Número é obrigatório."
value="#{pessoaBean.pessoaEndereco.numero}"
mask="9?999999999999" />
</p:column>
<p:column>
<p:outputLabel value="Bairro" for="bairro" />
</p:column>
<p:column>
<p:inputText id="bairro" onkeyup="alteraMaiusculo()"
required="true" label="bairro" size="24"
requiredMessage="O campo Bairro é obrigatório."
value="#{pessoaBean.pessoaEndereco.bairro}" />
</p:column>
<p:column>
<p:outputLabel value="Cidade" for="cidade" />
</p:column>
<p:column>
<p:inputText id="cidade" onkeyup="alteraMaiusculo()"
required="true" label="Cidade" size="24"
requiredMessage="O campo Cidade é obrigatório."
value="#{pessoaBean.pessoaEndereco.cidade}" />
</p:column>
<p:column>
<p:outputLabel value="Estado" for="estadoEndereco" />
</p:column>
<p:column>
<p:selectOneMenu id="estadoEndereco" required="true"
requiredMessage="O campo Endereço/Estado é obrigatório."
value="#{pessoaBean.pessoaEndereco.estado.idEstado}">
<f:selectItems value="#{pessoaBean.listaEstados}" />
</p:selectOneMenu>
</p:column>
</p:row>
<p:row>
<p:column>
<p:outputLabel value="Complemento" for="complemento" />
</p:column>
<p:column colspan="3">
<p:inputText id="complemento" onkeyup="alteraMaiusculo()"
label="Complemento" maxlength="30" size="55"
value="#{pessoaBean.pessoaEndereco.complemento}">
</p:inputText>
</p:column>
<p:column>
<p:outputLabel value="Ponto de Ref." for="pr" />
</p:column>
<p:column colspan="3">
<p:inputText id="pr" onkeyup="alteraMaiusculo()"
label="Ponto de Referência" size="50"
value="#{pessoaBean.pessoaEndereco.pontoReferencia}">
</p:inputText>
</p:column>
</p:row>
</p:panelGrid>
</p:fieldset>