0

Tengo el siguiente formulario que contiene una lista desplegable en la que aparecen una serie de valores y lo que quiero es que una vez se seleccione un valor del desplegable se completen los demás campo.

Ya he conseguido capturar el valor que selecciona el usuario en el desplegable y lo que me queda es hacer una consulta a la base de datos donde en el where se indique el valor que el usuario a seleccionado en el desplegable.

<?php
//* configuracion database.
include("conexion.php");
 
function filtrado($datos){
$datos = trim($datos); // Elimina espacios antes y después de los datos
$datos = stripslashes($datos); // Elimina backslashes \
$datos = htmlspecialchars($datos); // Traduce caracteres especiales en entidades HTML
return $datos;
}
 
$consulta = "SELECT * FROM RUCQ_Principal";
$resultado = mysqli_query($conexion, $consulta);
 
// aqui controlar si la query dio error o no.


//session_start();
//$_SESSION["Cod_Interno"] = $_GET['cod'];;


?>




<!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>
<link href="CSS\style_Modificar.css" rel="stylesheet" type="text/css" />
   <link href="CSS\Modificar_Datos_Principales.css" rel="stylesheet" type="text/css" />


<title>Modificar Datos Principales</title>
</head>

<body>


  <h1>MODIFICAR DATOS PRINCIPALES</h1>




<div class="Contenido">
  

<form id="form1" name="form1" method="post" action="Consulta_Datos_Principal.php">
<?php 
  include("conexion.php");




  $query = 'SELECT * FROM RUCQ_Principal';

  $result = $conexion->query($query);

?>
  <p>Código Interno</p>  
  <select id="producto" onchange="ShowSelected();" name="producto"> 
<!--no dejes espacios en el value si no cuando tengas que hacer una validación tendrás que poner los espacios para que sean iguales.-->
   <option value="0" > Seleccione:</option> 
<?php    
while ( $row = $result->fetch_array() )    
{
    ?>

 <!--estas seguro de que estas tomando el valor? solo estás imprimiendo la vista pero no pones nada en value="", tienes que ponerlo así:-->

   <option value="<?php echo $row['Cod_Interno']; ?>" > <?php echo $row['Cod_Interno']; ?></option> 
   
    

    <?php


}   

?>    

  </select>
<?php

?> <br>

<script type="text/javascript">
function ShowSelected()
{
/* Para obtener el valor */
var cod = document.getElementById("producto").value;
//alert(cod);

if(cod == '0'){

alert('Elige una opción');
return false; //Si el usuario oprime la opcion de seleccione le manda un alert

}else{

if (window.XMLHttpRequest) { //Estructura del AJAX
clean = new XMLHttpRequest();//Estructura del AJAX
  }else{//Estructura del AJAX
clean = new ActiveXObject("Microsoft.XMLHTTP");//Estructura del AJAX
  }//Estructura del AJAX

  clean.onreadystatechange = function(){//Estructura del AJAX

  if (clean.readyState  == 4 && clean.status == 200) {  //Estructura del AJAX

var repsuesta = clean.responseText; //esta es la respuesta que obtienes de tu archivo php, que sería la respuesta del servidor, puedes hacer un echo de un JSON para que agrupes tus variables de la consulta y cuando lo recibas con este ajax lo parseas con JSON.parse() y solamente tendrías que turnar los valores a los input por ejemplo: document.getElementById('GrupoHospital').value = (el primer elemento de tu JSON o depende como lo vayas a crear)

//Aquí estamos de regreso utilizamos la variable respuesta que a su vez tiene la repsués del servidor que sería el json de php, para utilizar ese json en JS necesitas parsearlo con esta funcion JSON.parse

var jsonjs = JSON.parse(respuesta);

//ya esta parseado y para entrar a sus valores haces lo siguiente 

console.log(jsonjs[0].cOficial);

//ahora solo asignas los valores a los inputs con document.getElementById() por eso la importancia de ponerles id's cuando quieres hacer un ajax

document.getElementById('Centro_oficial').value = jsonjs[0].cOficial;

document.getElementById('CodigoOficialAutonomico').value = jsonjs[0].cAutomatico;

//Y así con todos, aunque puedes hacer un ciclo si así será estáticos tus input para que no tengas que estás haciendo uno por uno, pero eso ya te lo dejo de tarea.

}

}

clean.open('GET','Consulta_Datos_Principal.php?cod='+cod,true);
//en tu archivo PHP recibirías tu variable cod con la variable global $_GET así; $_GET['cod']; y la utilizas para hacer tu consulta.
clean.send();


 
/* Para obtener el texto */
//var combo = document.getElementById("producto");
//var selected = combo.options[combo.selectedIndex].text;
//alert(selected);
}

}
</script>

  Nombre Centro Oficial
  <input type="textbox" name="Centro_oficial" id="Centro_oficial"><br>

  Grupo Hospital
  <input type="textbox" name="GrupoHospital" id="GrupoHospital"><br>

  Tipo Local
  <input type="textbox" name="TipoLocal" id="TipoLocal"><br>

  Territorio QS
  <input type="textbox" name="TerritorioQS" id="TerritorioQS"><br>

  Código Nacional
  <input type="textbox" name="CodigoNacional" id="CodigoNacional"><br>

  Código Ofical Autonómico
  <input type="textbox" name="CodigoOficialAutonomico" id="CodigoOficialAutonomico"><br>

  Siglas
  <input type="textbox" name="Siglas" id="Siglas"><br>

  Fecha Alta
  <input type="textbox" name="FechaAlta" id="FechaAlta"><br>

  Fecha Baja
  <input type="textbox" name="FechaBaja" id="FechaBaja"><br>

  Tipo Baja
  <input type="textbox" name="TipoBaja" id="TipoBaja"><br>

  Código Episodio
  <input type="textbox" name="CodigoEpisodio" id="CodigoEpisodio" ><br>  

  <br> 

  <input type="submit" name="accion" value="Grabar" /> 

