Mostrar los registros de una consulta a partir de un option

letni · #1 (**permalink**) 13/01/2009, 08:20

Hola, tengo este código en html:

Código HTML:

<html>
    <head>
    </head>
    <body>
        <form name = "prueba1">
            <select name = "evento">
	        <option value = "" selected> Selecciona opción...</option>
	        <option value = "opcion1" onClick = "mostrar('uno')"> Opción 1</option>
	        <option value = "opcion2" onClick = "mostrar('dos')"> Opción 2</option>
	        <option value = "opcion3" onClick = "mostrar('tres')"> Opción 3</option>
	        <option value = "opcion4" onClick = "mostrar('cuatro')"> Opción 4</option>
            </select>
        </form>
    </body>
</html>

Lo que quiero es mostrar (debajo del option no en otra página) el resultado de una consulta sobre una tabla de un servidor MySQL que dependa de la opción seleccionada al seleccionar una opción.

Es decir que:

- Si elijo la opción "uno" se muestre el resultado de la consulta: select * from Tabla where opcion = "uno" debajo del option
- Si elijo la opción "dos" se muestre el resultado de la consulta: select * from Tabla where opcion = "dos" debajo del option
- Si elijo la opción "tres" se muestre el resultado de la consulta: select * from Tabla where opcion = "tres" debajo del option
- Si elijo la opción "cuatro" se muestre el resultado de la consulta: select * from Tabla where opcion = "cuatro" debajo del option

¿Cómo puedo hacerlo?

pateketrueke · #2 (**permalink**) 13/01/2009, 09:28

mmm.... ¿sabes Ajax??

la función mostrar() ¿que hace???

en base a esta función se determina como hacer tu consulta.... así, es muy dificil que alguien te programe lo que imaginas....

mejor, revisa este POST ... esta interesante!!

http://www.forosdelweb.com/f127/trae...elects-661660/

letni · #3 (**permalink**) 13/01/2009, 09:41

Cita:

Iniciado por pateketrueke

mmm.... ¿sabes Ajax??

No se Ajax.

Cita:

Iniciado por pateketrueke

la función mostrar() ¿que hace???

La función mostrar no hace nada de momento pues no se bien cómo llevar a cabo esto que pido.

Teóricamente la función mostrar ha de crear la consulta dependiendo del valor pasado como parámetro, ejecutarla y luego mediante un bucle while debe de ir mostrando los registros.

Por ejemplo:

Código PHP:

  <?
function mostrar($Opcion) {
   $link = mysql_connect("localhost", "user", "0000");
   mysql_select_db("Prueba", $link);
   $Select = mysql_query("select * from Tabla where opcion = ".$Opcion);
   while ($Recorre = mysql_fetch_array($Select)) {
      echo $Recorre['Codigo']; 
   }
}
?>
<html>
    <head>
    </head>
    <body>
        <form name = "prueba1">
            <select name = "evento">
            <option value = "" selected> Selecciona opción...</option>
            <option value = "opcion1" onClick = "mostrar('uno')"> Opción 1</option>
            <option value = "opcion2" onClick = "mostrar('dos')"> Opción 2</option>
            <option value = "opcion3" onClick = "mostrar('tres')"> Opción 3</option>
            <option value = "opcion4" onClick = "mostrar('cuatro')"> Opción 4</option>
            </select>
        </form>
    </body>
</html>

Pero no me funciona, me dice: Error: mostrar is not defined

¿Alguna idea?

pateketrueke · #4 (**permalink**) 13/01/2009, 09:52

claro, varias....

el punto, es que la función mostrar() debe ser Javascript...

como te dije, revisando el tema que te sugerí... así esta echo, ahí usando jQuery...

adaptación...

Código javascript:

Ver originalfunction mostrar() {
var valor =$("#combo1").val();
 
//Invocacion al script php que procesa los datos y le enviamos los valores por POST
$.post("procesa_combos.php", { 'valor': valor}, function(data){
$("#combo2").html(data);
});
}

esto hace la función de tomar el valor del combo, y hacer la consulta con Ajax.. usando el método POST

