Mostrar datos traidos con un select en un formulario usando PHP (o JS)

[JamesWhannel]

Hola, tengo una duda que necesito resolver respecto a un proyecto que estoy
realizando. Tengo un pequeño formulario en HTML con algunos datos de empleados
que necesito traer de una base de datos de MySQL, se que tengo que usar la
consulta Select pero no se como hacer para que aparezcan los datos en el
formulario ya que en el cuadro de texto Nombre como es 1 cuadro de texto pues obviamente solo se vería el primer dato que me arroje la consulta
entonces quisiera saber como hacer para poder ver los datos de todos los empleados. Lo que tengo es algo asi como:

Numero de Identificacion:[listadesplegable] Nombre: [cajadetexto] Categoría: [cajadetexto] Area: [cajadetexto] Bimestre: [cajadetexto]


Entonces, se supone que con el Select me traería todos los numeros de identificacion que arrojó la consulta entonces me gustaría que al seleccionar
un Numero de Identificacion me aparezcan los datos del empleado que elegí.
También podría ser algun tipo de buscador.
Esas son opciónes que se me ocurrieron, o igual no se si exista una funcion
de Javascript para navegar entre los datos o algo, no se JavaScript pero he leido alguna que otra cosa para la que puede servir.

Cualquier sugerencia es bienvenida.

Les dejo el formulario de HTML que hice que es donde quiero mostrar los datos por si sirve de algo.

Código HTML:

<td width="780"><form id="form1" name="form1" method="post" action="">
        <p><strong><span class="numtrabajador">Num. Trabajador:</span></strong>
          <select name="numtrabajador" id="numtrabajador">
          </select>
          <strong>Nombre:</strong></span>
          <input name="nombre" type="text" id="nombre" size="60" />
          <br />
          <strong>Categoria: </strong>
          <input type="text" name="categoria" id="categoria" />
          <strong>Area:</strong>
          <input type="text" name="area" id="area" /> 
          <strong>Bimestre:</strong>
          <select name="bimestre" id="bimestre">
			  <option>Enero -  Febrero</option>
			  <option>Marzo -  Abril</option>
			  <option>Mayo -  Junio</option>
			  <option>Julio -  Agosto</option>
			  <option>Septiembre -  Octubre</option>
			  <option>Noviembre -  Diciembre</option>
          </select>
          </span> </p>
  </form></td> 

[arianna_rr]

Será necesario que uses AJAX.

[JamesWhannel]

Encontré un codigo (no se si está en JavaScript o Ajax) y PHP que hace lo que necesito, o sea de una lista desplegable me muestra los nombres y al clickearlo despliega todos los demás datos que pertenecen a dicho usuario.

En esta parte hace la consulta y llena la lista desplegable con los campos
que están en la BD

Código HTML:

<?php
require('conexion.php');

//seleccionamos solo el nombre de los clientes
$sql=mysql_query("SELECT nombres FROM clientes",$con);

?>
<select name="lista" onchange="pedirDatos()" >
<?php
while($row = mysql_fetch_array($sql)){
	echo "<option value=\"".$row['nombres']."\">".$row['nombres']."</option> \n";
}
?>
</select> 

Este es el codigo que hace la funcion, se llama ajax.js :

Código Javascript:

function objetoAjax(){
    var xmlhttp=false;
    try {
        xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
    } catch (e) {
        try {
           xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
        } catch (E) {
            xmlhttp = false;
        }
    }
 
    if (!xmlhttp && typeof XMLHttpRequest!='undefined') {
        xmlhttp = new XMLHttpRequest();
    }
    return xmlhttp;
}
 
function pedirDatos(){
    //donde se mostrará el resultado
    divResultado = document.getElementById('resultado');
    //tomamos el valor de la lista desplegable
    nom=document.formulario.lista.value;
 
    //instanciamos el objetoAjax
    ajax=objetoAjax();
    //usamos el medoto POST
    //archivo que realizará la operacion
    //datoscliente.php
    ajax.open("POST", "datoscliente.php",true);
    ajax.onreadystatechange=function() {
        if (ajax.readyState==4) {
            //mostrar resultados en esta capa
            divResultado.innerHTML = ajax.responseText
        }
    }
    ajax.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
    //enviando los valores
    ajax.send("nombres="+nom)
}
 

