Esto ya lo he conseguido ya que he seguido este ejemplo. Por si a alguien le fuera bien este tema dejo el enlace.
http://www.formatoweb.com.ar/ajax/se...pendientes.php
Bueno, aqui mi pregunta. No se si es relacionada al javascript o al php, asi que si creeis que debe cambiarse el post de lugar sin ningun problema.
La cuestion es que cuando selecciono el primer select, el siguiente se me cambia correctamente pero me 'limpia' el resto del formulario. Las páginas las tengo posicionadas de la manera index.php?page=pagina.php, así que supongo que puede ser algun problema de rutas en estas conexiones entre archivos.
Os dejo aqui los códigos. Gracias de antemano!
index.admin.php?page=add_content.php
Código:
select_dependientes_proceso.php<?php
function generateCategory()
{
$consulta=mysql_query("SELECT id, name FROM section");
mysql_close();
// Voy imprimiendo el primer select compuesto por los paises
echo "<select name='section' id='section' onChange='cargaContenido(this.id)'>";
echo "<option value='0'>-- Elige una sección --</option>";
while($registro=mysql_fetch_row($consulta))
{
echo "<option value='".$registro[0]."'>".$registro[1]."</option>";
}
echo "</select>";
}
?>
<div id="title">
<img src="styles/images/news.icon.jpg" />
<h2>Añadir un nuevo contenido</h2>
</div>
<div id="description_menu">
<div id="description_menu-inner">
<p>"Este módulo te permitirá crear contenido de forma rápida y sencilla. Podrás relacionar los
contenidos mediante las secciones y las categorias a las cuales pertenecen. Puedes incluir tanto
textos como imágenes."</p>
</div>
</div>
<div id="navform">
<?php
if($_POST['submit'])
{
$title = $_POST['title'];
$body = $_POST['body'];
$section = $_POST['section'];
$category = $_POST['category'];
$author = $_POST['author'];
$date = date("j-n-Y, g:i a");
if (isset($_POST['publish'])) {
$publish = 1;
}
else{
$publish = 0;
}
if (isset($_POST['review'])) {
$review = 1;
}
else{
$review = 0;
}
if ($title && $body && $section && $category && $author) {
echo "<p style='padding-left:20px;'>El formulario se ha enviado con éxito</p><br>";
echo "Tus escritos son: <br>
$title<br>$body<br>$section<br>$category<br>$author<br>$date<br>$publish<br>$review ";
}
else {
echo "<p>No has rellenado todos los campos obligatorios</p>";
}
}
else
{
?>
<script type="text/javascript" src="pages/select_dependientes.js"></script>
<h1>Añade un nuevo contenido</h1>
<div id="add-form">
<p>Introduce los datos en el formulario siguiente:</p>
<form action="index.admin.php?page=add_content" method="post" name="form">
<label>Titulo:</label><br><input name="title" type="text" /><br>
<label>Cuerpo:</label><br><textarea name="body"></textarea><br>
<label>Escoge la sección y la categoria al que pertenece el contenido:</label><br>
<?php generateCategory(); ?>
<select disabled="disabled" name="category" id="category">
<option selected value='0'>-- Escoge una categoria --</option>
</select><br>
<label>Escrito por:</label><br><input name="author" type="text" value="usuario registrado" /><br>
<label>Estado de publicación:</label><br>
<input type="checkbox" name="publish" /> Publicar<br>
<input type="checkbox" name="review" /> Marcar para revisión<br>
<div style="clear:both"></div>
<input name="submit" value="Añadir contenido" type="submit">
</form>
</div>
<?php
}
?>
<div id="space"></div>
</div>
Código:
select_dependientes.js<?php
// Array que vincula los IDs de los selects declarados en el HTML con el nombre de la tabla donde se encuentra su contenido
$listadoSelects=array(
"section"=>"section",
"category"=>"category"
);
function validaSelect($selectDestino)
{
// Se valida que el select enviado via GET exista
global $listadoSelects;
if(isset($listadoSelects[$selectDestino])) return true;
else return false;
}
function validaOpcion($opcionSeleccionada)
{
// Se valida que la opcion seleccionada por el usuario en el select tenga un valor numerico
if(is_numeric($opcionSeleccionada)) return true;
else return false;
}
$selectDestino=$_GET["select"]; $opcionSeleccionada=$_GET["opcion"];
if(validaSelect($selectDestino) && validaOpcion($opcionSeleccionada))
{
$tabla=$listadoSelects[$selectDestino];
conectar_db();
$consulta=mysql_query("SELECT id, name FROM $tabla WHERE id_section='$opcionSeleccionada'") or die(mysql_error());
mysql_close();
// Comienzo a imprimir el select
echo "<select name='".$selectDestino."' id='".$selectDestino."' onChange='cargaContenido(this.id)'>";
echo "<option value='0'>-- Elige una opción --</option>";
while($registro=mysql_fetch_row($consulta))
{
// Convierto los caracteres conflictivos a sus entidades HTML correspondientes para su correcta visualizacion
$registro[1]=htmlentities($registro[1]);
// Imprimo las opciones del select
echo "<option value='".$registro[0]."'>".$registro[1]."</option>";
}
echo "</select>";
}
?>
Código:
function nuevoAjax()
{
/* Crea el objeto AJAX. Esta funcion es generica para cualquier utilidad de este tipo, por
lo que se puede copiar tal como esta aqui */
var xmlhttp=false;
try
{
// Creacion del objeto AJAX para navegadores no IE
xmlhttp=new ActiveXObject("Msxml2.XMLHTTP");
}
catch(e)
{
try
{
// Creacion del objet AJAX para IE
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
catch(E)
{
if (!xmlhttp && typeof XMLHttpRequest!='undefined') xmlhttp=new XMLHttpRequest();
}
}
return xmlhttp;
}
// Declaro los selects que componen el documento HTML. Su atributo ID debe figurar aqui.
var listadoSelects=new Array();
listadoSelects[0]="section";
listadoSelects[1]="category";
function buscarEnArray(array, dato)
{
// Retorna el indice de la posicion donde se encuentra el elemento en el array o null si no se encuentra
var x=0;
while(array[x])
{
if(array[x]==dato) return x;
x++;
}
return null;
}
function cargaContenido(idSelectOrigen)
{
// Obtengo la posicion que ocupa el select que debe ser cargado en el array declarado mas arriba
var posicionSelectDestino=buscarEnArray(listadoSelects, idSelectOrigen)+1;
// Obtengo el select que el usuario modifico
var selectOrigen=document.getElementById(idSelectOrigen);
// Obtengo la opcion que el usuario selecciono
var opcionSeleccionada=selectOrigen.options[selectOrigen.selectedIndex].value;
// Si el usuario eligio la opcion "Elige", no voy al servidor y pongo los selects siguientes en estado "Selecciona opcion..."
if(opcionSeleccionada==0)
{
var x=posicionSelectDestino, selectActual=null;
// Busco todos los selects siguientes al que inicio el evento onChange y les cambio el estado y deshabilito
while(listadoSelects[x])
{
selectActual=document.getElementById(listadoSelects[x]);
selectActual.length=0;
var nuevaOpcion=document.createElement("option"); nuevaOpcion.value=0; nuevaOpcion.innerHTML="Selecciona Opción...";
selectActual.appendChild(nuevaOpcion); selectActual.disabled=true;
x++;
}
}
// Compruebo que el select modificado no sea el ultimo de la cadena
else if(idSelectOrigen!=listadoSelects[listadoSelects.length-1])
{
// Obtengo el elemento del select que debo cargar
var idSelectDestino=listadoSelects[posicionSelectDestino];
var selectDestino=document.getElementById(idSelectDestino);
// Creo el nuevo objeto AJAX y envio al servidor el ID del select a cargar y la opcion seleccionada del select origen
var ajax=nuevoAjax();
ajax.open("GET", "pages/select_dependientes_proceso.php?select="+idSelectDestino+"&opcion="+opcionSeleccionada, true);
ajax.onreadystatechange=function()
{
if (ajax.readyState==1)
{
// Mientras carga elimino la opcion "Selecciona Opcion..." y pongo una que dice "Cargando..."
selectDestino.length=0;
var nuevaOpcion=document.createElement("option"); nuevaOpcion.value=0; nuevaOpcion.innerHTML="Cargando...";
selectDestino.appendChild(nuevaOpcion); selectDestino.disabled=true;
}
if (ajax.readyState==4)
{
selectDestino.parentNode.innerHTML=ajax.responseText;
}
}
ajax.send(null);
}
}
