Botón submit para selects anidados

byrong · #1 (**permalink**) 14/01/2016, 23:43

He creado unos selects anidados con javascript y mysql y quiero que al momento de por ejemplo seleccionar Estado: Distrito Capital - Municipio: Chacao - Localidad: Chacao, darle click a un boton submit y que me lleve que si a localhost/estado/distritocapital/chacao/chacao.php y así sea con cualquiera de cada uno de los estados y municipios.

rodocoyote15 · #2 (**permalink**) 14/01/2016, 23:59

Por favor, no dupliques temas :D
Saludos.

byrong · #3 (**permalink**) 15/01/2016, 00:10

Cita:

Iniciado por rodocoyote15

Por favor, no dupliques temas :D
Saludos.

Hola, la verdad no encuentro como borrar el tema, pero no se si era preferible seguir escribiendo preguntas en el otro o crear uno nuevo..

Pues ya con lo que me ayudaste ya pude hacer todo, pero ahora no encuentro al momento de dar click al botón submit me redirija como ya lo explique...

carlillos · #4 (**permalink**) 15/01/2016, 13:15

Podrías establecer los datos para formar la url en un atributo "data" para cada opción dentro del select, de ahí recogerlo con javascript para formar la url y luego reemplazar en el formulario el atributo "action".

__SDP__ · #5 (**permalink**) 15/01/2016, 13:33

<option value="5000" rel="chacao">chacao</option>

saca el valor del atributo rel o data como dice el compañero arriba con javascript.

bye.

byrong · #6 (**permalink**) 15/01/2016, 13:52

Cita:

Iniciado por __SDP__

<option value="5000" rel="chacao">chacao</option>

saca el valor del atributo rel o data como dice el compañero arriba con javascript.

bye.

Gracias por responder, pero los datos, los estados y municipios vienen desde mysql así que como haría? se que en tucarro.com hacen algo y estuve revisando y es con javascript pero la verdad no hallo la forma de hacerlo...

Gracias.

__SDP__ · #7 (**permalink**) 15/01/2016, 13:55

desde el otro tema que creaste que leei que pones que vienen de mysql,

¿tu pregunta es como saco los datos de mysql y hago eso?

byrong · #8 (**permalink**) 15/01/2016, 14:07

Cita:

Iniciado por __SDP__

desde el otro tema que creaste que leei que pones que vienen de mysql,

¿tu pregunta es como saco los datos de mysql y hago eso?

Te adjunto imagen:

Lo que quiero es por ejemplo al darle al botón enviar y tramitar me dirija a lo que seleccione, por ejemplo mipagina.com/estados/trujillo/valera/lapuerta.php e igualmente si selecciono o no la localidad me dirija a mipagina.com/estados/trujillo/valera.php

Todos los datos que ves ahí los traigo desde el mysql, lo que quiero es que al seleccionar el botón me redirija como te explique

__SDP__ · #9 (**permalink**) 15/01/2016, 14:37

Código HTML:

Ver original<html>
<head>
<script>
 
function send_url(){
        var estado = document.getElementById('id-estados')[0].getAttribute("rel");
      
      alert(estado);
      
}
 
</script>
</head>
 
<body>
 
<form action="" method="post" onsubmit="send_url(); return false;">
 
 
    <select id="id-estados">
        <option value="5000" rel="santiago">santiago</option>
        <option value="5001" rel="concepcion">concepción</option>
    </select>
    <input type="submit" value="enviar">
</form>
 
 
</body>
</html>

__SDP__ · #10 (**permalink**) 15/01/2016, 14:47

sorry, ahora si este codigo funciona

Código HTML:

Ver original<html>
<head>
<script>
 
function send_url(){
        var opcion = document.getElementById('id-estados');
        var estado = opcion[opcion.selectedIndex].getAttribute("rel");
      
      alert(estado);  
 
      
}
 
</script>
</head>
 
<body>
 
