Doble select con autosubmit

diego007007 · #1 (**permalink**) 31/10/2011, 11:02

Hola amigos, estoy haciendo un sistema de filtrado de busqueda por parámetros con ayuda de varios select, la idea es dar click sobre alguna opción de un select y esta se muestre en la url, y automáticamente se ejecute el submit para enviar los parámetros de búsqueda. Mi codigo es el siguiente:

Código HTML:

<html>
<script>
window.onload=function() {
	document.getElementById('selectelement1').onchange=function() {
		document.getElementById('selectform1').submit(); 
	}
}
window.onload=function() {
	document.getElementById('selectelement2').onchange=function() {
		document.getElementById('selectform1').submit(); 
	}
}


</script>
<body>
<form name="selectform1" id="selectform1">
    <select name="selectelement1" id="selectelement1" size="3">
        <option value="1" >Option 1</option>
        <option value="2" >Option 2</option>
		<option value="3" >Option 3</option>
		<option value="4" >Option 4</option>
    </select>
	<br>
	<select name="selectelement2" id="selectelement2" size="3">
        <option value="1" >Option 1</option>
        <option value="2" >Option 2</option>
		<option value="3" >Option 3</option>
		<option value="4" >Option 4</option>
    </select>
</form>
</body>
</html>

El problema que tengo es que el autosubmit solo trabaja con el select 2, y no trabaja con el select 1. La idea es que deberían trabar de forma autónoma, osea si presiono el select 1, que muestre la búsqueda con este parámetro, y si uso el select 2 que muestre con es segundo parámetro. Ah... Y que los parámetros de búsqueda en la URL se acumulen para no perder la exactitud de la búsqueda :)

Salu2

Franz1628 · #2 (**permalink**) 31/10/2011, 11:09

hay puesto 2 window.onload

mejor juntalos en uno

Código Javascript:

Ver originalwindow.onload=function() {
    document.getElementById('selectelement1').onchange=function() {
        document.getElementById('selectform1').submit(); 
    }
    document.getElementById('selectelement2').onchange=function() {
        document.getElementById('selectform1').submit(); 
    }
}

Saludos

diego007007 · #3 (**permalink**) 31/10/2011, 11:58

Hola Franz1628, yo al inicio intente hacerlo de la forma que tu me dices, el problema en este caso es que la URL no guarda los parámetros, osea si marcas el select 1 con algún parámetro y después marcas el select 2 con otro parámetro, se pierde el parametro del select 1. Un ejemplo de lo que necesito se encuentra en esta direccion http://videojuegos.mercadolibre.com....-ps3-consolas/, en la parte superior hay hay parámetros como categoría, ubicación, etc los cuales solo se van agregando a la URL y nunca se pierden.

DANIELRIV · #4 (**permalink**) 31/10/2011, 13:56

BUENO si entendí bien quieres que hasta que estén seleccionado los dos select se valla la función

Cita:

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script>
window.onload=function() {
document.getElementById('selectelement1').onchange =function() {
document.getElementById('selectelement2').onchange =function() {
document.getElementById('selectform1').submit();
}
}
document.getElementById('selectelement2').onchange =function() {
document.getElementById('selectelement1').onchange =function() {
document.getElementById('selectform1').submit();
}
}
}

</script>
</head>
<body>
<form name="selectform1" id="selectform1">
<select name="selectelement1" id="selectelement1" size="3">
<option value="1" >Option 1</option>
<option value="2" >Option 2</option>
<option value="3" >Option 3</option>
<option value="4" >Option 4</option>
</select>
<br>
<select name="selectelement2" id="selectelement2" size="3">
<option value="1" >Option 1</option>
<option value="2" >Option 2</option>
<option value="3" >Option 3</option>
<option value="4" >Option 4</option>
</select>
</form>
</body>
</html>

diego007007 · #5 (**permalink**) 31/10/2011, 14:16

Hola DANIELRIV, No, no es necesario que los 2 objetos estén seleccionados. Mi idea es que cuando se seleccione el primer objeto, se recargue la pagina con este nuevo parámetro, osea te doy un ejemplo:
La direccion de donde partimos es http://localhost/index.php
en este punto damos click sobre cualquier select (por ejemplo el segundo) y nuestra URL queda de la siguiente manera:
http://localhost/index.php?selectelement2=2
después se me ocurre aumentar la búsqueda y doy click en el primer select
http://localhost/index.php?selectelement2=2&selectelement1=4