</form>


</div>

</body>



</html>

Archivo consulta_Datos_Principales

<?php

$codigo = $_GET['cod']; // tu variable $_GET la guardo en otra recuerda que `cod` es el nombre que le pasas por la url

//* configuracion database.
include("conexion.php");

//Haces tu consulta por ejemplo traer todos los datos donde supongamos que tu campo es `codigo` entonces donde codigo = $codigo; así

$query = "SELECT NombreCentroOficial, GrupoHopital FROM RUCQ_Principal WHERE Cod_Interno = '$codigo'";

// la ejecutas, yo lo hago por procedimientos, no lo hago orientado a objetos :/

$resultado = mysqli_query($conexion, $query);

//después lo conviertes en JSON el array así

$datos = array(['cOficial' => $row[0],
                'cAutonomico' => $row[1],
                'tipoLocal' => $row[2] //así hasta que agregues todas las claves
]);
//después le mandas un echo que sería la respuesta del servidor utilizando la funcion json_encode para convertirlo en un json

echo json_encode($datos);

?>

1
  • Con el valor que seleccionó el usuario, debes hacer otra consulta, del tipo select * from [tabla] where valor=[valor obtenido]. Con esos datos llenas los textbox que necesites llenar... Saludos! Commented el 21 feb. 2019 a las 14:49

1 respuesta 1

1

<?php
 
//* configuracion database.
include("conexion.php");
 
function filtrado($datos){
    $datos = trim($datos); // Elimina espacios antes y después de los datos
    $datos = stripslashes($datos); // Elimina backslashes \
    $datos = htmlspecialchars($datos); // Traduce caracteres especiales en entidades HTML
    return $datos;
}
 
$consulta = "SELECT * FROM RUCQ_Principal";
$resultado = mysqli_query($conexion, $consulta);
 
// aqui controlar si la query dio error o no.


session_start();
$_SESSION["Cod_Interno"] = $_POST["Cod_Interno"];

?>




<!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>
    <link href="CSS\style_Modificar.css" rel="stylesheet" type="text/css" />
   <link href="CSS\Modificar_Datos_Principales.css" rel="stylesheet" type="text/css" />


    <title>Modificar Datos Principales</title>
</head>

<body>


  <h1>MODIFICAR DATOS PRINCIPALES</h1>




<div class="Contenido">
  

<form>
<?php 
  include("conexion.php");




  $query = 'SELECT * FROM RUCQ_Principal';

  $result = $conexion->query($query);

?>
  <p>Código Interno</p>  
  <select id="producto" onchange="ShowSelected();" name="producto"> 