<form action="" method="post" onsubmit="send_url(); return false;">
 
 
    <select id="id-estados">
        <option value="5000" rel="santiago">santiago</option>
        <option value="5001" rel="concepcion">concepción</option>
    </select>
    <input type="submit" value="enviar">
</form>
 
 
</body>

rodocoyote15 · #11 (**permalink**) 15/01/2016, 22:31

No sé cómo no has encontrado info en google

Solo busca cómo imprimir datos de mysql en pagina php y listo, en el rel, data o id colocas el valor recibido por mysql. Y lo mandas por javascript, del otro lado recibes y generas la url con los datos obtenidos.

byrong · #12 (**permalink**) 16/01/2016, 23:19

Cita:

Iniciado por rodocoyote15

No sé cómo no has encontrado info en google

Solo busca cómo imprimir datos de mysql en pagina php y listo, en el rel, data o id colocas el valor recibido por mysql. Y lo mandas por javascript, del otro lado recibes y generas la url con los datos obtenidos.

No encuentro manera de hacerlo como ya explique.
Intente de otro modo y el submit me da en la url es esto "localhost/?estado=20&municipio=&localidad="
Necesito que me redirija a localhost/estado/20 por ejemplo... la verdad ya no encuentro manera ya que hice como dijiste con lo de imprimir datos y no hallo la forma de hacerlo.

rodocoyote15 · #13 (**permalink**) 17/01/2016, 10:17