Así cuando use PHP para extraer los parámetros de búsqueda con post, me mostrar todas las opciones que deseo conocer
Algo mas o menos asi:

Cita:

a = document. location;
a += document.getElementById('selectelement1').value;
a += document.getElementById('selectelement2').value;
document.write(a);

esto debería mostrar la URL iniciar, mas los 2 parámetros (claro que esto no esta bien escrito).

diego007007 · #6 (**permalink**) 31/10/2011, 15:31

En el siguiente ejemplo, con ayuda de php, los 2 select deberían desaparecer, pero solo desaparece el uno, desaparecerían los dos si las variables a y b tendrían parámetros que pudiesen extraer de la url.

Código PHP:

 
<html>
<script type="text/javascript">
window.onload=function() {
    document.getElementById('selectelement1').onchange=function() {
        document.getElementById('selectelement1').options.value;
        document.getElementById('selectform1').submit(); 
    }
    document.getElementById('selectelement2').onchange=function() { 
        document.getElementById('selectelement2').options.value;
        document.getElementById('selectform1').submit();
    }
}

</script>
<body>
<?php
$a = @$_GET["selectelement1"];
$b = @$_GET["selectelement2"];
?>
<form name="selectform1" id="selectform1">
    <?php
    if ($a == ""){
    echo "<select name=\"selectelement1\" id=\"selectelement1\" size=\"3\">";
    echo "   <option value=\"1\" >Option 1</option>";
    echo "   <option value=\"2\" >Option 2</option>";
    echo "    <option value=\"3\" >Option 3</option>";
    echo "    <option value=\"4\" >Option 4</option>";
    echo "</select>";
    }
    echo "<br>";
    if ($b == ""){
    echo "<select name=\"selectelement2\" id=\"selectelement2\" size=\"4\">";
    echo "  <option value=\"1\" >Option 1</option>";
    echo "  <option value=\"2\" >Option 2</option>";
    echo "    <option value=\"3\" >Option 3</option>";
    echo "    <option value=\"4\" >Option 4</option>";
    echo "    <option value=\"5\" >Option 5</option>";
    echo "</select>";
    }
    ?>
</form>
</body>
</html>

DANIELRIV · #7 (**permalink**) 31/10/2011, 15:50

Ok que te parece esta solucion

Cita:

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script>

var pag = location.href.split('?')[1];
if(pag != undefined)
{
var Url = location.href;
Url = Url.replace(/.*\?(.*?)/,"$1");
Variables = Url.split ("&");
for (i = 0; i < Variables.length; i++)
{
Separ = Variables[i].split("=");
eval ('var '+Separ[0]+'="'+Separ[1]+'"');
}

}
window.onload=function() {

document.getElementById('selectelement1').onchange =function() {
if(pag == undefined)
{
document.getElementById('selectform1').submit();
}
else
{

location.href="mipagina.php?selectelement2="+ selectelement2+"&"+ "selectelement1=" + document.getElementById('selectelement1').value;
}
}
document.getElementById('selectelement2').onchange =function() {
if(pag == undefined)
{
document.getElementById('selectform1').submit();
}
else
{
location.href="mipagina.php?selectelement1="+ selectelement1 +"&"+ "selectelement2=" + document.getElementById('selectelement2').value;
}
}
}

</script>
</head>
<body>
<form name="selectform1" id="selectform1">
<select name="selectelement1" id="selectelement1" size="3">
<option value="1" >Option 1</option>
<option value="2" >Option 2</option>
<option value="3" >Option 3</option>
<option value="4" >Option 4</option>
</select>
<br>
<select name="selectelement2" id="selectelement2" size="3">
<option value="1" >Option 1</option>
<option value="2" >Option 2</option>
<option value="3" >Option 3</option>
<option value="4" >Option 4</option>
</select>
</form>
</body>
</html>

suerte

diego007007 · #8 (**permalink**) 31/10/2011, 16:08

Gracias DANIELRIV, esta muy buena esta solución. Solo tengo una pregunta como seria el codigo JS para 3 selets?