Pasar valores de forulario sin Submit!

[NnikoO]

Hola gente, el otro dia pude solucionar el tema del orden de los productos del catalogo con ajax y javascript, anda perfectamente, sin recargar la pagina, pero el problema es que al usar el formulario con el select sin submit, no me pasa los valores que selecciono, entonces siempre realiza
la misma llamada a la base.

Por ejemplo:

Código PHP:

 <script type="text/javascript">
function ordencepa(){
        $("#vistaproductos").load('tintos_ordencepa.php');
};
</script>
 
<form action="" method="post">
  <label for="select" class="label_filtros">Ordenar por:</label>
  Cepa:
    <select name="ordencepa" id="orden">
    <?php
        $con = mysql_query("SELECT DISTINCT cepa FROM productos WHERE categoria LIKE '%$vinostintos%' ORDER BY cepa ASC");
        while ($row = mysql_fetch_array($con)) {
        $cep = $row['cepa'];
    ?> 
    <option value="<?php $cep; ?>" onclick="ordencepa();"><?php echo $cep; ?></option>
    <?php
        }
    ?>
</select>
</form>  

Este es una parte del codigo, donde se muestra el desplegable para el ordenamiento segun la cepa de la bebida. Y la funcion que hace cargar la pagina que corresponde. El conteido de la pagina externa se carga correctamente dentro del div que posee la ID= vistaproductos. El tema es que elija la opcion que elija, no se como pasar el valor de lo seleccionado, para usarlo como variable y utilizarla a la hora de filtrar los datos en la llamada a la base.
Espero que alguien pueda ayudarme.
Muchas gracias de antemano.

<< niko >>

[edie8]

pon en el formulario en el select un onchange="funcion en javascritp" dentro pones la funcion que quieres hacer creas la funcion con la que recojer los datos del select y listo ya tienes tus variables sin submit. La funcion debe ser en javascritp busca o ves al foro de javascritp yo te ayudaria pero no tengo mucho conocimiento de javascript jeje. un saludo espero aber ayudado.

[NnikoO]

hola edie8! gracias por la respuesta.. es lo que estaba intentando, pasa que si le hago un onchange, y recojo el valor del select, me deja de funcionar la parte de la funcion donde carga dentro del div la pagina correspondiente.

[chalchis]

solo veo una funcion

[NnikoO]

es la que llama a la pagina correspondiente, todo lo que probé de agregarle que recoja el valor del select, me la anula. Por eso la deje pelada.

[chalchis]

pues vas a tener qiue poner un boton de envio que se simula un submit, aun que va ser un sumit asincrono

saludos

[NnikoO]

el tema es que se me pidio que no tuviera botones.. de todas formas, no comprendo lo del submit asincrono..

[NnikoO]

estuve viendo lo del asincrono, pero no logro hacer q recoja la variable y q cargue la pagina externa llevando esta variable para usarla en la llamada a la base..

[Nemutagk]

Realmente no veo cual es el problema o.O, si usas jquery puedes obtener el valor seleccionado..

Código Javascript:

$('#orden').change(function() {
     alert($('#orden  option:selected').html());
});
 

[NnikoO]

Hola Nemutagk, gracias por responder. El problema es que cuando agrego alguna funcion para obtener el valor seleccionado, no quiere funcionar, carga perfectamente el load de la pagina a la que se llama, pero el valor no lo toma. Ya no se que probar. Me condiciono mucho el tema de hacer los select sin submit, y sin tener que recargar la pagina.

[Nemutagk]

Seria bueno que publicaras todo el código de la página si no, sería estar adivinando, pero claramente esto no tiene nada que ver con PHP

[NnikoO]

No creo que ayude mucho poner todo el codigo, pero bueno. Primero que nada aclaro que soy diseñador, pero en este caso me contrataron como programador. El diseño y la disposicion de las cosas no es de mi autoria.

En primer lugar esta la pagina productos.php, donde hay un menu con las diferentes categorias, y un include que llama a las paginas correspodientes a esta. Es decir que todo sucede dentro de la pagina productos.

Código PHP:

<div class="contenedor_general">
            <div class="contenido">
                <div class="top_contenido"></div>
                <div class="fondo_contenido">
                    <ul class="tabs">
                        <li><a href="#products01" title="Vinos Tintos" id="productBtn01">Vinos Tintos</a></li>
                        <li><a href="#products02" title="Vinos Blancos" id="productBtn02">Vinos Blancos</a></li>
                        <li><a href="#products03" title="Vinos Rosados" id="productBtn03">Vinos Rosados</a></li>
                        <li><a href="#products04" title="Vinos Espumantes" id="productBtn04">Vinos Espumantes</a></li>
                        <li><a href="#products05" title="Whisky" id="productBtn05">Whisky</a></li>
                        <li><a href="#products06" title="Productos Gourmet" id="productBtn06">Productos Gourmet</a></li>                    
                    </ul>
                    <div class="tab_container">
                    <div><form action="resultados.php" method="post" name="" style="float:right;margin:25px 25px 0 0;"><label for="buscador" class="label_filtros">Buscar producto:</label><input type="text" name="buscador" id="buscador" /><input type="submit" class="boton_buscar" name="buscar" value=""/></form></div>
<!-- Vinos Tintos -->
                        <div id="products01" class="tab_content">
                            <div class="titulos_productos"><img src="imagenes/productTitle01.png" alt="Vinos Tintos" /></div>
                            <?php include("tintos.php"); ?>
                        </div>
<!-- Vinos Blancos -->
                        <div id="products02" class="tab_content">
                            <div class="titulos_productos"><img src="imagenes/productTitle02.png" alt="Vinos Blancos" /></div>
                            <?php include("blancos.php"); ?>
                        </div>
<!-- Vinos Rosados -->
                        <div id="products03" class="tab_content">
                            <div class="titulos_productos"><img src="imagenes/productTitle03.png" alt="Vinos Rosados" /></div>
                            <?php include("rosados.php"); ?>
                      </div>
<!-- Vinos Espumantes -->
                        <div id="products04" class="tab_content">
                            <div class="titulos_productos"><img src="imagenes/productTitle04.png" alt="Vinos Espumantes" /></div>
                            <?php include("espumantes.php"); ?>
                        </div>
<!-- Whisky -->
                        <div id="products05" class="tab_content">
                            <div class="titulos_productos"><img src="imagenes/productTitle05.png" alt="Whisky" /></div>
                            <?php include("whisky.php"); ?>
                        </div>
<!-- Destilados y Aperitivos -->
                        <div id="products06" class="tab_content">
                        <div class="titulos_productos"><img src="imagenes/productTitle06.png" alt="Productos Gourmet" /></div>
                            <?php include("destilados.php"); ?>
                        </div>
                    </div>                  
                </div>
                <div class="bottom_contenido"></div>
            </div>
        </div>
 

En cada pagina de las categorias, hay una llamada a la base, que carga todos los productos correspondientes almacenados en la base, mas los select de orden y filtrado, mas el codigo javascript que se activa cuando se usa uno de estos select, llamando a otra pagina externa (*) en donde se encuentra la nueva llamada a la base correspondiente al filtrado.

(*) Existen 3 de estas paginas por categoria, que contienen la llamada a la base como dije anteriormente. La opcion de orden y filtrado es por precio, cepa y bodega (se trata de un negocio de bebidas). Estas se cargan en un div contenedor que se encuentra en la pagina de principal de la categoria, es decir que va recargando todo en este div.

Mi problema, lo que necesito poder hacer, es que a la hora de usar un select, cuando se active el codigo load para cargar la pagina externa; se tome el valor de select, segun lo elegido, y pasarlo a la pagina externa,para asi poder pasarlo a codigo php, y usarlo a la hora de llamar a la base, para asi poder filtrar el resultado segun lo deseado.

Suena muy facil, pero la verdad me esta dando muchos dolores de cabeza, jajaja...

[Nemutagk]

O.O, posteas el código html pero el que importa lo omites, tu problema claramente es javascript y es el código que deberías a ver posteado

[NnikoO]

El codigo esta posteado desde el principio, siempre señale que el problema estaba ahi..

[Nemutagk]

