listas desplegables Php myql Ajax

Djoaq · #1 (**permalink**) 16/08/2013, 16:26

Hola a todos!! Hace unos días que me estoy friendo la cabeza con este tema y además que no entiendo muy bien!

Soy nuevo en esto de Ajax y me gustaría aprender!! Agradezco de antemano el tiempo que me dediquéis y pido disculpas por adelantado si lo que estoy haciendo es una animalada!!

Os comento !

Tengo 3 elementos en una pagina :

1 Buscador en Ajax ( que funciona bien! ) y 3 listas desplegables! ( el código esta un poco desordenado ! porque estoy haciendo pruebas

)!

El problema esta en que la primera lista desplegable la cargo de la BD mysql con una select y listo!

Código HTML:

<!DOCTYPE html>
<html>
<link href="miestilo.css" media="screen" rel="StyleSheet" type="text/css">
<head><title>Buscador</title>
<script type="text/javascript" src="ajax.js"></script>
</head>

<body>
<br></br>
<form action="" method="post" enctype="application/x-www-form-urlencoded" name="form1" id="form1">
<div id="dep" style="float:left">
<select name="cargacero" id="cargacero" onchange="loadXMLDoc1()" required />
  <option>Seleccione Categoria</option>
  <?php
  include('conexion.php');
  $re=mysql_query("SELECT grupo  FROM Productos WHERE grupo !='' GROUP BY grupo  ");
  while($f=mysql_fetch_array($re)){
  echo'<option value="'.$f['grupo'].'">'.$f['grupo'].'</option>';
  }
  
  ?>

</form>
</div>

entonces lo que intento hacer en Ajax es que al cambiar la selección en la primera lista con el id cargacero llamo a la función onchange="loadXMLDoc1() que a su llama a un archivo php y... me pinta el segundo desplegable .. hasta aquí bien!

Código PHP:

  echo'<div id="primeracarga" style="float:left">

<select name="primeracarga" id="primeracarga" onchange="loadXMLDoc2()" required />

 <option>Sin seleccion marca producto--</option>';

 
}

while($fila1=mysql_fetch_assoc($res3)){

 
echo '<option value="'.$fila1['familia'].'">'.$fila1['familia'].'</option>';

 

}

echo'</select>

</div>';

El problema lo tengo en que cuando selecciono algún elemento de la 2ª lista que se me ha pintado ... no me genera el siguiente desplegable ... y al hacer un echo en la variable POST que manda el evento onchange="loadXMLDoc2() esta aparece como undefined .. ¿?

Código:

function loadXMLDoc1() /*es correcto*/
{
var xmlhttp;

var n=document.getElementById("cargacero").value;

if(n==''){
document.getElementById("resultado").innerHTML="";
return;
}

if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("resultado").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("POST","proceso1.php",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("s="+n);
}

function loadXMLDoc2() /*es correcto*/
{
var xmlhttp;

var n=document.getElementById("primeracarga").value;

if(n==''){
document.getElementById("resultado1").innerHTML="";
return;
}

if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("resultado1").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("POST","proceso2.php",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("s="+n);
}

He intentado no pegar todo el código si necesitáis algo mas me comentáis!

Lo que no entiendo es porque de la primera ( que viene directa de la BD ) a la segunda no hay problema , pero de la segunda ( que se genera en php ) a la tercera es como que no envía el por post !? es porque intento pasarle al Ajax unos valores cargados en PHP ?

Un saludo y Gracias!