¿Como mostrar datos dependientes al seleccionar un campo del formulario?

orw28 · #1 (**permalink**) 09/04/2013, 05:46

Hola a todos! Necesito ayuda con lo siguiente: Tengo un formulario, en uno de los campos hago una busqueda, escribo una palabra y se van desplegando las opciones tipo google (con autocompletar), esto funciona bien, pero quiero que cuando seleccione el valor deseado en ese campo con un clic, automaticamente se me llenen los siguientes campos con los demas valores correspondientes al seleccionado, es decir, selecciono el nombre del medicamento y en los siguientes campos se llenan automaticamente la forma farmaceutica, via de administracion, y marcas comerciales, todo esto esta en una misma tabla de mysql llamada medicamento. Disculpen que me haya extendido pero queria explicarme.

Aqui el codigo que tengo:

<html >
<head>
<title>Sistema</title>
<script language="JavaScript" src="js/jquery-1.5.1.min.js"></script>
<script language="JavaScript" src="js/jquery-ui-1.8.13.custom.min.js"></script>
<link type="text/css" href="css/ui-lightness/jquery-ui-1.8.13.custom.css" rel="stylesheet" />
</head>

<body>

<div>
<H1>Llene todos los datos del formulario:</H1>
<BR>

<form name="form1" action="recipepdf.php" method="POST">
<td>Escriba nombre del medicamento:</td>
<?php
include("conexion.php");
$con = "select * from medicamento";
$query = mysql_query($con);
?>

<script>
$(function() {
<?php
while($row= mysql_fetch_array($query)) {//se reciben los valores y se almacenan en un arreglo
$elementos[]= '"'.$row['med_comercial_1'].'"';
}
$arreglo= implode(", ", $elementos);//junta los valores del array en una sola cadena de texto
?>

var availableTags=new Array(<?php echo $arreglo; ?>);//imprime el arreglo dentro de un array de javascript
$( "#tags" ).autocomplete({
source: availableTags
});
});
</script>

<label for="tags"></label>
<input id="tags" name="nombre">

<td>Forma Farmaceutica:</td>
<td><input name="present" type="text" id="present" size="30"></td><br>

<td>Via de Administracion:</td>
<td><input name="viadmin" type="text" id="viadmin" size="30"></td><br>

<td>Marcas Comerciales:</td>
<td><input name="marca" type="text" id="marca" size="30"></td><br>

</tr><br>
<input name="Enviar" type="submit" value="PDF">
</form>

</BODY>
</HTML>

Les agradezco la ayuda

rottenp4nx · #2 (**permalink**) 09/04/2013, 06:12

Puedes usar Ajax y JSON

y el evento que necesitas es change que viene en la libreria Jquery

Cuando se haga clic en un medicamente, se ejecuta el evento change, ejecutas ajax y traes los datos por JSON, y completas los campos

Saludos

orw28 · #3 (**permalink**) 09/04/2013, 08:58

Gracias! Ya estoy investigando, pero me podrias dar un ejemplo sobre el caso? es que no he trabajado con ajax y json.. Por lo menos se que hay una solucion! Gracias!

rottenp4nx · #4 (**permalink**) 09/04/2013, 14:40

Supongamos que cada medicamento tiene su PK numerica por ejemplo

Código HTML:

Ver original<select id="listaMedicamentos">
<option selected value="null"></option>
<option value="1">Medicamento 1</option>
<option value="2">Medicamento 2</option>
<option value="3">Medicamento 3</option>
</select>
<div id="resMedicamento"></div>

Javascript/Jquery

Código Javascript:

Ver original$(document).ready(
   $("#listaMedicamentos").change(cargarMedicamento);
);
 
function cargarMedicamento(){
    var x = $(this).val();
   $.ajax(
       data: "idMedicamento="+x,
       type: "post",
       url: "procesar.php",
       dataType: "json",
       beforeSend: function(){
              $("#resMedicamento").html("Cargando Medicamento");
       },
       success: function(datos){
              alert(datos);
              //Aqui agregar los datos a sus respectivos campos
       }
   );
}

El PHP, procesar.php

Código PHP:

Ver original<?php
 
   $id = $_POST['idMedicamento'];
   //conexion a la bd
   $sql = "Select * from medicamentos where id = $id";
   $reg = mysql_query($sql);
   $r = mysql_fetch_assoc($reg);
   echo json_encode($r);
?>

Solo faltaría poner los datos a los input text, que seria en success en JS

Saludos

strauss62 · #5 (**permalink**) 09/04/2013, 15:40

hola amigo yo presente el mismo inconveniente esta semana y luego de mucho investigar encontre el codigo que necesitaba para este problemita espero que te sirva igualmente.
consta de 3 partes te voy a enviar el codigo tal cual como yo lo utilice.
te voy a poner el link con el codigo la unica diferencia es que yo utilizo una bd postgres solo debes cambiar los comando y ya.

http://strauss62.host30.conexcol.net.co/codigos/autocompletar.zip

si quieres saber si te esta trabajando bn activa la consola del browser asi te das cuenta si te falta algo

si necesitas algo me escribes buena suerte

amigo se me olvido decirte funciona bien el unico inconveniente que tiene y el cual no he podido solucionar es si el nombre contiene acentos no me los trae y me muestra el campo como null si encuentras la forma de solucionarlo te lo agradeceria

orw28 · #6 (**permalink**) 10/04/2013, 12:51

Muchas gracias por su ayuda, revisare sus propuestas y cualquier duda volvere a molestar ya q no he trabajado con ajax, gracias!

emma09 · #7 (**permalink**) 20/05/2013, 21:44

hola strauss62 disculpa que te molesto a esta altura, pero es que ando con un problema de autocompletar un campo; y es exactamente como tú lo utilizas la forma de la que yo la necesito porque estoy trabajando con postgres tmb y me sirve de mucho tu ejemplo, sólo que nosé qué información contiene exactamente el archivo llamado conectar.php, que se llama desde el archivo consulta_empresas.php, porque imagino que hay una función ahí, pero no imagino cómo es, me podrías decir cómo es?? o mandarmela para implementarla en lo que toy haciendo?? muchas gracias y perdona que me extendí tanto para explicarte mi problema...