Llenar combobox con base de datos y llenar textbox al seleccionar un valor

Fecha Publicación:       27 de Diciembre de 2019
Fecha Modificación:       03 de Noviembre de 2023

XAJAX es una librería de código abierto PHP que permite crear de manera sencilla aplicaciones Web basadas en AJAX haciendo también uso de  HTML, CSS, y Javascript.

Descargar e instalar xajax

Manos a la obra descargamos la liberia  desde este enlace  XAJAX   lo guardamos en una carpeta de nuestro proyecto y lo configuramosd e la siguiente manera:

   

<?php	
   //incluímos la clase ajax 
  require ($_SERVER['DOCUMENT_ROOT']. '/xajax/xajax.inc.php');
  // Creamos una instancia de un objeto de la clase xajax
  $xajax = new xajax();
 // Le indica la codificación que debe utilizar
 // usar  'utf-8'  o 'ISO-8859-1'
  $xajax->setCharEncoding('ISO-8859-1');
 //Decodifica los caracteres extraños
  $xajax->decodeUTF8InputOn();	 

  //Registramos la función para indicar que se utilizará con xajax.  
  // la funcion lo podemos cambiar
  $xajax->registerFunction("procesar_chat");
  $xajax->processRequests();  
?>

Creamos las Funciones para conectarse a la Base de datos Mysql

Conexión a base de datos MySQL con Extensión MySQLi desde PHP

 

Creamos la función para mostrar el resultado segun lo seleccionado en combobox:

Mostramos el resultado de nuestra consulta a nuestra base de datos  segun lo seleccionado en nuestro combobox , en la function procesar_chat recibimos el valor del combobox.
 

function procesar_chat($valorselec)
  {
    $mostrarsec = new xajaxResponse('ISO-8859-1');
	$id_chat = $valorselec;
  // Inicio resultado segun lo seleccionado en nuestro combobox   
	$sql_estilo  = " SELECT * FROM chat_listado where id_chat='".$id_chat."'";	
	$sqlmsec = db_query($sql_estilo);		
	while ($row = db_fetch_array($sqlmsec)) 
	{	
	   $opsec = "<ul class='lista_chat'>
		<li>                           
             <label id='jform_published-lbl' for='jform_published' class='hasTip' title='' 
             aria-invalid='false'><strong>Script de chat</strong></label>	
             <br><br>                                   
             <textarea name='cscript_chat'  cols='50' rows='8' id='cscript_chat'  style='width:100%'>"
             .$row['cscript_chat'].
            "</textarea>		  			
        </li>
	
	   </ul>  ";				
	}	
  // Fin resultado segun lo seleccionado en nuestro combobox   
   // addAssign - Donde va a mostrar el resultado de nuestra 
   // consulta segun lo seleccionado en nuestro combobox en este caso
   // en el div con id='estilos'	
	$mostrarsec->addAssign("ctn_lista_chat","innerHTML","$opsec");
	return $mostrarsec;	
}


3) Indicamos al objeto xajax se encargue de generar el javascript necesario.
El método recibe un parámetro, que es la ruta relativa para acceder al directorio donde están los archivos xajax descomprimidos.

// Lo hemos descargado en la carpeta xajax. 
<?php $xajax->printJavascript("/xajax/");?>

Cargamos los valores del combobox con los datos de nuestra base de datos :

Podemos hacer llamadas a las funciones PHP en cualquier lugar del código, como respuesta a las acciones del usuario con javascript. desde el select se le envia su  valor a la funcion procesar_chat

<!--el combobox - envia en onChange su valor a la funcion-->
<select name="id_chat" id="id_chat" style="width:240px; font-size:14px;" 
onChange="xajax_procesar_chat(document.getElementById('id_chat').value)">					
<?php 
   $rs_mod = db_query("SELECT * FROM chat_listado");			
   while ($rowmod = db_fetch_array($rs_mod)) 
   {	
   if($rowmod['id_chat']==$row['id_chat']){						
	echo '<option value='.$rowmod['id_chat'].' 
       selected>'.$rowmod['cnombre_chat'].'</option>';
   }else{						
      echo '<option value='.$rowmod['id_chat'].'>'.
      $rowmod['cnombre_chat'].'</option>';
   }			
?>
<?php  }// Fin while  selec FROM chat_listad ?>			  
</select>

 

<!--Recuerda el div estilos tambien puede estar con contenido  y lo sobrescribira.-->
<div id="ctn_lista_chat"></div>

 

Problemas con la clase Xajax: 

Error: the XML responde that was returned from the server is invalid   

Articulo : 1878 - Veces Leidas
Compartir Articulo: