Option menu carregar demais dados (mysql) em campos de texto

Julios_santos · Julho 25, 2014

Pessoal a idéia não é nova, mas para mim está sendo um problemão... O objetivo é selecionar determinado a referencia do produto em uma option, que recebe os dados do mysql (até ai tudo certo) e as demais informações sejam preenchidas em campos de texto separadas...

Já vi várias discussões e nenhuma me ajudou, faz 3 dias que estou com o abacaxi e estou precisando de ajuda, segue o que consegui fazer até agora:

<?php
#chama o arquivo de configuração com o banco
require 'config.php';
#seleciona os dados da tabela produto
$query = mysql_query("SELECT id, descricao, codigo, categoria FROM produtos");
# abaixo montamos um formulário em html
# e preenchemos o select com dados
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Documento sem título</title>
<script src="jquery-1.6.3.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
		
      $("select[id=produto]").change(function(){
		
		  $("input[id=descricao]").val(' ');
		  $("input[id=categoria]").val(' ');
		  $("input[id=preco]").val(' ');
		  	
		  	$.get("teste.php",
			{valor:$(this).val()},
			function(valor){
				 $("input[id=descricao]").val(valor);
				 $("input[id=categoria]").val(valor);
				 $("input[id=preco]").val(valor);
				})
		 })
    })
</script>


</head>

<body>
<form id="form" name="from" method="post" action="">
    
    <table width="600" cellpadding="0" cellspacing="0"  style="border: 1px solid  #A5A5A5; padding: 5px">
      <tr align="center">
    <td >Código</td>
    <td >Descrição</td>
    <td >Categoria</td>
    <td >Preço</td>
  </tr>
  
  
  <tr align="center">
    <td>
<select name="produto" id="produto" >
<option></option>
   <?php while($prod = mysql_fetch_array($query)) { ?>
<option value="<?php echo $prod['id'] ?>">     <?php echo $prod['codigo'] ?></option>
   <?php } ?>
</select>  
    </td>
    <td><input type="text" name="descricao" id="descricao" readonly="readonly" /></td>
    <td><input type="text" name="resposta" id="categoria" readonly="readonly" /></td>
    <td><input type="text" name="resposta" id="preco" readonly="readonly" /></td>
  </tr>
</table>

</form>
</body>
</html>

<?php
include("config.php");

$ibusca=$_GET['valor'];

$sql="SELECT codigo, descricao, categoria, preco FROM produtos WHERE id=$ibusca";

$linha=mysql_query($sql) or die(mysql_error());

$cont=mysql_fetch_assoc($linha);

echo $cont['descricao'];
echo $cont['categoria'];
echo $cont['preco'];

//echo $cont['descricao'] ." - ". $cont['categoria'] ." - ". $cont['preco'];

?>

Coloquei em Java pois acho que o problema está no js e não no php, além de não manjar muito de js e uma vez que as respostas estão retornando do bd...

Poderiam me auxiliar???

Valeu!

William Bruno · Julho 25, 2014

Vc precisa retornar os dados de forma "organizada". Faça o seguinte, troque:

echo $cont['descricao'];
echo $cont['categoria'];
echo $cont['preco'];

por:

echo json_encode($cont);

e ai, troque:

$("input[id=descricao]").val(valor);
$("input[id=categoria]").val(valor);
$("input[id=preco]").val(valor);

por

$("input[id=descricao]").val(valor.descricao);
$("input[id=categoria]").val(valor.categoria);
$("input[id=preco]").val(valor.preco);

Caso vc precise debugar, leia esses 2 links para entender como o js funciona:

http://wbruno.com.br/javascript-puro/como-debugar-javascript-firefox-erros-comuns/

http://wbruno.com.br/ajax/como-debugar-ajax-firebug/

Julios_santos · Julho 25, 2014

Olá Bruno obrigado pelas dicas, mas não entendi onde o

echo json_encode($cont);

exibiria a resposta...

No caso do JS:

$("input[id=descricao]").val(valor.descricao);

o valor já não foi declarada no "input[id=descricao]"?

Desculpe mas como disse não entendo muito de JS, fiz as alterações li o seu artigo e infelizmente não funcionou, tem algo mais que não estou entendendo?

William Bruno · Julho 25, 2014

O que apareceu no console de erros ?

E como está a requisição na aba rede ?

Julios_santos · Julho 25, 2014

olha se for no console do Chrome não apareceu nada...

mas no campo onde declarei:

$("input[id=descricao]").val(valor.descricao);

aparece em brando...

nos outros 2 que deixei o codigo "original" aparece:

{"codigo":"35","descricao":"tinta eco magenta","categoria":"tinta","preco":"165,00"}

William Bruno · Julho 25, 2014

Coloca esse header em cima:

header('Content-type: application/json');
echo json_encode($cont);

Vou responder as suas perguntas.

O json_encode() vai devolver no success do ajax a resposta. (estou formatando como você viu o retorno, pois se voltar da forma q você estava fazendo, seria impossível separar os dados, e enviar um para cada input)

O valor não estava declarado antes, antes você estava colocando todo o retorno em um campo, colocando as mesmas coisas em todos eles. O que eu fiz, foi separar e fazer com que cada input recebesse o seu respectivo dado.

Tente com o header, e me fale o que acontece no console de erros(eu prefiro muito mais o Firefox, que é bem melhor para desenvolver js do que o Chrome.. mas enfim..), e o que aparece na aba rede.(conforme ensinei nos links)

Julios_santos · Julho 25, 2014

Bruno desculpe minha "ignorância", principalmente quando se envolve JS...

Funcionou corretamente agora:

include("config.php");

header('Content-type: application/json');

$ibusca=$_GET['valor'];

$sql="SELECT codigo, descricao, categoria, preco FROM produtos WHERE id=$ibusca";

$linha=mysql_query($sql) or die(mysql_error());

$cont=mysql_fetch_assoc($linha);

echo json_encode($cont);

      $("select[id=produto]").change(function(){
		
		  $("input[id=descricao]").val(' ');
		  $("input[id=categoria]").val(' ');
		  $("input[id=preco]").val(' ');
		  	
		  	$.get("teste.php",
			{valor:$(this).val()},
			function(valor){
				 $("input[id=descricao]").val(valor.descricao);
				 $("input[id=categoria]").val(valor.categoria);
				 $("input[id=preco]").val(valor.preco);

				})

Valeu as dicas, abraço!

William Bruno · Julho 25, 2014

Imagina cara, não precisa se desculpar por nada.

Eu que peço desculpas se pareci "sem paciência" ou rígido de mais.

Só mais uma dica:

$ibusca= (int)$_GET['valor'];

vai te evitar algumas dores de cabeça com valores "errados" no get.

Julios_santos · Julho 25, 2014

Imagina... valeu mesmo as dicas e obrigado mais uma vez!!!

Arquivado

Option menu carregar demais dados (mysql) em campos de texto

Recommended Posts

Julios_santos 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

Julios_santos 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

Julios_santos 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

Julios_santos 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

Julios_santos 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Fixar div até atingir uma certa altura

Ajuda com Extends e envio para o banco

PHP+Codeginiter - Orientação para Impressão

Fóruns

Tempo Real

Informação importante