ahora, en el PHP que recibe esta consulta.. debe ser mas o menos así....

procesa_combos.php

Código PHP:

  $where = ! empty($_POST['valor'])? " WHERE foo='$_POST[valor]'": null;

   $link = mysql_connect("localhost", "user", "0000");
   mysql_select_db("Prueba", $link);
   $Select = mysql_query("select * from Tabla " . $where);
   while ($Recorre = mysql_fetch_array($Select)) {
//      echo $Recorre['Codigo']; 
//
// aquí, es la salida de HTML, XML, JSON o lo que desees
//
// esta salida se usara rellenar el elemento #combo2 de tu HTML
// de preferencia, has lo que quieras...
//
   }

y eso es todo, el PHP imprime sus datos... el Ajax los recibe... y los coloca, bingo!

eso es todo lo que puedo hacer por ti, si no entiendes... ve y lee una referencia de Javascript (por que se ve que si sabes PHP)

letni · #5 (**permalink**) 13/01/2009, 09:55

Cita:

Iniciado por pateketrueke

el punto, es que la función mostrar() debe ser Javascript...

¿No puede ser una función de PHP tal y como lo tengo yo?

Muchas gracias pateketrueke.

pateketrueke · #6 (**permalink**) 13/01/2009, 10:00

nooo... para nada!!!

Javascript se ejecuta en el cliente... y PHP en el servidor !!!

por favor (me retracto) lee una referencia de Javascript y PHP, para que veas las diferencias.... ya que teóricamente, estas muy equivacado...

letni · #7 (**permalink**) 13/01/2009, 10:05

Se que Javascript se ejecuta en el cliente y PHP en el servidor, pero al fin y al cabo con ambos puedo declarar e implementar funciones y además PHP me da la posibilidad de acceder a funciones de MySQL por lo que pensé que era mejor usar una función implementada en PHP para mostrar los registros de la consulta.

pateketrueke · #8 (**permalink**) 13/01/2009, 10:07

si, si... tienes razón....

pero por simple sentido común... no puedes usar una función definida para el lenguaje de PHP como si se tratará de lenguaje Javascript (cosas muy aparte) ¿¿entiendes eso???

letni · #9 (**permalink**) 13/01/2009, 10:11

Cita:

Iniciado por pateketrueke

no puedes usar una función definida para el lenguaje de PHP como si se tratará de lenguaje Javascript

Código HTML:

<option value = "opcion1" onClick = "mostrar('uno')"> Opción 1</option>

Creo que sí lo entiendo, ¿quieres decir que en el código anterior la llamada mostrar('uno') en ningún caso puede ser una llamada a una función de PHP?

Si es así entonces el código correcto sería este:

Código HTML:

<script type = "text/javascript" src = "jquery.js">
function mostrar() {
    var valor = $("#combo1").val();
    //Invocacion al script php que procesa los datos y le enviamos los valores por POST
    $.post("procesa_combos.php", { 'valor': valor}, function(data){
                                                        $("#combo2").html(data);
                                                    });
}
</script>
<html>
    <head>
    </head>
    <body>
        <form name = "prueba1">
            <select name = "combo1">
	        <option value = "" selected> Selecciona opción...</option>
	        <option value = "opcion1" onClick = "mostrar('uno')"> Opción 1</option>
	        <option value = "opcion2" onClick = "mostrar('dos')"> Opción 2</option>
	        <option value = "opcion3" onClick = "mostrar('tres')"> Opción 3</option>
	        <option value = "opcion4" onClick = "mostrar('cuatro')"> Opción 4</option>
            </select>
        </form>
    </body>
</html>

¿Verdad?

pateketrueke · #10 (**permalink**) 13/01/2009, 10:21

si, así es... no puedes usar PHP como si fuera Javascript

solo que recuerda que el Javascript debe ir entre <head></head>

letni · #11 (**permalink**) 13/01/2009, 10:27

Cita:

Iniciado por pateketrueke

solo que recuerda que el Javascript debe ir entre <head></head>

Es verdad, mi código va tomando forma:

Código HTML:

<html>
    <head>
        <script type = "text/javascript" src = "jquery.js">
            function mostrar() {
                var valor = $("#combo1").val(); 
                //Invocacion al script php que procesa los datos y le enviamos los valores por POST
                $.post("procesa_combos.php", { 'valor': valor}, function(data){
                                                                    $("#combo2").html(data);
                                                                });
            }
        </script>
    </head>
    <body>
        <form name = "prueba1">
            <select name = "combo1">
	        <option value = "" selected> Selecciona opción...</option>
	        <option value = "opcion1" onClick = "mostrar('uno')"> Opción 1</option>
	        <option value = "opcion2" onClick = "mostrar('dos')"> Opción 2</option>
	        <option value = "opcion3" onClick = "mostrar('tres')"> Opción 3</option>
	        <option value = "opcion4" onClick = "mostrar('cuatro')"> Opción 4</option>
            </select>
        </form>
    </body>
</html>

De todos modos me sigue saliendo el error: Error: mostrar is not defined

¿Qué está mal?

PD: Curiosidad sobre foo y bar.

GatorV · #12 (**permalink**) 13/01/2009, 14:47

Tema trasladado a AJAX.

No puedes incluir el src="" de un tag <script> y adentro también poner código, necesitas hacerlo por aparte.

Saludos

letni · #13 (**permalink**) 13/01/2009, 14:50

¿Me puedes poner un ejemplo? No te entendí muy bien.

Saludos.

Lego · #14 (**permalink**) 13/01/2009, 14:58

lo que quizo decir es q esto

<script type = "text/javascript" src = "jquery.js">
function mostrar() {
var valor = $("#combo1").val();
//Invocacion al script php que procesa los datos y le enviamos los valores por POST
$.post("procesa_combos.php", { 'valor': valor}, function(data){
$("#combo2").html(data);
});
}
</script> no lo puedes hacer la funcion debes estar desarrollada dentro de el tag y no en la envocacion del mismo crea una pagina dond haces los tag y luego la envocas
por ejemplo una pagina llamada

tag.js
dentro de la misma hace la funcion

function mostrar() {
var valor = $("#combo1").val();
//Invocacion al script php que procesa los datos y le enviamos los valores por POST
$.post("procesa_combos.php", { 'valor': valor}, function(data){
$("#combo2").html(data);
});
}

y luego la llamas en el head de tu html
<script type = "text/javascript" src = "tag.js"></script>

saludos y exito

letni · #15 (**permalink**) 13/01/2009, 15:13

Hola Lego, puse la funcion JavaScript en un archivo a parte llamado libreria.js:

Código Javascript:

Ver originalfunction mostrar() {
    document.write($("#combo1").val());
    var valor =$("#combo1").val();
    //Invocacion al script php que procesa los datos y le enviamos los valores por POST
    $.post("procesa_combos.php", { 'valor': valor}, function(data){
                                                        $("#combo2").html(data);
                                                    });
}

Código HTML:

<html>
    <head>
        <script type = "text/javascript" src = "jquery.js">
        <script type = "text/javascript" src = "libreria.js">
        </script>
    </head>
    <body>
        <form name = "prueba1">
            <select name = "combo1">
	        <option value = "" selected> Selecciona opción...</option>
	        <option value = "opcion1" onClick = "javascript:mostrar()"> Opción 1</option>
	        <option value = "opcion2" onClick = "javascript:mostrar()"> Opción 2</option>
	        <option value = "opcion3" onClick = "javascript:mostrar()"> Opción 3</option>
	        <option value = "opcion4" onClick = "javascript:mostrar()"> Opción 4</option>
            </select>
        </form>
    </body>
</html>

Pero me sigue sin funcionar, me sigue saliendo Error: mostrar is not defined.

¿Por qué?

GatorV · #16 (**permalink**) 13/01/2009, 15:30

Pues no haz cerrado el </script> primero, te recomiendo antes de meterte en cosas más avanzadas, que leas un manual básico de HTML, evita usar <select name = "combo1", no es neceario los espacios extras, usa <select name="combo1".

Por otro lado es mejor usar el evento onchange() del combo en lugar del onclick del option.

Saludos

letni · #17 (**permalink**) 13/01/2009, 15:44