Lo que aparece en la linea 34 según entiendo, es lo que ya me manda al
momento que hago la seleccion de la lista y despliega todos los datos ya que
aparece div resultado en este formulario html:

Código HTML:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Consulta de datos</title>
<script language="JavaScript" type="text/javascript" src="ajax.js"></script>
</head>
<body>
<p>Este ejemplo muestra como realizar una consulta de los registros de una tabla usando un control de lista.</p>
<form name="formulario" action="">
<?php
	include('lista.php');
?>
</form>
<div id="resultado" style="border:1px solid #FF0000; color:#000099;width:400px;">
</div>
</body>
</html> 

A lo que voy es que ahi nadamas me muestra los datos debajo de la lista,
despliega un cuadro y ahi aparece la información, el problema es que yo
necesito que los datos me aparezcan en los cuadros de texto que tengo en
mi formulario, a ver si alguien me pudiera ayudar a hacer la modificación o
darme una idea de como modificarlo, como no se JavaScript ni Ajax me es
muy complicado saber que va y que no va o por donde empezar

Si es necesario muevan a otro subforo mi pregunta, gracias.!

[Hambrunaa]

entiendo tu duda. te dare un ejemplo con un codigo que me funciona a la perfeccion

mira, primero, para que el formulario se recargue con la informacion que elijas del select box. tienes que poner la funcion onChange dentro del select y llamar a una funcion javasctipt que luego llamaras, en este caso yo hice una funcion cargar()

este es mi select y lo estoy llenando directamente con una consulta a mi base de datos

Código HTML:

 <select name="mascota" class="campos" id="mascota" onChange="cargar()">
            <option value="0">Selecciona la mascota</option>
          [PHP]  <?php

			$consulta="select idM, nombreM from mascota where id='".$var."'";
		$result=$conexion->query($consulta) or 
		die ("fallo la consulta".$consulta);
			while ($fila=mysqli_fetch_row($result)){
				echo "<option value='".$fila['0']."'>".$fila['1']."</option>";
				
				
			}
			?>[/PHP]
          </select> 

este es mi script o codigo javascript que se puede colocar si quieres al final o al comienzo de body

Código:

<script> 
	
	function cargar(){
		var idM=document.formEditM.mascota.value;//guarda el valor del select
		$.ajax({
			url : 'procesarAjax8.php',		//pagina q me traera los datos 	
			data : { id:idM},              //envio el valor de select a procesarAjax8
			type : 'GET',
			dataType : 'json',
			success : function(json) {   //json almacena el echo de procesarAjax8

	//asi lleno el formulario, formEditM es el name e id de mi formulario
//luego del punto le pones el id del input que deseas poner la informacion traida con 
// JSON

        document.formEditM.nombre.value=json.nombreM;		
        document.formEditM.sexo.value=json.sexo;
 	document.formEditM.raza.value=json.raza;
	document.formEditM.color.value=json.color;
	document.formEditM.datepicker.value=json.fnac;
 	document.formEditM.tipoM.value=json.tipoM;
	
			},
			error : function(jqXHR, status, error) {
				//Si ocurre un error
			}
		});
	};
</script>

y este es el codigo que hay en procesarAjax8 que si te das cuenta lo llamo desde la funcion ajax.

Código PHP:

  <?php 
$id=$_GET['id'];
require_once('conexion.php');
include_once 'metodos.class.php';
$metodo= new metodos();
$data=array();
    $data['nombreM']=implode(" ",$metodo->buscar("mascota","idM='$id'","nombreM"));
    $data['sexo']=implode(" ",$metodo->buscar("mascota","idM='$id'","sexo"));
    $data['raza']=implode(" ",$metodo->buscar("mascota","idM='$id'","raza"));
    $data['color']=implode(" ",$metodo->buscar("mascota","idM='$id'","color"));
    $fn=implode(" ",$metodo->buscar("mascota","idM='$id'","fnac"));
    $data['tipo']=implode(" ",$metodo->buscar("mascota","idM='$id'","tipo"));
    
    $f= explode('-',$fn);
$fech=$f[2].'-'.$f[1].'-'.$f[0];
$data['fnac']=$fech;
 
echo json_encode($data); //esto es enviado al success de la funcion ajax
?>   

espero que te haya ayudado

[rodocoyote15]

Gracias @Hambrunaa, esperemos que cuatro años después le haya servido a su proyecto xD