Si el código que posteaste al comienzo es todo lo que tienes en javacript no se como pretendes obtener el dato seleccionado del "select" si no recoges su valor, el hecho que mandes a llamar una función desde un option no quiere decir que al seleccionar esa opción javascript automáticamente tomara su valor, para eso debes leer el valor al tag select no al option, ahora, desde el comienzo el código que yo te publique es el correcto, en vez de mostrar un alert ejecutas una petición asíncrona enviando el valor del select a tu archivo 'tintos_ordencepa.php'

Código Javascript:

$('#orden').change(function() {
     $.ajax({
          type:'get',
          url:'tintos_ordencepa.php',
          data:'ordencepa=' + $('#orden  option:selected').html(),
          cache:false,
          success: function(datos) {
               $("#vistaproductos").html(datos);
          }
     });
});
 

Pero veo que ni intentaste adaptar y probar el código =/

[NnikoO]

No pretendia obtenerlo, deje en claro que nomas postie el codigo "pelado" porque todo lo que habia probado no me funciono o no supe hacerlo funcionar. Y si probe, pero repito, seguro no supe como hacerlo funcionar, me especializo en php con mysql mas que nada.
Ahora con tu codigo voy a probarlo, tendre que crear una variable para almacenar el valor del select, y despues pasarla a php para poder usarla a la hora de llamar a la base..

[Nemutagk]

Ahora con tu codigo voy a probarlo, tendre que crear una variable para almacenar el valor del select, y despues pasarla a php para poder usarla a la hora de llamar a la base..

o.O no tienes que crear nada, el código que publique es todo lo que debes tener como javascript, quita la función ordencepa() tanto del javascript como del onclick, y en el archivo tintos_ordencepa.php solo recoge la variable GET ordencepa...

[NnikoO]

la verdad me voy a volver loco, no carga nunca la pagina externa..

[Nemutagk]

o.O muestra lo que estas haciendo...

[NnikoO]

sigo los pasos que me indicaste..

Código PHP:

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
    $('#orden').change(function() {
         $.ajax({
              type:'get',
              url:'tintos_ordencepa.php',
              data:'ordencepa=' + $('#orden  option:selected').html(),
              cache:false,
              success: function(datos) {
                   $("#vistaproductos").html(datos);
              }
         });
    });
</script>
 
<form action="" method="get" name="ordenarporcepa">
  <label for="select" class="label_filtros">Ordenar por:</label>
  Cepa:
    <select name="ordencepa" id="orden">
    <?php
        $con = mysql_query("SELECT DISTINCT cepa FROM productos WHERE categoria LIKE '%$vinostintos%' ORDER BY cepa ASC");
        while ($row = mysql_fetch_array($con)) {
        $cep = $row['cepa'];
    ?> 
    <option value="<?php $cep; ?>"><?php echo $cep; ?></option>
    <?php
        }
    ?>
</select>
</form>
 

[NnikoO]

sigo probando pero no hay caso..

[sergiop21]

Lo que puedes hacer, es crear un boton, y hace un onclick. ejemplo

Código PHP:

  <input type ="button" name="prueba" id="prueba" onclick= "enviar()"> 
   

y en js seria

Código PHP:

  <script>
       function enviar()
{
  var campo1 = document.getElementid("campo1").value;
 
document.location.href = "pagina2.php?campo1="+campo1;
}
</script> 
  

Espero que te sirva!!!

[NnikoO]

sergiop21 gracias por la respuesta! pero justamente no puedo usar boton :S sino ya de entrada lo tendria hecho sin problemas. hubiera hecho los 3 select dentro de un mismo formulario, y el boton para enviar la sentencia, pero, no quieren que haya ningun boton presente.

[NnikoO]

no se puede hacer sin el botón?

[Nemutagk]

Iniciado por NnikoO

sigo los pasos que me indicaste..

Código PHP:

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
    $('#orden').change(function() {
         $.ajax({
              type:'get',
              url:'tintos_ordencepa.php',
              data:'ordencepa=' + $('#orden  option:selected').html(),
              cache:false,
              success: function(datos) {
                   $("#vistaproductos").html(datos);
              }
         });
    });
</script>
 
