Que tal amigos del foro, antes que nada les agradezco su gran ayuda y tiempo. Tengo un problema, estoy desarrollando un sistema en Ajax y JQuery para que al hacer submit en un form no me recargue toda la página, ya he logrado hacer que funcione al crear un input:
Sin embargo cuando pongo un atributo onchange en un select multiple me carga la página y me redirige a la hoja de php:
Código HTML:
Ver original<select name="view[]" id="view" multiple="multiple" style="height:400px;width:400px;" onchange="this.form.submit();">
¿Espero me puedan ayudar?
Gracias
Saludos
index.php
Código HTML:
Ver original<form name="estados" id="estados" action="filtro_edo_login.php" method="POST" onsubmit="selectAllOptions('select_2');">
Elementos 109 de 109
<br /> <select name="view[]" id="view" multiple="multiple" style="height:400px;width:400px;" onchange="this.form.submit();">
<?php
$consult_edo="SELECT id_estado, estado_dsc FROM cat_estado";
$result_edo=mysql_query ($consult_edo,$conexion);
while ($fila=mysql_fetch_array($result_edo)){
echo '<option value="'.$fila["id_estado"].'"';
if($_POST["view"]==$fila["id_estado"]) echo " selected";
echo '>'.$fila["estado_dsc"].'
</option>';
}
?>
<div id="ajax_loader"><img id="loader_gif" src="loader.gif" style=" display:none;"/><div>
js
Código Javascript
:
Ver original<script>
function selectAllOptions(selStr)
{
var selObj = document.getElementById(selStr);
for (var i=0; i<selObj.options.length; i++) {
selObj.options[i].selected = true;
}
}
// esperamos que el DOM cargue
$(document).ready(function() {
// definimos las opciones del plugin AJAX FORM
var opciones= {
beforeSubmit: mostrarLoader, //funcion que se ejecuta antes de enviar el form
success: mostrarRespuesta, //funcion que se ejecuta una vez enviado el formulario
};
//asignamos el plugin ajaxForm al formulario y le pasamos las opciones
$('#estados').ajaxForm(opciones) ;
//lugar donde defino las funciones que utilizo dentro de "opciones"
function mostrarLoader(){
$("#loader_gif").fadeIn("slow");
};
function mostrarRespuesta (responseText){
//alert("Mensaje enviado: "+responseText);
$("#loader_gif").fadeOut("slow");
$("#ajax_loader").append(responseText);
//$("#ajax_loader").after(responseText).remove();
$("#ajax_loader").replaceWith(responseText);
};
});
</script>
filtro_edo_login.php
Código PHP:
<?php
include("conexion_mysql.php");
if(isset($_POST["view"])){
$edo=$_POST["view"];
$implode=implode("','",$edo);
$consult_tax="SELECT dat_matriz.id_matriz, cat_taxa.taxon FROM dat_matriz INNER JOIN cat_taxa ON cat_taxa.id_tax=dat_matriz.id_tax WHERE dat_matriz.id_estado IN('".$implode."') GROUP BY cat_taxa.taxon ORDER BY cat_taxa.taxon ASC";
$result_tax=mysql_query ($consult_tax,$conexion);
$num_tax=mysql_num_rows($result_tax);
?>
<div id="ajax_loader"><img id="loader_gif" src="loader.gif" style=" display:none;"/>
Elementos <?php echo $num_tax; ?> de 244<br />
<select name="view2[]" multiple="multiple" style="height:400px;width:400px;">
<?php
$consult_tax="SELECT dat_matriz.id_matriz, cat_taxa.taxon FROM dat_matriz INNER JOIN cat_taxa ON cat_taxa.id_tax=dat_matriz.id_tax WHERE dat_matriz.id_estado IN('".$implode."') GROUP BY cat_taxa.taxon ORDER BY cat_taxa.taxon ASC";
$result_tax=mysql_query ($consult_tax,$conexion);
while ($fila=mysql_fetch_row($result_tax)){
echo '<option value="'.$fila[0].'"';
if($_POST["view2"]==$fila[0]) echo " selected";
echo '>'.$fila[1].'</option>';
}
?>
</select></div>
<?php
}else{
echo "No ha seleccionado ningún elemento de la lista.";
}
?>