Cita:

Iniciado por GatorV

evita usar <select name = "combo1", no es neceario los espacios extras, usa <select name="combo1".

Lo hacía así porque pensaba que era más correcto desde el punto de vista de las reglas de estilo.

Cita:

Iniciado por GatorV

Por otro lado es mejor usar el evento onchange() del combo en lugar del onclick del option.

Ahora tengo este código:

libreria.js:

Código Javascript:

Ver originalfunction mostrar() {
    document.write($("#combo1").val());
    var valor=$("#combo1").val();
    //Invocacion al script php que procesa los datos y le enviamos los valores por POST
    $.post("procesa_combos.php", { 'valor': valor}, function(data){
                                                        $("#combo2").html(data);
                                                    });
}

Código HTML:

<html>
    <head>
        <script type="text/javascript" src="jquery.js"></script>
        <script type="text/javascript" src="libreria.js"></script>
    </head>
    <body>
        <form name="prueba1">
            <select OnChange="mostrar()" name="combo1">
	        <option value="" selected> Selecciona opción...</option>
	        <option value="opcion1"> Opción 1</option>
	        <option value="opcion2"> Opción 2</option>
	        <option value="opcion3"> Opción 3</option>
	        <option value="opcion4"> Opción 4</option>
            </select>
        </form>
    </body>
</html>

Ahora al elegir una opción en el navegador me pone undefined y se queda cargando indefinídamente.

¿Por qué?

GatorV · #18 (**permalink**) 13/01/2009, 19:56

Ese document.write ahi no te va a servir de mucho, por otro lado ve la documentacion de JQuery, te falta el id de del div donde vas a mostrar los datos, revisa en la documentacion para que aprendas como leer un elemento de un formulario html.

Saludos

letni · #19 (**permalink**) 13/01/2009, 19:58

He estado buscando pero no encuentro un manual que lo explique, puedes darme un enlace a un buen manual de JQuery.

Gracias.

GatorV · #20 (**permalink**) 13/01/2009, 20:11

http://docs.jquery.com/

http://docs.jquery.com/Tutorials

Saludos

GatorV · #21 (**permalink**) 13/01/2009, 20:46

No lo he probado pero algo asi te serviria:

Código html:

Ver original<html>
    <head>
        <script type="text/javascript" src="jquery.js"></script>
        <script type="text/javascript">
    function mostrar() {
        var valor = $('#combo1').val();
        $.post("procesa.php", {'valor': valor}, function(data){$("#combo2").html(data);});
    }
    </script>
    </head>
    <body>
        <form name="prueba1">
            <select onchange="mostrar();" id="combo1" name="combo1">
            <option value="" selected> Selecciona opción...</option>
            <option value="opcion1"> Opción 1</option>
            <option value="opcion2"> Opción 2</option>
            <option value="opcion3"> Opción 3</option>
            <option value="opcion4"> Opción 4</option>
            </select>
        </form>
    <div id="resultado"></div>
    </body>
</html>

Saludos

letni · #22 (**permalink**) 13/01/2009, 20:47

Mil gracias GatorV, aunque lo he probado y no se redirige a procesa.php.

Este tiene mi mismo problema.

El problema que yo veo aquí es que no se hace todo en la misma página ya que se llama a procesa_combos.php para que muestre el resultado de la consulta y mi control desplegable desaparece y yo lo único que quería es que la información consultada apareciera debajo del desplegable al elegir una de las opciones.

Saludos.

XLogus · #23 (**permalink**) 14/01/2009, 13:53

Dale una revisada a este tutorial para crear combos dependientes usando jquery, usa un código muy parecido al que te dió GatorV

http://www.miguelmanchego.com/2009/c...s-ajax-jquery/

En ese ejemplo se usan 3 combos y lo que debe hacer cada combo esta en los archivos combo1.php y combo2.php, para hacerlo funcionar con tu base de datos deberias usar un codigo de conexión similar al que te dió pateketrueke en cada archivo php. ( aunque la forma correcta deberia ser usando includes y una clase pero para que no te enrredes mas, haz la conexion como die pateketrueke )