//no dejes espacios en el value si no cuando tengas que hacer una validación tendrás que poner los espacios para que sean iguales.
       <option value="0" > Seleccione:</option> 
    <?php    
    while ( $row = $result->fetch_array() )    
    {
        ?>
    
 //estas seguro
//de que estas tomando el valor? solo estás imprimiendo la vista pero no pones nada en value="", tienes que ponerlo así:

       <option value="<?php echo $row['Cod_Interno']; ?>" > <?php echo $row['Cod_Interno']; ?></option> 
       
        

        <?php


    }   

    ?>    
    
  </select>
<?php

?> <br>

<script type="text/javascript">
function ShowSelected()
{
/* Para obtener el valor */
var cod = document.getElementById("producto").value;
alert(cod);

if(cod == '0'){

alert('Elige una opción');
return false; //Si el usuario oprime la opcion de seleccione le manda un alert

}else{

if (window.XMLHttpRequest) {
clean = new XMLHttpRequest();
  }else{
clean = new ActiveXObject("Microsoft.XMLHTTP");
  }

  clean.onreadystatechange = function(){

  if (clean.readyState  == 4 && clean.status == 200) {  

var obj = clean.responseText; //esta es la respuesta que obtienes de tu archivo php, que sería la respuesta del servidor, puedes hacer un echo de un JSON para que agrupes tus variables de la consulta y cuando lo recibas con este ajax lo parseas con JSON.parse() y solamente tendrías que turnar los valores a los input por ejemplo: document.getElementById('GrupoHospital').value = (el primer elemento de tu JSON o depende como lo vayas a crear)
}

}

clean.open('GET','consulta.php?cod='+cod,true);
//en tu archivo PHP recibirías tu variable cod con la variable global $_GET así; $_GET['cod']; y la utilizas para hacer tu consulta.
clean.send();


 
/* Para obtener el texto */
//var combo = document.getElementById("producto");
//var selected = combo.options[combo.selectedIndex].text;
//alert(selected);
}
</script>

 
  Nombre Centro Oficial
  <input type="textbox" name="Centro_oficial" id="Centro_oficial"><br>

  Grupo Hospital
  <input type="textbox" name="GrupoHospital" id="GrupoHospital"><br>

  Tipo Local
  <input type="textbox" name="TipoLocal" id="TipoLocal"><br>

  Territorio QS
  <input type="textbox" name="TerritorioQS" id="TerritorioQS"><br>

  Código Nacional
  <input type="textbox" name="CodigoNacional" id="CodigoNacional"><br>

  Código Ofical Autonómico
  <input type="textbox" name="CodigoOficialAutonomico" id="CodigoOficialAutonomico"><br>

  Siglas
  <input type="textbox" name="Siglas" id="Siglas"><br>

  Fecha Alta
  <input type="textbox" name="FechaAlta" id="FechaAlta"><br>

  Fecha Baja
  <input type="textbox" name="FechaBaja" id="FechaBaja"><br>

  Tipo Baja
  <input type="textbox" name="TipoBaja" id="TipoBaja"><br>

  Código Episodio
  <input type="textbox" name="CodigoEpisodio" id="CodigoEpisodio" ><br>  

  <br> 

  <input type="submit" name="accion" value="Grabar" /> 

</form>


</div>

</body>



</html>

consulta.php

$codigo = $_GET['cod']; // tu variable $_GET la guardo en otra recuerda que `cod` es el nombre que le pasas por la url

//Aquí pones tu conexión solo pondre variables como ejemplo

$con = mysqli_connect...

//Haces tu consulta por ejemplo traer todos los datos donde supongamos que tu campo es `codigo` entonces donde codigo = $codigo; así

$query = "SELECT * FROM [Tabla] WHERE codigo = '$codigo'";

// la ejecutas, yo lo hago por procedimientos, no lo hago orientado a objetos :/

$resultado = mysqli_query($con, $query);

// ahora lo recorres con un ciclo while

while($row = mysqli_fetch_array($resultado)){//lo puedes manejar como indice numérico o asociativo


}

//después lo conviertes en JSON el array así

$datos = array(['cOficial' => $row[0],
                    'cAutonomico' => $row[1],
                    'tipoLocal' => $row[2] //así hasta que agregues todas las claves
]);

//después le mandas un echo que sería la respuesta del servidor utilizando la funcion json_encode para convertirlo en un json

echo json_encode($datos);

DESPUÉS NOS PASAMOS AL AJAX lo voy a separar del código para que no te enredes

function ShowSelected()
{
/* Para obtener el valor */
var cod = document.getElementById("producto").value;
alert(cod);

if(cod == '0'){

alert('Elige una opción');
return false; //Si el usuario oprime la opcion de seleccione le manda un alert

}else{

if (window.XMLHttpRequest) { //Estructura del AJAX
clean = new XMLHttpRequest();//Estructura del AJAX
  }else{//Estructura del AJAX
clean = new ActiveXObject("Microsoft.XMLHTTP");//Estructura del AJAX
  }//Estructura del AJAX

  clean.onreadystatechange = function(){//Estructura del AJAX

  if (clean.readyState  == 4 && clean.status == 200) {  //Estructura del AJAX

var repsuesta = clean.responseText; //esta es la respuesta que obtienes de tu archivo php, que sería la respuesta del servidor, puedes hacer un echo de un JSON para que agrupes tus variables de la consulta y cuando lo recibas con este ajax lo parseas con JSON.parse() y solamente tendrías que turnar los valores a los input por ejemplo: document.getElementById('GrupoHospital').value = (el primer elemento de tu JSON o depende como lo vayas a crear)

//Aquí estamos de regreso utilizamos la variable respuesta que a su vez tiene la repsués del servidor que sería el json de php, para utilizar ese json en JS necesitas parsearlo con esta funcion JSON.parse

var jsonjs = JSON.parse(respuesta);

//ya esta parseado y para entrar a sus valores haces lo siguiente 

console.log(jsonjs[0].cOficial);

//ahora solo asignas los valores a los inputs con document.getElementById() por eso la importancia de ponerles id's cuando quieres hacer un ajax

document.getElementById('Centro_oficial').value = jsonjs[0].cOficial;

document.getElementById('CodigoOficialAutonomico').value = jsonjs[0].cAutomatico;

//Y así con todos, aunque puedes hacer un ciclo si así será estáticos tus input para que no tengas que estás haciendo uno por uno, pero eso ya te lo dejo de tarea.

}

}

clean.open('GET','consulta.php?cod='+cod,true);
//en tu archivo PHP recibirías tu variable cod con la variable global $_GET así; $_GET['cod']; y la utilizas para hacer tu consulta.
clean.send();


 
/* Para obtener el texto */
//var combo = document.getElementById("producto");
//var selected = combo.options[combo.selectedIndex].text;
//alert(selected);
}

También puedes hacer ajax con Jquery, pero yo lo hago con JavaScript puro, pero como más te acomodes ya es de cada quién, también puedes agregar id's a tus inputs text para que puedas agregarle el valor mediante su identificador único, así no tendrás problemas, cualquier duda hazla saber :)

Ya quedo Actualizada mi respuesta, ojalá puedas entender, me tome mi tiempo para buscar algunas cosillas que no había manejado, comente todo para que te sea más fácil digerirlo, cualquier duda no dudes en preguntar :)

8
  • Muchas gracias por la ayuda. Pero me podrías poner u ejemplo de como hago la consulta para que me muestre el valor en el imput dependiendo del valor del select selecciona. un saludo y gracias de antemano. Commented el 22 feb. 2019 a las 10:30
  • @BorjaMoreno Ya actualice mi respuesta, cualquier cosa que no te quede claro pregunta. :) Commented el 22 feb. 2019 a las 16:53
  • muchas gracias lo único el código de ajax en que archivo php lo pongo o lo pongo en una documento independiente. es que he probado el código y no me completa los demás datos automáticamente Commented el 25 feb. 2019 a las 9:14
  • Voy a actualizar el código de arriba con lo nuevo que me has indicado para que veas como esta ya que me sigue sin funcionar. ya esta actualizado el código de arriba. muchas gracias de nuevo. Commented el 25 feb. 2019 a las 12:31
  • @BorjaMoreno es recomendable poner el código JS en un archivo .js y lo haces llamar dentro de la etiqueta head de esta manera <script src="archivo.js"></script> eso si lo tuvieras en tu carpeta raíz de tu proyecto si lo tienes en una subcarpeta por ejemplo funcionesJS tendrías que poner esto: <script src="funcionesJS/archivo.js"></script>, y te tendría que funcionar, ya que el código que te pase lo probé en mi editor de texto y con arrays de prueba, puedes entrar a tu consola del navegador con f12, cualquier error de javaScript ahí te dirá que es. Commented el 25 feb. 2019 a las 16:15

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.