mostrar en un campo option la info de una bd?

jdieztubet · #1 (**permalink**) 26/08/2013, 07:00

Buenas tardes, buena gente,

soy Jorge, nuevo en el Foro y me uno a vosotros para ir resolviendo pequeñas dudas que me van surgiendo según voy intentando aprender a programar web...

En este caso me gustaría saber si es posible, y de serlo, cómo puedo realizar un formulario con un primer campo desplegable select que muestre las marcas de coche de mi base de datos sin tener que rellenarla en el html (ya que irá variando en función que vaya alimentando la bd) y un segundo campo select con el tipo de coche (3 puertas, SUV, deportivo, etc).

Asique cuando seleccione marca, me muestre la imagen de los modelos de esa marca, y que cuando seleccione el tipo, me muestre solo los modelos de esa marca que cumplan ser de ese tipo.

¡Muchas gracias de antemano!

tquezada · #2 (**permalink**) 26/08/2013, 07:54

hola que tal bienvenido!!

Primero que todo sabes conectarte a una bd desde php, sabes hacer consultas a la bd, usas mysql ?
asi podre ayudarte de manera mas rapida
Saludos

jdieztubet · #3 (**permalink**) 26/08/2013, 08:02

tquezada,

gracias por responder.

A la bd me conecto sin problema y le puedo hacer consultas en sus distintas tablas. Quería saber de qué manera puedo hacer un formulario que antes de hacerle submit, me vaya filtrando lo que el usuario va a poder seleccionar.

S2.

tquezada · #4 (**permalink**) 26/08/2013, 08:39

Para poder generar texbox dinámicos necesitas aplicar ajax aca te dejo un tutorial de ejemplo para que tu lo modifiques a lo que quieras utilizar ya que el tema es bastante extenso para explicarlo acá ojala te sirva
Texbox Anidados

Saludos.

jdieztubet · #5 (**permalink**) 26/08/2013, 08:49

Muchas gracias! Tiene buena pinta, lo estudiaré y adaptaré a mi idea.

Muchas gracias de nuevo!

alexisverano · #6 (**permalink**) 26/08/2013, 08:52

jdieztubet,

Si de combos o select dependientes se trata, hay cientos de tuto en internet, pero para mi este es el mejor de ellos..., evidentemente deberas conocer ajax.

http://www.formatoweb.com.ar/ajax/se..._3_niveles.php

jdieztubet · #7 (**permalink**) 27/08/2013, 05:53

Cita:

Iniciado por tquezada

Para poder generar texbox dinámicos necesitas aplicar ajax aca te dejo un tutorial de ejemplo para que tu lo modifiques a lo que quieras utilizar ya que el tema es bastante extenso para explicarlo acá ojala te sirva
[URL="http://www.cesarcancino.com/videotutorial-25-del-curso-de-php-y-mysql-n54.html"]Texbox Anidados[/URL]

Saludos.

Gracias de nuevo tquezada, gracias al tuto he conseguido hacerlo funcionar y me muestra correctamente la info de la bd.

Ahora querría, con ayuda, mucha ayuda, saber cómo sería posible que(siguiendo el ejemplo del tutorial) al seleccionar región>ciudad y comuna, cargara una imagen de esta, que me deje seleccionarla mediante checkbox y que le pueda añadir un precio que posteriormente mediante un submit lo envíe a la bd...

No se si me habré explicado bien o si ni siquiera será posible hacer lo que pretendo...

Un saludo y gracias de antemano por cualquier aporte.

tquezada · #8 (**permalink**) 27/08/2013, 10:52

Hola que bueno que te sirvió lo que puedes hacer es guardar las fotos en una carpeta dentro de tu proyecto y guardar la ruta de la foto en la bd y hacer lo mismo pero invocando la ruta de la foto

tquezada · #9 (**permalink**) 27/08/2013, 10:53

Puedes poner el código para poder ayudarte mejor

jdieztubet · #10 (**permalink**) 28/08/2013, 06:24

Código PHP:

 
 gestion-ofertas.php

 
<body onload="limpiar()">

  <?php include_once("../analyticstracking.php") ?>              

  <h3>A&ntilde;ada m&aacute;s ofertas aqu&iacute;.</h3>

  <form name="form" action="introducir-ofertas.php" method="¿get o post?">

   <div>

    <?php

     $sql="select * from marcas order by nombre_marca asc";

     $res=mysql_query($sql);

    ?>

    Marca:

    <select name="marca" onchange="from(document.form.marca.value,'modalidades','modalidades.php')">

     <option value="0">Seleccione la marca</option>

     <?php

      while ($reg=mysql_fetch_array($res))

      {

     ?>

     <option value="<?php echo $reg["id"];?>"><?php echo $reg["nombre_marca"];?></option>          

     <?php

      }

     ?>                  

    </select>

   </div>        

   <br />

   <div id="modalidades">

    Modalidad:

    <select name="modalidades">

     <option value="0">Elige la modalidad</option>

    </select>

   </div>

   <br />

   <div id="nombre_modelo">

    Modelo:

    <select name="nombre_modelo">

     <option value="0">Elige el modelo</option>

    </select>

   </div>  

   <br />

          Seleccione cual quiere ofertar:<br><br>

        <input type="checkbox" name="" value=""><img id="" name="" height="65" alt="" src="" width="176" border="0"><br>Precio:<input type="text" name="precio"></img><br><br>

        <input type="checkbox" name="" value=""><img id="" name="" height="65" alt="" src="" width="176" border="0"><br>Precio:<input type="text" name="precio"></img><br><br>

        <input type="checkbox" name="" value=""><img id="" name="" height="65" alt="" src="" width="176" border="0"><br>Precio:<input type="text" name="precio"></img><br><br>

        <input type="checkbox" name="" value=""><img id="" name="" height="65" alt="" src="" width="176" border="0"><br>Precio:<input type="text" name="precio"></img><br><br>

        <input type="submit" value="Añadir">Sus ofertas ser&aacute;n a&ntilde;adidas a su cuenta.  

     </form>

    </div>