<form action="" method="get" name="ordenarporcepa">
  <label for="select" class="label_filtros">Ordenar por:</label>
  Cepa:
    <select name="ordencepa" id="orden">
    <?php
        $con = mysql_query("SELECT DISTINCT cepa FROM productos WHERE categoria LIKE '%$vinostintos%' ORDER BY cepa ASC");
        while ($row = mysql_fetch_array($con)) {
        $cep = $row['cepa'];
    ?> 
    <option value="<?php $cep; ?>"><?php echo $cep; ?></option>
    <?php
        }
    ?>
</select>
</form>
 

¬¬ Amigo... necesitas leer la documentación de jquery....

Código PHP:

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
    $(document).ready(function() {
    $('#orden').change(function() {
         $.ajax({
              type:'get',
              url:'tintos_ordencepa.php',
              data:'ordencepa=' + $('#orden  option:selected').html(),
              cache:false,
              success: function(datos) {
                   $("#vistaproductos").html(datos);
              }
         });
    });
    });
</script>
 
<form action="" method="get" name="ordenarporcepa">
  <label for="select" class="label_filtros">Ordenar por:</label>
  Cepa:
    <select name="ordencepa" id="orden">
    <?php
        $con = mysql_query("SELECT DISTINCT cepa FROM productos WHERE categoria LIKE '%$vinostintos%' ORDER BY cepa ASC");
        while ($row = mysql_fetch_array($con)) {
        $cep = $row['cepa'];
    ?> 
    <option value="<?php $cep; ?>"><?php echo $cep; ?></option>
    <?php
        }
    ?>
</select>
</form>
 

Actualización: hay un error en el código...

Código Javascript:

//original
data:'ordencepa=' + $('#orden  option:selected').html(),
 
//correcto
data:'ordencepa=' + $('#orden  option:selected').val(),
 

[NnikoO]

Perdon, estoy de aca para alla con laburo y problemas personales, no lo hago a proposito. De todas formas, gracias por seguir Nemutagk. El script funciona cargando la pagina externa, al igual que mis ingertos, pero no realizan la sentencia. Para mi es por usar el metodo get, porque la url siempre es productos.php mas alla de la categoria en la que estemos, esta nunca se modifica agregando por ejemplo el: ordencepa="tanto". Eso razono yo.

[Nemutagk]

No es necesario indicarlo en la "url: 'tintos_ordencepa.php'", ya que por eso se agrega la opción "data:'ordencepa=' + $('#orden option:selected').html()", que para el caso es lo mismo que hacer "tintos_ordencepa.php?ordencepa=valor" solo que usando las propias herramientas que Jquery proporcionan, ahora, verifica bien en el archivo tintos_ordecepa.php que valor estas recibiendo en $_GET['ordencepa'] y publicalo aquí

[NnikoO]

Hago un echo de la variable que contiene $_GET['ordencepa'] y no muestra nada.

[Nemutagk]

mmm, no había checado la ultima versión de JQuery, pero hay cambios...

Código PHP:

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
    $(document).ready(function() {
    $('#orden').change(function() {
         var orden = $('#orden  option:selected').val();
         $.ajax({
              type:'get',
              url:'tintos_ordencepa.php',
              data:{ordencepa:orden} ,
              cache:false,
              success: function(datos) {
                   $("#vistaproductos").html(datos);
              }
         });
    });
    });
</script>
 
<form action="" method="get" name="ordenarporcepa">
  <label for="select" class="label_filtros">Ordenar por:</label>
  Cepa:
    <select name="ordencepa" id="orden">
    <?php
        $con = mysql_query("SELECT DISTINCT cepa FROM productos WHERE categoria LIKE '%$vinostintos%' ORDER BY cepa ASC");
        while ($row = mysql_fetch_array($con)) {
        $cep = $row['cepa'];
    ?> 
    <option value="<?php $cep; ?>"><?php echo $cep; ?></option>
    <?php
        }
    ?>
</select>
</form>
 

[NnikoO]

Ahora ni siquiera carga la pagina externa, no funciona ningun select (los otros 2 los deje con el codigo anterior, pero se ve que el codigo nuevo lo anula). Y la version de jquery que uso el diseñador es: jquery-1.6.1.min.js