JavaScript - Mostrar campo mysql con javascript

Pos: 186

Val: 13

Mostrar campo mysql con javascript

Publicado por Unexes (39 intervenciones) el 06/08/2015 23:45:10

Un saludo a tod@s.

Veréis mi problema principal es que no domino bien Javascript, estoy en ello, pero estoy convencido de que me podéis ayudar.

Tengo una base de datos mysql con tres campos "Id" - "Cantidad" y "Descripción".

Tengo un select que se rellena con el campo"Cantidad" y donde selecciono la cantidad y un div "Tarifa" donde quiero mostrar la descripción correspondiente al registro seleccionado.
Con el código que pongo a continuación cuando selecciono en el select una cantidad por ejemplo 2000 en el div "Tarifa" me pone "Item seleccionado.. 2000" y yo lo que quiero es que me ponga el contenido del campo descripción de mi base de datos que corresponde a 2000.
Una cosa mas de entrada el select me muestra la primera cantidad osea 1000 pero el div "Tarifa" no me muestra nada, me empieza a mostrar cuando realizo el primer cambio en el select.

Espero me podáis ayudar muchas gracias.

<script type="text/javascript">

        function mostrar( obj ){

            var container = document.getElementById("Tarifa") ;

            container.innerHTML = " Item seleccionado.. " + obj[ obj.selectedIndex ].value ;

  </script>

</head>

        <?php

        require_once('../Connections/TuZonaPublicidad.php');

		mysqli_query($conexion, "SET NAMES 'utf8'");

		$seltlcb = isset($_GET["sel_tlcb"])? $_GET["sel_tlcb"]: '';

?>

<body>

<form name="filtrar" id="filtrar" method="GET"  action="">

    <select name="sel_tlcb" id="sel_tlcb" class="selector" onchange="mostrar(this);">

			<?php

    			$tablaseleccion = mysqli_query($conexion,"SELECT * FROM tarjetas WHERE Activacion = '1' And Tamano= 'TLCB' ORDER BY Cantidad ASC");

    				while ($registroseleccion  = mysqli_fetch_array($tablaseleccion ))

					echo "<option value='".$registroseleccion['Cantidad']."' >&nbsp;&nbsp;".number_format($registroseleccion['Cantidad'], 0, ',', '.')."</option>";

				mysqli_free_result($tablaseleccion);

?>

   </select>

 		<div id="Tarifa" class="tarifa"></div>

</form>

Valora esta pregunta

Me gusta: Está pregunta es útil y esta clara

No me gusta: Está pregunta no esta clara o no es útil

Responder

Pos: 2

Val: 3.162

Mostrar campo mysql con javascript

Publicado por xve (2100 intervenciones) el 07/08/2015 09:09:27

Hola Unexes, por lo que entiendo, quieres obtener el texto que hay entre el <option>, no su value, verdad??

Haber si te sirve este código de ejemplo:
http://www.lawebdelprogramador.com/codigo/JavaScript/2802-Obtener-el-texto-de-un-option-no-su-value.html

Valora esta respuesta

Me gusta: Está respuesta es útil y esta clara

No me gusta: Está respuesta no esta clara o no es útil

Comentar

Pos: 186

Val: 13

Mostrar campo mysql con javascript

Publicado por Unexes (39 intervenciones) el 07/08/2015 11:38:23

Gracias xve por tu rápida respuesta.

He mirado el código que me aconsejaste y no es lo que necesito, ya que el div me muestra el valor seleccionado. Creo que me esplique mal, perdón.

Veras tengo una base de datos con tres campos
Id - Cantidad - Descripcion
1 - 1000 - 35€
2 - 2000 - 70€
3 - 3000 - 100€
etc...

El select se rellena con el campo Cantidad
Lo que quiero es que al seleccionar en el select la cantidad 2000 el div "Tarifa" me muestre "70€" y que al seleccionar en el select la cantidad 3000 el div "Tarifa" me muestre "100€", etc...

Tal como esta el código actualmente me muestra: "Item seleccionado.. 2000" o "Item seleccionado.. 3000" y esto no me vale.

Espero me puedas ayudar.

Valora esta respuesta

Comentar

Pos: 18

Val: 95

Mostrar campo mysql con javascript

Publicado por Vainas (258 intervenciones) el 07/08/2015 19:10:58

Buenas:

"Una cosa mas de entrada el select me muestra la primera cantidad osea 1000 pero el div "Tarifa" no me muestra nada"

Pues por que la funcion en javascript solo se ejecutara en el momento que hagas un cambio en el select (por eso el evento se llama onchange que viene a ser algo asi como cambiar). Puedes colocar despues del function y antes de cerrar la etiqueta script

mostrar(document.getElementById("sel_tlcb"));

Para que se ejecute la primera vez.

Sobre el otro tema, yo descartaria usar ajax para obtener el valor ya que traes muy pocos valores y lo veo innecesario, asi que para mi hay dos opciones, descartando lo comentado anteriormente:

1. Puedes incluir los datos dentro de cada option usando una etiqueta data-* de html. Quedaria algo asi:

while ($registroseleccion  = mysqli_fetch_array($tablaseleccion ))

					echo "<option value='".$registroseleccion['Cantidad']."' data-description="$registroseleccion['Descripcion']">&nbsp;&nbsp;".number_format($registroseleccion['Cantidad'], 0, ',', '.')."</option>";

				mysqli_free_result($tablaseleccion);

y ahora a recuperarlo con javascript dentro de tu function (no lo he probado asi que puede tener algun error el codigo):

var description = obj[ obj.selectedIndex ].dataset.description;

container.innerHTML = " Item seleccionado.. " + description ;

2. Con esta opcion queda todo mas en el lado del javascript. Basta con crear un array de objetos con los datos y luego recorrerlo cuando sea necesario:

$variable_datos = [];

while ($registroseleccion  = mysqli_fetch_array($tablaseleccion )){

					echo "<option value='".$registroseleccion['Cantidad']."' data-description="$registroseleccion['Descripcion']">&nbsp;&nbsp;".number_format($registroseleccion['Cantidad'], 0, ',', '.')."</option>";

array_push($variable_datos, array( 'id ' => $registroseleccion['id'], 'cantidad' => $registroseleccion['Cantidad'], 'description' => $registroseleccion['Descripcion']));

mysqli_free_result($tablaseleccion);

$salida = json_encode($variable_datos);

.... al final, antes de cerrar el body....

<script>

var datos = <?php echo $salida;?>

</script>

Luego ya solo accedes a ellos cada vez que necesites desde tu funcion.

Espero que te sirva.

Saludos.

Valora esta respuesta

Comentar

Pos: 186

Val: 13

Mostrar campo mysql con javascript

Publicado por Unexes (39 intervenciones) el 08/08/2015 12:13:44

Gracias Vainas por tu ayuda.

Empezare diciendo que he probado lo que me comentas y no consigo hacerlo funcionar, para evitar errores, he corregido en el código que me pusiste un pequeño error de comillas y puntos pero nada importante.

Te comento tu primera ayuda y gracias por tu esplicación, he colocado dentro del script la siguiente linea tal como me indicas.
" mostrar(document.getElementById("sel_tlcb"));"
en todas las posiciones posibles y no hace nada, de entrada no me muestra el div "Tarifa", solo me lo muestra a partir de realizar el primer cambio en el select.

He probado lo que me indicas para mostrar la "descripcion" con tu opción (1) una vez añadido un par de dobles comillas y puntos al código para anular el error que me daba, sigo igual.

El problema supongo que estará en la function, pero dados mis escasos conocimiento en javascript, no veo la forma de solucionarlo por mi mismo, no pongo aquí todas las pruebas que he hecho en la function porque algunas de las cosas que he probado para los que sabéis javascript os parecerían barbaridades.

El código tal como esta ahora es el siguiente y como ya he comentado las pruebas y variaciones realizadas en la function las he desechado porque he probado todo menos la opción correcta por supuesto.

<script type="text/javascript">

        function mostrar( obj ){

            var container = document.getElementById("Tarifa") ;

            container.innerHTML = " Item seleccionado.. " + obj[ obj.selectedIndex ].value ;

		mostrar(document.getElementById("sel_tlcb"));

  </script>

</head>

        <?php

        require_once('../Connections/TuZonaPublicidad.php');

		mysqli_query($conexion, "SET NAMES 'utf8'");

		$seltlcb = isset($_GET["sel_tlcb"])? $_GET["sel_tlcb"]: '';

?>

<body>

<form name="filtrar" id="filtrar" method="GET"  action="">

    <select name="sel_tlcb" id="sel_tlcb" class="selector" onchange="mostrar(this);">

			<?php

    			$tablaseleccion = mysqli_query($conexion,"SELECT * FROM tarjetas WHERE Activacion = '1' And Tamano= 'TLCB' ORDER BY Cantidad ASC");

    				while ($registroseleccion  = mysqli_fetch_array($tablaseleccion ))

					echo "<option value='".$registroseleccion['Cantidad']."' data-description='".$registroseleccion['Descripcion']."'>&nbsp;&nbsp;".number_format($registroseleccion['Cantidad'], 0, ',', '.')."</option>";

				mysqli_free_result($tablaseleccion);

?>

   </select>

 		<div id="Tarifa" class="tarifa"></div>

</form>

Espero me puedas seguir ayudando, si necesitas que te adjunte la base de datos, no tengo problema.

Gracias Vainas y a todos los del Foro

Valora esta respuesta

Comentar

Pos: 18

Val: 95

Mostrar campo mysql con javascript

Publicado por Vainas (258 intervenciones) el 08/08/2015 19:09:27

Buenas:

He hecho el codigo muy rapido. Incluso el ejemplo dos me lo he dejado a medias por lo que veo....

Aqui te dejo un ejemplo: http://jsfiddle.net/jebzefwf/

Pon tu <script>...</script> al final del todo antes de cerrar el body (</body>) y asi funcionara. piensa que para que funcione tiene que cargar primero el documento html y despues el codigo por eso se pone al final.

Saludos.

Valora esta respuesta

Comentar

Pos: 186

Val: 13

Mostrar campo mysql con javascript

Publicado por Unexes (39 intervenciones) el 09/08/2015 13:33:45

Gracias Vainas.
Funciona perfectamente.
Pero tengo un problemilla y es que debo usar la base de datos, por eso en el código que te puse en mi post anterior intentaba utilizar la primera de las opciones que me pusiste y intente con esa opción hacerlo funcionar, el motivo es que en una misma pagina habrá varios articulos, pero el principal problema es que en la mayoría de casos las cantidades van desde "1000" hasta "100.000" osea tendría que poner en este supuesto caso en cada select:

<option data-description="35€" value='1000' >&nbsp;&nbsp;1000</option>

<option data-description="70€" value='2000' >&nbsp;&nbsp;2000</option>

 ETC...

Tendría que repetir los <option> 100 veces para cubrir todas las posibles cantidades, y eso en todos los articulos que son muchos, si los articulos no tuvieran distintos precios ni se manejasen distintas cantidades, con hacer uno y copiar y pegar estaría hecho en un plis-plas, por eso la necesidad de la base de datos, para evitar tener que poner varios miles de <option>

La verdad como javascript no lo domino no consigo adaptarlo a que me lea desde la base de datos.

Abusando de tu amabilidad si me ayudaras me harias un enorme favor.

Gracias vainas, un saludo a tod@s.

Valora esta respuesta

Comentar

Pos: 186

Val: 13

Mostrar campo mysql con javascript

Publicado por Unexes (39 intervenciones) el 11/08/2015 10:55:29

Vainas y xve, gracias a los dos.

FUNCIONA

Ya he conseguido hacerlo funcionar con la base de datos, he utilizado tu primera opción Vainas, el problema del mal funcionamiento anterior lo tenia al nombrar mal un campo de la consulta, por eso no me funcionaba.

El código al completo es el siguiente:

<select name="sel_tlcb" id="sel_tlcb" class="selector" onchange="mostrar(this);">

			<?php

    			$tablaseleccion = mysqli_query($conexion,"SELECT * FROM tarjetas WHERE Activacion = '1' And Tamano= 'TLCB' ORDER BY Cantidad ASC");

    				while ($registroseleccion  = mysqli_fetch_array($tablaseleccion ))

					echo "<option value='".$registroseleccion['Cantidad']."' data-description='".$registroseleccion['Descripcion_Precio']."'>&nbsp;&nbsp;".number_format($registroseleccion['Cantidad'], 0, ',', '.')."</option>";

				mysqli_free_result($tablaseleccion);

?>

   </select>

<div id="Tarifa" class="tarifa"></div>

<script type="text/javascript">

function mostrar( obj ){

    var container = document.getElementById("Tarifa") ;

    var description = obj[ obj.selectedIndex ].dataset.description;

    container.innerHTML = " Item seleccionado.. " + description;

mostrar(document.getElementById("sel_tlcb"));

</script>

Solo una pregunta, como la misma página contendra varios selects con sus repectivos divs, tendre que repetir por cada select la function cambiandole el nombre a la misma y añadiendo un nuevo div (Tarifa, tarifa1, Tarifa2, etc...) por cada select.., o ¿hay otra forma de hacerlo?

Gracias a tod@s.

Valora esta respuesta

Comentar

Pos: 18

Val: 95

Mostrar campo mysql con javascript

Publicado por Vainas (258 intervenciones) el 15/08/2015 11:18:59

Buenas:

El link que te deje era solo una prueba en javascript de que podias hacerlo con el codigo que te pase, como yo no puedo tocar tu parte del servidor lo primero que te di es lo que podia funcionar.

Con respecto a tu segunda pregunta podrias pasarle a la funcion el nombre del div (Tarifa, tarifa1, Tarifa2, etc...) y entonces usarlo como variable dentro de la funcion. Algo asi:

<script type="text/javascript">

function mostrar( obj, nameDiv ){

    var container = document.getElementById(nameDiv) ;

    var description = obj[ obj.selectedIndex ].dataset.description;

    container.innerHTML = " Item seleccionado.. " + description;

mostrar(document.getElementById("sel_tlcb"),"Tarifa");

// Para los restantes tendras que hacer lo mismo.....

//mostrar(document.getElementById("..aqui tu id..."),"Aqui el nombre del div que vas a mostrar el resultado");

</script>

En tu html:

<select name="sel_tlcb" id="sel_tlcb" class="selector" onchange="mostrar(this, 'Tarifa');">

Aqui te dejo el link para la prueba (recuerda que la parte del select..option lo tienes que crear tu con tu php): http://jsfiddle.net/jebzefwf/1/

Fijate que cada vez que cree un nuevo select tengo que iniciarlizarlo al final tambien...

Hay aun mas formas de automatizar todo esto pero yo creo que asi te puede valer.

Saludos.

Valora esta respuesta

Comentar

Pos: 186

Val: 13

Mostrar campo mysql con javascript

Publicado por Unexes (39 intervenciones) el 16/08/2015 02:38:03

Muchísimas Gracias Vainas.

Ya lo tenia funcionando a mi manera osea de una forma mas tosca, menos elegante y con muchas mas lineas de código.

Tu solución me ha venido de maravilla ya que el código que me has facilitado requiere menos lineas y es mucho más legible y comprensible que el que estaba utilizando.

De nuevo gracias.

Valora esta respuesta

Comentar

Solicitud de aclaración respecto del manejo del DOM

Llamar a un codigo css desde javascript