Código PHP:

 
 modalidades.php

 
<?php

require_once ("../conectar.php");

$sql="select * from modalidades where id_marca=".$_GET["id"]."";

$res=mysql_query($sql);

?>

Modalidad:

<select name="modalidades" onchange="from(document.form.modalidades.value,'nombre_modelo','nombre_modelo.php')">

<option value="0">Elige la modalidad</option>

 
<?php

while ($reg=mysql_fetch_array($res))

{

?>

<option value="<?php echo $reg["id"];?>"><?php echo $reg["nombre"];?></option>          

<?php

}

?>

 
</select>

Código PHP:

 
 nombre-modelo.php

 
<?php

require_once ("../conectar.php");

$sql="select * from modelos where id_modalidad=".$_GET["id"]."";

$res=mysql_query($sql);

?>

Modelo:

<select name="nombre_modelo" ONCHANGE()>

<option value="0">Elige el modelo</option>

 
<?php

while ($reg=mysql_fetch_array($res))

{

?>

<option value="<?php echo $reg["id"];?>"><?php echo $reg["nombre_modelo"];?></option>

 
<?php

}

 
?>

     

</select>

Lo que quisiera que hiciera ahora, sería que según se fueran seleccionando Marca>Modalidad>Modelo, fueran apareciendo las imágenes de , primero, todos los modelos de la marca, después, solo los de esa marca y de esa modalidad y, finalmente, solo el modelo seleccionado.

Y que al aparecer la o las imágenes, se pudieran seleccionar, añadir un precio y enviar a la tabla de las ofertas del usuario que estuviera conectado en ese momento.

Gracias por cualquier aporte que podáis compartir conmigo. El foro y vosotros estáis siendo de gran ayuda en la etapa de aprendizaje que en la que me encuentro.

Muchísimas gracias.

jdieztubet · #11 (**permalink**) 29/08/2013, 23:53

¿¿Nadie que pueda arrojarme algo de luz??

tquezada · #12 (**permalink**) 30/08/2013, 08:27

para hacer lo que deseas debes implementar javascript

Pero no entiendo como quieres las fotos y que se añada el precio.
pon una pagina web de ejemplo para comprender y ayudarte

Saludos

loncho_rojas · #13 (**permalink**) 30/08/2013, 12:52

Si entendiste lo de las tablas relacionadas de ciudad y demás de tu ejemplo, puedes crear una tabla de imágenes y relacionarlas con el id de tu marca, modalidad o modelo...

guardas en la BD

id_img - urlimagen- id_marca - id_modelo

donde las que estan en negrita son los id foráneos de tus tablas marcas, modelo, etc...

cuando cambies tu combo, pidele también a tu consulta SQL que te traiga las imagenes correspondientes de las marcas y modelos... y lo que necesites.. quizá requieras de utilizar INNER JOIN para relacionar las tablas...

jdieztubet · #14 (**permalink**) 02/09/2013, 00:37

Cita:

Iniciado por tquezada

para hacer lo que deseas debes implementar javascript

Pero no entiendo como quieres las fotos y que se añada el precio.
pon una pagina web de ejemplo para comprender y ayudarte

Saludos

tquezada, gracias por el consejo. Me imaginaba que algún script de javascript tenía que implementar para hacerlo funcionar.

Webs que hagan lo que quiero no conozco pero te explico para aclararte la idea.

Será una web(en este apartado) de gestión de ofertas. El punto que quiero desarrollar, añade los modelos que la tienda que está logada quiere ofrecer. Para ello va filtrando entre marcas/modalidades/modelos que existen para después poder seleccionar los que desea ofrecer, ponerles el precio al que los quiere ofrecer y añadirlos a sus ofertas. Esto para la parte de las tiendas. Luego habrá una parte de usuarios que buscan estos productos y que llegados a un modelo en particular, lo encuentren al precio/cercanía. Pero eso es el paso 2.

Espero haberte aclarado y que me puedas seguir ayudando tal y como lo estás haciendo, ya que soy nuevo en esto de la programación pero tengo claro lo que quiero que la web haga.

