Selecionar um item na combo e aparecer os dados deste item em div

Front-end
#1

Boa tarde amigos,

Estou desenvolvendo uma funcionalidade de entrada de pedidos, e estou com uma dúvida… A princípio um pedido é composto por 2 partes: Header (Cabeçalho) e o Corpo (Os itens do pedido), blz… A dúvida está no Header, tenho uma combo com todos os clientes listados, como a Header é composta de Endereço do cliente, telefone, CNPJ, IE e etc…

Aidéia seria que quando selecionasse um cliente na combo, os dados deste cliente fossem preenchidos automaticamente nos campos do formulário com um evento tipo Onchange, que inicialmente estariam dentro de uma div oculta e esta div ficaria visível com todos estes campos após o usuário selecionar um cliente na cambo.

Alguém teria uma idéia e/ou exemplo de como poderia desenvolver isto. A idéia seria somente para mostrar os dados do cliente na div, pois a combo já consigo popular, provavelmente deve ter um JS ai no meio…

Obrigado.

#2

Acho que dá assim.
No onChange da combo você chama uma função js que executa uma action.
Esta action te retorna o cliente obtido através do id do cliente (valor da combo).
O formulário de Clientes é populado através do retorno.

Tipo,

...
<input type="text" name="nome_cliente" id="nome_cliente" value="${cliente.nome}"

Quando a action for executada e te retornar um cliente, o campo do formulário será preenchido com o nome do cliente. Quando não tiver Cliente na sessão o campo do form ficará em branco.

Desta forma o formulário ficaria sempre visível e seria preenchido quando o cliente fosse selecionado na combo.

Mais ou menos isso?

#3

se vc tiver utilizando struts vc chama uma funcao javascript que submete o form no onchange e na action vc pega o cliente procura seus dados e seta no form que dai quando da o refresh na tela os dados vão estar setados no form e irão aparecer na tela.

#4

Você tem que usar Ajax, ao selecionar o cliente na combo a função js faz um requisição para o servidor e depois é só pegar o resultado e jogar na div.

#5

Isso mesmo, poderia colocar este JS na combo, tipo assim:

... onchange="document.forms[0].action='detalhesCliente.do';document.forms[0].method.value='detalhesCliente';document.forms[0].submit();" ...

Tipo assim ne?

Vlw…

#6

Amigo Alberes, vc teria um exemplo deste meu caso usando Ajax, sem refresh?

#7

Olá IgorFranco, o código abaixo funciona, você pode colocar na sua página ou em js.

Existem muitos frameworks que faz isso JQuery, Protype etc.

Qualquer coisa estou online.

function atualizarDiv(id){
    var url = "sua url";//coloque aqui sua url
    var send = '&codigoCliente=' + escape(document.formulario.codigoCliente.value);//Combo que contém o código do cliente

    req = getXObject();
	req.onreadystatechange=function(){
		if(req.readyState == 4){
			if(req.status == 200){				
				var divCliente = document.getElementById(id);				
				if(divCliente != null){									
					divCliente.innerHTML = req.responseText;//Atualiza sua div. Envie uma string formatada com css etc
				}
			}else{
				alert("Error ao carregar");
			}
		}
	}
	
	req.open("GET", url, true);
	req.send(send);
	
    }
}

//Retorna um objeto conforme o navegador
function getXObject(){
	if(window.ActiveXObject)
		req = new ActiveXObject("Microsoft.XMLHTTP");
	else if(window.XMLHttpRequest)
		req = new XMLHttpRequest();
		
	return req;
}
#8