Si estás enviandolo por GET obviamente la url te aparecerá así como te aparece. Suponiendo que te llega "?estado=20" en ese mismo archivo pones:
header("Location:" /estado/$_GET['estado']/$_GET['municipio'/); Por ejemplo.

Si lo haces por POST, solo cambiarías la sintaxis por POST

Alexis88 · #14 (**permalink**) 17/01/2016, 22:11

Si los <select> cargarán la información de manera dinámica, es decir, elegirás una opción del primer <select> y luego tendrán que cargar opciones relacionadas a dicha opción pero en el segundo <select> y la misma situación será con el segundo y tercer <select>, puedes hacer lo que explicaré a continuación.

1. Dentro del formulario, añade tres secciones:

Código HTML:

Ver original<form id="ejemplo">
    <section></section>
    <section></section>
    <section></section>
</form>

2. Crea una función que realizará las respectivas peticiones asíncronas (AJAX) para obtener los datos de la base de datos con los cuales armarás los <select>:

Código Javascript:

Ver originalvar ajax = function(opciones){
    var xhr = new XMLHttpRequest(),
        url = "tuArchivo.php?nivel=" + opciones.nivel;
 
    if (opciones.valor){
        url += "&valor=" + opciones.valor;
    }
 
    xhr.open("GET", url, true);
    xhr.send();
    xhr.addEventListener("load", function(){
        if (this.status == 200){
            opciones.seccion.innerHTML = this.responseText;
        }
    }, false);
};

3. Crea el script en el archivo PHP que procesará esta petición, realizará la búsqueda en la base de datos y creará el respectivo <select>:

Código PHP:

Ver original<?php
$conexion = new mysqli('servidor', 'usuario', 'clave', 'base de datos');
if ($conexion->connect_errno) exit($conexion->connect_errno . ': ' . $conexion->connect_error);
 
$nivel = $conexion->real_escape_string(strip_tags(trim($_GET['nivel'])));
$valor = isset($_GET['valor']) ? $conexion->real_escape_string(strip_tags(trim($_GET['valor']))) : '';
 
$campoCodigo = 'tabla' . $nivel . '_codigo';
$campoNombre = 'tabla' . $nivel . '_nombre';
$campoClave = 'tabla' . $nivel . '_campoClave';
$tabla = 'tabla' . $nivel;
 
$consulta = "SELECT $campoCodigo, $campoNombre FROM $tabla";
if (strlen($valor)){
    $consulta .= " WHERE $campoClave = '$valor'";
}
 
$resultados = $conexion->query($consulta) or exit($conexion->error);
 
if ($resultados->num_rows){
?>
    <select class="combo">
<?php
    while($registros = $resultados->fetch_assoc()){
?>
        <option value="<?=$registro[$campoCodigo]?>"><?=$registro[$campoNombre]?></option>
<?php
    }
    $resultados->free();
?>
    </select>
<?php
}
 
$conexion->close();

4. Para que el primer <select> aparezca luego de haber cargado la página, necesitas hacer la llamada a la función ajax() pasándole los respectivos valores. Esto se ejecutará luego de ocurrido el evento DOMContentLoaded el cual se dispara cuando han terminado de cargar los elementos del documento:

Código Javascript:

Ver originaldocument.addEventListener("DOMContentLoaded", function(){
    ajax({
        nivel: 1,
        seccion: document.querySelector("#ejemplo section") //Por defecto, toma a la primera
    });
}, false);

5. Para realizar las llamadas por cada vez que se elija un valor en cualquiera de los <select> y ya que estos cargarán de manera dinámica, debes asociar el evento change al documento, de tal forma que al ocurrir, tomas al elemento en el cual se produjo el evento y podrás enviar los datos que le correspondan:

Código Javascript:

Ver originaldocument.addEventListener("change", function(event){
    if (event.target.className == "combo"){
        ajax({
            nivel: [].indexOf.call(document.querySelectorAll(".combo"), event.target) + 1,
            seccion: event.target.parentNode,
            valor: event.target.value
        });
    }
}, false);

6. Cuando ya tengas a los tres <select> y hayas seleccionado las respectivas opciones, puedes proceder a realizar el redireccionamiento, para lo cual tendrás que cancelar el evento submit el cual ocurre cuando se inicia el envío de los datos del formulario. Para esto, deberás utilizar el método .preventDefault():

Código Javascript:

Ver originaldocument.querySelector("#ejemplo").addEventListener("submit", function(event){
    event.preventDefault(); //Cancelamos el envío
 
    var combos = document.querySelectorAll(".combo"),
        direccion = "http://www.ejemplo.com/" + combos[0].value + "/" + combos[1].value + "/" + combos[2].value;
 
    location = direccion;
}, false);

Todo el código JavaScript debe quedar junto y en el orden descrito, es decir:

Código Javascript:

Ver originaldocument.addEventListener("DOMContentLoaded", function(){
    //Punto 2
    //Punto 4 (solo la llamada a la función)
    //Punto 5
    //Punto 6
}, false);

En resumen, tenemos tres secciones dentro del formulario en las que cargarán los tres <select>. Al terminar de cargar la página, se llamará a la función ajax() a la cual se le pasarán los valores del nivel (número de <select>) y la sección en la cual aparecerá. Dichos datos se pasan a la función a través de un objeto literal. En la función, se crea una instancia del objeto XMLHttpRequest para realizar la petición asíncrona (AJAX), se reciben los valores y si se ha recibido el valor a tratar en la condición de la consulta a la base de datos, se lo adhiere a cadena de consulta y la ruta del archivo PHP. Se realiza el envío y cuando se reciba la respuesta, se la mostrará en la sección que se haya designado.

En el archivo PHP, se realiza la conexión a la base de datos, se verifica si no se realizó para terminar la ejecución del script y se reciben y limpian los datos recibidos. Así como en la función ajax(), se verifica si se recibió el valor para la condición de la consulta SQL. Enseguida, se procede a elaborar la consulta, se la ejecuta y si se obtienen resultados, se procede a crear al respectivo <select>, el cual tendrá por clase el valor "combo" y se le asignarán las opciones según los registros obtenidos de la consulta a la base de datos. Finalmente, dicho <select> será la respuesta que recibirá la función ajax() y que mostrará en la sección respectiva.

Para este ejemplo, he supuesto que los nombres de las tablas de la base de datos tienen la forma "tabla", seguido del número de tabla según corresponde a cada <select>, esto con el fin de reutilizar el mismo script para realizar distintas consultas a la base de datos, por lo que si los nombres de tus tablas no tienen una forma similar, te sugiero hacerlo de un modo parecido o quizá de otra forma que creas conveniente pero que se adapte al algoritmo propuesto. También puedes tener distintos archivos PHP para elaborar cada <select>, pero sería algo poco eficiente y elegante. Si deseas, puedes utilizar una clase para el tratamiento de los datos en el lado del servidor; por ejemplo, una clase con un método para realizar la conexión, otro para limpiar a los datos recibidos, otra para armar la consulta SQL, otra para ejecutarla, y así.

La delegación del evento change al documento se debe a que no puedes registrar un evento a un elemento que ha cargado después de que haya cargado el documento, como ocurre en los casos de los <select> y otros elementos cargados dinámicamente, por lo que utilizar una clase en común, puede ser de mucha ayuda, como en este caso.

Para obtener al elemento en el que ocurrió el evento, debes acceder a él mediante la propiedad target del objeto del evento. Para obtener a la sección que contiene al <select> en el cual se ha cambiado el valor, debes acceder a ella mediante la propiedad parentNode. Para obtener al nivel, es decir, el número de <select> en el cual ha ocurrido el cambio de valor, debes utilizar una instancia del método .indexOf(), el cual devuelve la posición del elemento en cuestión dentro de —en este caso— la lista de nodos cuya clase es "combo", empezando desde la posición cero, razón por la cual le sumo 1. La lista de nodos es devuelta por el método .querySelectorAll().

Como se trata de un ejemplo, tienes que adaptarlo a lo que necesitas. Si tienes alguna duda, coméntala por aquí.

TIP DE AYUDA: Si quieres utilizar otro valor para los <select> que no sea el valor que estos toman de la opción seleccionada, puedes utilizar atributos personalizados.

Un saludo

byrong · #15 (**permalink**) 18/01/2016, 12:33

Cita:

Iniciado por Alexis88

Si los <select> cargarán la información de manera dinámica, es decir, elegirás una opción del primer <select> y luego tendrán que cargar opciones relacionadas a dicha opción pero en el segundo <select> y la misma situación será con el segundo y tercer <select>, puedes hacer lo que explicaré a continuación.
Un saludo

Primero que nada gracias.
Amigo los selects me funcionan de manera perfecta como mostré en la imagen que comente en este post, use este código javascript(esto se encuentra dentro del index.php entre [inline]<script></script>

Código Javascript:

Ver original$("#estado").on("change", buscarMunicipios);
$("#municipio").on("change", buscarLocalidades);
 
function buscarMunicipios(){
    $("#localidad").html("<option value=''>Seleccione una Localidad</option>");
    
    $estado = $("#estado").val();
    
    if($estado == ""){
            $("#municipio").html("<option value=''>Seleccione un Estado</option>");
    }
    else {
        $.ajax({
            dataType: "json",
            data: {"estado": $estado},
            url:   'include/buscar.php',
            type:  'post',
            beforeSend: function(){
                //Lo que se hace antes de enviar el formulario
                },
            success: function(respuesta){
                //lo que se si el destino devuelve algo
                $("#municipio").html(respuesta.html);
            },
            error:  function(xhr,err){ 
                alert("readyState: "+xhr.readyState+"\nstatus: "+xhr.status+"\n \n responseText: "+xhr.responseText);
            }
        });
    }
}
 
function buscarLocalidades(){
    $municipio = $("#municipio").val();
    
    $.ajax({
        dataType: "json",
        data: {"municipio": $municipio},
        url:   'include/buscar.php',
        type:  'post',
        beforeSend: function(){
            //Lo que se hace antes de enviar el formulario
            },
        success: function(respuesta){
            //lo que se si el destino devuelve algo
            $("#localidad").html(respuesta.html);
        },
        error:  function(xhr,err){ 
            alert("readyState: "+xhr.readyState+"\nstatus: "+xhr.status+"\n \n responseText: "+xhr.responseText);
        }
    }); 
}

en otro archivo llamado buscar.php tengo esto:

Código PHP:

  <?php 
require_once("funciones.php"); 
 
if(isset($_POST['estado'])){ 
     
    $municipios = dameMunicipio($_POST['estado']); 
     
    $html = "<option value=''>Seleccione un Municipio</option>"; 
    foreach($municipios as $indice => $registro){ 
        $html .= "<option value='".$registro['idmunicipio']."'>".$registro['nombremunicipio']."</option>"; 
    } 
     
    $respuesta = array("html"=>$html); 
    echo json_encode($respuesta); 
} 
 
if(isset($_POST['municipio'])){ 
     
    $localidades= dameLocalidad($_POST['municipio']); 
     
    $html = "<option value=''>Seleccione una Localidad</option>"; 
    foreach($localidades as $indice => $registro){ 
        $html .= "<option value='".$registro['idlocalidad']."'>".$registro['nombrelocalidad']."</option>"; 
    } 
     
    $respuesta = array("html"=>$html); 
    echo json_encode($respuesta); 
} 
 
    if(isset($_POST['categoria'])){ 
        $categorias = dameCategoria($_POST['categoria']); 
 
        $html = "<option value=''>Seleccione su busqueda</option>"; 
        foreach ($categorias as $indice => $registro) { 
            $html .= "<option value='".$registro['idcategoria']."'>".$registro['nombrecategoria']."</option>"; 
        } 
         
        $respuesta = array("html"=>$html); 
    echo json_encode($respuesta); 
 
    } 
?>

y en otro llamado funciones.php tengo esto:

Código PHP:

  <?php 
 
 
/* Archivo para funciones */ 
 
function conectaBaseDatos(){ 
    try{ 
        $servidor = "xxx"; 
        $puerto = "xxx"; 
        $basedatos = "xxx"; 
        $usuario = "xxx"; 
        $contrasena = "xxx"; 
     
        $conexion = new PDO("mysql:host=$servidor;port=$puerto;dbname=$basedatos", 
                            $usuario, 
                            $contrasena, 
                            array(PDO::MYSQL_ATTR_INIT_COMMAND => "SET NAMES utf8")); 
         
        $conexion->setAttribute(PDO::ATTR_DEFAULT_FETCH_MODE, PDO::FETCH_ASSOC); 
        return $conexion; 
    } 
    catch (PDOException $e){ 
        die ("No se puede conectar a la base de datos". $e->getMessage()); 
    } 
} 
 
function dameEstado(){ 
    $resultado = false; 
    $consulta = "SELECT * FROM estados"; 
     
    $conexion = conectaBaseDatos(); 
    $sentencia = $conexion->prepare($consulta); 
     
    try { 
        if(!$sentencia->execute()){ 
            print_r($sentencia->errorInfo()); 
        } 
        $resultado = $sentencia->fetchAll(); 
        //$resultado = $sentencia->fetchAll(PDO::FETCH_ASSOC); 
        $sentencia->closeCursor(); 
    } 
    catch(PDOException $e){ 
        echo "Error al ejecutar la sentencia: \n"; 
            print_r($e->getMessage()); 
    } 
     
    return $resultado; 
} 
 
function dameMunicipio($estado = ''){ 
    $resultado = false; 
    $consulta = "SELECT * FROM municipios"; 
     
    if($estado != ''){ 
        $consulta .= " WHERE idestado = :nombreestado"; 
    } 
     
    $conexion = conectaBaseDatos(); 
    $sentencia = $conexion->prepare($consulta); 
    $sentencia->bindParam('nombreestado',$estado); 
     
    try { 
        if(!$sentencia->execute()){ 
            print_r($sentencia->errorInfo()); 
        } 
        $resultado = $sentencia->fetchAll(); 
        //$resultado = $sentencia->fetchAll(PDO::FETCH_ASSOC); 
        $sentencia->closeCursor(); 
    } 
    catch(PDOException $e){ 
        echo "Error al ejecutar la sentencia: \n"; 
            print_r($e->getMessage()); 
    } 
     
    return $resultado; 
} 
 
function dameLocalidad($municipio = ''){ 
    $resultado = false; 
    $consulta = "SELECT * FROM localidades"; 
     
    if($municipio != ''){ 
        $consulta .= " WHERE idmunicipio = :nombremunicipio"; 
    } 
     
    $conexion = conectaBaseDatos(); 
    $sentencia = $conexion->prepare($consulta); 
    $sentencia->bindParam('nombremunicipio',$municipio); 
     
    try { 
        if(!$sentencia->execute()){ 
            print_r($sentencia->errorInfo()); 
        } 
        $resultado = $sentencia->fetchAll(); 
        //$resultado = $sentencia->fetchAll(PDO::FETCH_ASSOC); 
        $sentencia->closeCursor(); 
    } 
    catch(PDOException $e){ 
        echo "Error al ejecutar la sentencia: \n"; 
            print_r($e->getMessage()); 
    } 
     
    return $resultado; 
} 
    function dameCategoria(){ 
        $resultado = false; 
        $consulta = "SELECT * FROM categorias"; 
 
        $conexion = conectaBaseDatos(); 
        $sentencia = $conexion->prepare($consulta); 
        try { 
        if(!$sentencia->execute()){ 
            print_r($sentencia->errorInfo()); 
        } 
        $resultado = $sentencia->fetchAll(); 
        //$resultado = $sentencia->fetchAll(PDO::FETCH_ASSOC); 
        $sentencia->closeCursor(); 
    } 
    catch(PDOException $e){ 
        echo "Error al ejecutar la sentencia: \n"; 
            print_r($e->getMessage()); 
    } 
     
    return $resultado; 
} 
 
 
?>

Bueno la verdad esto me funciona perfectamente para lo que ya hable de los selects que al momento de seleccionar un estado cambia de inmediato, me pregunto si eso que me mandaste hay alguna manera de adaptarlo a este código ya que pues como ves ya lo tengo listo y eso que me mandaste pues tengo que ponerme a estudiar AJAX porque no entendí practicamente casi nada, entonces ¿Habría alguna manera de adaptar eso que me mandaste a este para que pueda redirigirme a http://localhost/estados/trujillo/valera (tomo como ejemplo tomo esa url), se podría hacer o crees que es mejor hacerlo como tu dijiste?
Mil gracias por responder y por explicarme eso.

Alexis88 · #16 (**permalink**) 18/01/2016, 13:45

Estimado, el método $.ajax() de jQuery que usas, realiza una petición asíncrona, o sea, hace uso de AJAX. Lo único que tienes que revisar es la lógica del algoritmo, entenderla (aunque ya te la expliqué, pero igual) y adaptarla a lo que tienes.

Un saludo

byrong · #17 (**permalink**) 18/01/2016, 13:52

Cita:

Iniciado por Alexis88

Estimado, el método $.ajax() de jQuery que usas, realiza una petición asíncrona, o sea, hace uso de AJAX. Lo único que tienes que revisar es la lógica del algoritmo, entenderla (aunque ya te la expliqué, pero igual) y adaptarla a lo que tienes.

Un saludo

¿Es decir que si podría adaptar lo que me diste para redireccionar con lo que te mostré?

Saludos

Alexis88 · #18 (**permalink**) 18/01/2016, 14:16

Solo tienes que tomar a los tres valores, armar la URL y hacer la redirección. Fíjate en cómo lo hice y adáptalo.

PISTA: Analiza el punto 6.

byrong · #19 (**permalink**) 18/01/2016, 14:42

Cita:

Iniciado por Alexis88

Solo tienes que tomar a los tres valores, armar la URL y hacer la redirección. Fíjate en cómo lo hice y adáptalo.

PISTA: Analiza el punto 6.

Vale, muchisimas gracias.