Hola de nuevo, Carlos hice lo que me comentaste y use AJAX, me decidi a empezar con eso para algunas cosas, pero ahora tengo una duda, use uno de los ejemplos que estan en la pagina de formatoweb.com.ar y me funciono correctamente.
Le agregue los datos de mi bases de datos y de verdad que me encanto su funcionamiento.
La duda que tengo ahora es como guardar esos datos en una tabla de mysql, me explico:
Los 2 combos dependientes se cargan dinamicamente, y al tener dichos datos escogidos quisiera enviarlos a una tablar para guardar, el formulario va a crecer por que sera una orden de compra de calzados, lo unico que usara AJAX seran los combos dependientes, me pregunto si eso se puede hacer? los demas campos en html y php a exepcion de los 2 combos. Les coloco aqui el codigo de los archivos que estoy usando.
select_dependientes.php Código PHP:
<?php
function generaPaises()
{
include 'conexion.php';
conectar();
$consulta=mysql_query("SELECT esc_codigo, esc_talaso FROM tallasportmax");
desconectar();
// Voy imprimiendo el primer select compuesto por los paises
echo"<table width='295' border='0'>";
echo"<tr>";
echo"<td>";
echo "<select name='marcas' id='marcas' onChange='cargaContenido(this.id)'>";
echo "<option value='0'>Elige</option>";
while($registro=mysql_fetch_row($consulta))
{
echo "<option value='".$registro[1]."'>".$registro[1]."</option>";
}
echo "</select>";
echo"</td>";
echo"</tr>";
echo"</table>";
}
?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="es">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>AJAX, Ejemplos: Combos (select) dependientes, codigo fuente - ejemplo</title>
<link rel="stylesheet" type="text/css" href="select_dependientes.css">
<script type="text/javascript" src="select_dependientes.js"></script>
</head>
<body>
<form action="insertar.php" method="post">
<table width="40" border="0">
<div id="demo" style="width:600px;">
<tr>
<td>
<div id="demoIzq"><?php generaPaises(); ?></div>
</td>
</tr>
<td>
<div id="demoDer">
<select disabled="disabled" name="escalas" id="escalas">
<option value="0">Selecciona opción...</option>
</select>
</div>
</td>
</div>
</table>
<input type="submit" value="Registrar" />
</form>
</body>
</html>
select_dependientes_proceso.php Código PHP:
<?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(
"marcas"=>"tallasportmax",
"escalas"=>"tallasportmax"
);
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];
include 'conexion.php';
conectar();
//$consulta=mysql_query("SELECT esc_codigo, esc_descri FROM dpescalas") or die(mysql_error());
$consulta=mysql_query("SELECT esc_codigo,esc_descri,esc_depart FROM $tabla WHERE esc_talaso='$opcionSeleccionada'
ORDER BY esc_depart") or die(mysql_error());
desconectar();
// Comienzo a imprimir el select
echo "<select name='".$selectDestino."' id='".$selectDestino."' onChange='cargaContenido(this.id)'>";
echo "<option value='0'>Elige</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>";
//}
?>
insertar.php Código PHP:
<?php
include("conexion.php");
$marcas=$_POST['marcas'];
$escalas=$_POST['escalas'];
$resp = mysql_query ("INSERT INTO prueba VALUES ('$marcas','$escalas')");
?>
select_dependientes.js
Código Javascript
:
Ver originalfunction 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]="marcas";
listadoSelects[1]="escalas";
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", "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);
}
}
Espero haberme explicado y espero puedan ayudarme, no soy muy bueno usando AJAX