Un saludo.

tquezada · #15 (**permalink**) 02/09/2013, 09:36

Hola jdieztubet
Si entendí bien tu quieres hacer 2 partes, una para administrar la pagina y otra para los usuarios verdad?
Quieres hacer una administrador de contenidos.
Mira para la parte de agregar ofertas con las fotos, guarda todas las fotos dentro de una carpeta y cuando guardes las marcas en la bd agrégale un campo a la bd que se llame foto y ahí le agregas la ruta de la foto
Ejemplo :

ID MARCA FOTO
1 xxxxxxx foto_xxxxxx.jpg

y así cuando escojas una marca haces la selección a la foto llamándola de la ruta de la bd

con un <img src ""> por ejemplo, eso también lo puedes implementar con ajax o javascript
o también puedes crear carpetas y subcarpetas con las marcas , modelos, modalidades y así
cuando vallas pasando por los textbox dinámicos se abran las imágenes de las carpetas.

Te dejo una web con distintas cosas para que vallas implementando en tu web, trata de usar siempre la bd para todo, para guardar rutas, datos todo así tu web siempre sera dinámica

http://www.ajaxshake.com/es/JS.html

Saludos.

jdieztubet · #16 (**permalink**) 02/09/2013, 13:27

Gracias tquezada, me.miraré bien a fondo la web, tiene muy buena pinta...seguro que.le saco mucho provecho, gracias x el aporte.

Por otro lado, ya tengo en la misma tabla de modelos, un campo para las imágenes con la ruta, con eso vale,¿no? Lo que no he conseguido es que muestre las imágenes que corresponden a la selección primero de marca, después lo mismo para la modalidad y por último para los modelos. Tengo que crear una segunda función para que en el 'onchange' de cada select aparte de traerse las marcas, modalidades y modelos de la bd, cargue las imágenes correspondientes... Trataré de buscar la manera, pero como ya te he comentado antes, casi casi voy aprendiendo a prpgramar y todo el mundillo en función de lo que se me va ocurriendo para mi web.

Gracias como siempre x los consejos. Un saludo.

tquezada · #17 (**permalink**) 02/09/2013, 13:48

puedes usar esto

este div muestra la imagen

Código HTML:

Ver original<div class="image">
<img id="largeImg" src="img/imagen1.png" width="350" height="350" style="opacity: 1;" name="imagen"> </div>
</div>

y esta la lista para seleccionar

Código HTML:

Ver original<form>
<select name="lista" size="1" onChange =" imagen.src=form.lista.options[form.lista.selectedIndex].value;">
<option value="img/imagen1.png">Imagen 1</option>
<option value="img/imagen2.jpg">Imagen 2</option>
</select>
</form>

esto lo puedes implementar en lo que ya tienes puedes poner los values de los productos y la ruta de la foto con un guion (-) y despues los separas y lo ocupas en el div
Saludos

jdieztubet · #18 (**permalink**) 02/09/2013, 14:31

Pero esa consulta no recorrerá la tabla trayéndose los valores que coincidan con lo seleccionado de marca/modalidad o modelo, no?

tquezada · #19 (**permalink**) 02/09/2013, 14:46

si, tu debes poner las filas correspondientes
en el value por ejemplo

Código HTML:

Ver original<form>
<select name="lista" size="1" onChange =" imagen.src=form.lista.options[form.lista.selectedIndex].value;">
<option value="marca-foto">opcion 1</option>
</select>
</form>

así podrás ocupar la ruta de la foto, separas el value y la ocupas llenando el div que muestra la imagen, con la ruta del value.

puedes crear carpetas y subcarpetas con fotos y así cuando se accione el evento onchange abra la carpeta con las fotos dentro del div y así a medida que vallas escojiendo
hasta llegar a la ultima foto

para separar ocupas split() y cortas por el guion y para poner otra función en el onchange la pones después del punto y coma.

jdieztubet · #20 (**permalink**) 02/09/2013, 14:49

Cita:

Iniciado por loncho_rojas

Si entendiste lo de las tablas relacionadas de ciudad y demás de tu ejemplo, puedes crear una tabla de imágenes y relacionarlas con el id de tu marca, modalidad o modelo...

guardas en la BD

id_img - urlimagen- id_marca - id_modelo

donde las que estan en negrita son los id foráneos de tus tablas marcas, modelo, etc...

cuando cambies tu combo, pidele también a tu consulta SQL que te traiga las imagenes correspondientes de las marcas y modelos... y lo que necesites.. quizá requieras de utilizar INNER JOIN para relacionar las tablas...

Gracias por el aporte, loncho_rojas. Por lo que entiendo de tu comentario, propones crear una tabla exclusivamente para las imágenes, con los id's que relacionen las tres selecciones(marca, modalidad y modelos), ok. Pero, ¿como hago que en el onchange de cada selección, me cargué las que coinciden con cada id¿

Ya siento si os propongo cosas raras y complejas pero me estoy volviendo loco googleando y no acabó de dar en el clavo.

Muchas gracias por la ayuda! Un saludo!