Armar cotizacion e ir mostrando opciones laterales

JessicaTJ · #1 (**permalink**) 09/08/2010, 12:35

Hola chicos, disculpen, tengo una preguntita, estuve revisando esta pagina:

http://formaspace.com/quick-quote.php

Y me preguntaba si alguien de ustedes tiene alguna idea de como se puede hacer lo ke ahi se muestra, de ke en la parte derecha hay opciones y al ir eligiendo se muestran en la parte izquierda, en un div que actua como una "cotizacion"

Existe algo hecho que pueda desarmar para ver como funciona o alguno de ustedes chicos tiene idea de como hacerlo con jquery?

De antemano agradecere mil su ayuda !!!

Dany_s · #2 (**permalink**) 09/08/2010, 16:45

es un simple recuperar el valor o texto del input en un evento change y meterlo en algún lugar

Código Javascript:

Ver original<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
  <script>
$(function(){
 
    $('#producto').change( function (){
        $('#prod').text( $('option:selected' ,this).text() );
    });
 
    $('#cantidad').change( function (){
        $('#cant').text( $(this).val() );
    });
 
    $('input[name=ancho]').change( function (){
        $("#ancho").text( $(this).val() );
    });
    $('input[name=alto]').change( function (){
        $("#alto").text( $(this).val() );
    });
 
 
});
</script>
</head>
<body>
    Producto:
    <select id="producto">
        <option value="0">Seleccionar
        <option value="1">Producto 1
        <option value="2">Producto 2
        <option value="3">Producto 3
    </select>
    <br />
    Cantidad:
    <select id="cantidad">
        <option value="0">Seleccionar
        <option value="1">1
        <option value="2">2
        <option value="3">3
    </select>
    <br />
 
        Tamaño:<br />
        Ancho: 10<input type="radio" name="ancho" value="10"> 20<input type="radio" name="ancho" value="20"> 30<input type="radio" name="ancho" value="30"> <br />
        Altura: 10<input type="radio" name="alto" value="10"> 20<input type="radio" name="alto" value="20"> 30<input type="radio" name="alto" value="30">
 
        <h3>Pedido</h3>
        Producto: <span id="prod"></span><br />
        Cantidad: <span id="cant"></span><br />
        Tamaño: <span id="ancho"></span> - <span id="alto"></span>
 
 
</body>
</html>

JessicaTJ · #3 (**permalink**) 10/08/2010, 19:01

Hola Dany_s, mil mil super mil gracias !!!!! Me salvaste de una jijijiji, mil gracias de verdad !!!!!!

JessicaTJ · #4 (**permalink**) 11/08/2010, 14:01

Disculpa Dany_s, una preguntita mas, como le podria hacer para recuperar el valor de un campo <option> si al elegir el <select> se hace un refresh de la pagina?

Es decir, tengo esto:

Código HTML:

Ver original<select onChange="modelo(this.value)" id="tipo_producto">

Y al elegir una opcion me hace el refresh de la pagina, pero por ejemplo, al alegir:

Código HTML:

Ver original<option value="Mesa Basica" selected="selected">Mesa Basica</option>

Ke me recupere ese valor en el jquery? Es posible esto?

Disculpa que este de preguntona jijiji

JessicaTJ · #5 (**permalink**) 12/08/2010, 10:57

Disculpen chicos, alguna ideita que se pueda implementar para capturar el dato?

Dany_s · #6 (**permalink**) 13/08/2010, 04:32

lo mismo que cuando eligen pero en el ready

JessicaTJ · #7 (**permalink**) 13/08/2010, 13:36

Seria algo asi Dany_s:

Código Javascript:

Ver original$('#producto').ready( function (){
        $('#prod').text( $('option:selected' ,this).text() );
});

Sip?

Dany_s · #8 (**permalink**) 13/08/2010, 16:10

si, pero ahi el this no hace referencia a select

podes seleccionar todos y disparar un evento

$('#producto, #cantidad....').change();

tiene que estar después de haber asignado

JessicaTJ · #9 (**permalink**) 15/08/2010, 19:13

Disculpa Dany_s, pero nu entiendo del todo, podrias plis darme un ejemplo o explicarme un pokitito mas, por favor? Disculpa que sea tan preguntona ^^u

Dany_s · #10 (**permalink**) 17/08/2010, 04:46

ahi ya te puse

$('#producto').change();

eso hace que se genere un evento change en el select

poné eso al final y fijate

JessicaTJ · #11 (**permalink**) 17/08/2010, 13:04

Entonces seria algo asi dany?:

Código Javascript:

Ver original$('#tipo_producto').ready( function (){
        $('#quote_product').text( $('option:selected').text() );
        $('#quote_product').change();
    });

El HTML ke tengo es este:

Código HTML:

Ver original<select onChange="modelo(this.value)" name="tipo_producto" id="tipo_producto">
    <option>Por favor selecciona un modelo</option>
    <option value="Mesa Basica" selected="selected">Mesa Formaica Laminada</option>
    <option value="2">Mesa Antiestatica</option>
    <option value="3">Mesa Superficies de Acero</option>
    <option value="4">Mesa Superficies de Madera</option>
</select>
<select name="uso_destinado" id="uso_destinado">
    <option>Seleccione tipo de uso</option>
    <option value="1">Uso 1</option>
    <option value="2">Uso 2</option>
    <option value="3">Uso 3</option>
    <option value="4">Uso 4</option>
</select>
<select name="cantidad" id="cantidad">
      <option selected="selected">Seleccione Cantidad</option>
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
      <option value="4">4</option>
      <option value="5">5</option>
    </select>

Y lo ke me imprime en el DIV #quote_product es:
Mesa Formaica LaminadaSeleccione tipo de usoSeleccione CantidadSeleccione

Como tomandome los valores iniciales de los 3 selects, siendo ke no deberia de hacerlo

Dany_s · #12 (**permalink**) 17/08/2010, 15:27

con el evento en el select no, mejor js con js
y claro, te escribe todos los valores seleccionados por le estas pidiendo que te busque todos los option que están seleccionados
$('option:selected').text()
y debería ser
$('option:selected', this).text()

Código HTML:

Ver original<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
  <script>
$(function(){
    //Cuando cambian de opcion meto el texto en el span#quote_product
    $('#tipo_producto').change( function (){
        $('#quote_product').text( $('option:selected', this).text());
    });
    //Genero un evento change
    $('#tipo_producto').change();
 
});
</script>
</head>
<body>
 
<select name="tipo_producto" id="tipo_producto">
    <option>Por favor selecciona un modelo</option>
    <option value="Mesa Basica" selected="selected">Mesa Formaica Laminada</option>
    <option value="2">Mesa Antiestatica</option>
    <option value="3">Mesa Superficies de Acero</option>
    <option value="4">Mesa Superficies de Madera</option>
</select> <br />
 
    Tipo producto: <span id="quote_product"></span>
 
</body>
</html>

JessicaTJ · #13 (**permalink**) 17/08/2010, 21:19

Lo que pasa Dany es que el evento JS del select envia un GET a PHP para que despliegue la informacion de acuerdo al GET que envie, y lo necesito que este dentro del select ese evento, ese es el problema

Es este evento el que llama el select:

Código Javascript:

Ver original// Funcion Jumpmenus
function modelo(val){
    document.location = "cotiza.php?id="+val;
}

Si no si fuera como tu me comentas

Dany_s · #14 (**permalink**) 18/08/2010, 04:15

es lo mismo, mejor, son 2 cosas iguales

esto:
<select onChange="modelo(this.value)" id="tipo_producto">

es lo mismo que
$("#tipo_producto").change( function(){ ... });

vas a tener js separado del html

JessicaTJ · #15 (**permalink**) 18/08/2010, 10:53

Sipi, es como lo hice, pero el resultado es el mismo, envia el GET, pero el SPAN pierde el valor del field, aki lo puse para que puedas verlo trabajando Dany

http://www.netcostmro.com/pruebas.php

Disculpa en serio por preguntar tanto pero kiero entenderle bien para no estar enfadando al ratito jijiji

cloudandviator · #16 (**permalink**) 18/08/2010, 12:07

$("#quote_product").text($("#tipo_producto").val() );

JessicaTJ · #17 (**permalink**) 18/08/2010, 12:47

Gracias cloudandviator, pero sigue igualito, al hacer el refresh de la pagina sigue perdiendo el valor sin rescatarlo

Dany_s · #18 (**permalink**) 18/08/2010, 12:53

y claro, en la otra página que es lo que haces para saber cual option habias seleccionado?

no sé, hace algo con php, con javascrit o jquery, si estás pasando el id hace algo como $("#tipo_producto").val(elID); como gustes, depende que es lo que vas a hacer

esto no te va a disparar un evento change

Código Javascript:

Ver original$('#tipo_producto').change( function (){
      modelo(this.value);
});

para eso puse
$('#tipo_producto').change();

tu función modelo() ponelo donde mostras el texto en el span

no sirve mucho tener
$('#tipo_producto').change( function(){ algo... });
$('#tipo_producto').change( function(){ otra cosa... });

fijate un poco como funcionan los eventos, en la doc esta lleno de ejemplos

edito: ahi siempre vas a estar enviando la página asi que vas a tener que buscar otra solución, mejor en vez de disparar un evento change lo que podes hacer es tomar los valores de los campos y mostralos en el span en el ready

Dany_s · #19 (**permalink**) 18/08/2010, 13:13

mira, te paso algo pero código php mezclado con jquery jeje es una chanchada porque vas a tener que tener javascript en el html pero bueno...

Código Javascript:

Ver original<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(function(){
 
    $('#tipo_producto').val(<?php echo $_GET['id'] ?>)
    $('#tipo_producto').change( function (){
        $('#quote_product').text( $('option:selected', this).text());
        document.location = "pruebas.php?id="+$(this).val();
    });
 
    $('#quote_product').text( $('option:selected', this).text());
});
</script>
<title>Pruebas</title>
</head>
 
<body>
<select name="tipo_producto" id="tipo_producto">
    <option selected="selected">Por favor selecciona un modelo</option>
    <option value="1">Mesa Formaica Laminada</option>
    <option value="2">Mesa Antiestatica</option>
    <option value="3">Mesa Superficies de Acero</option>
    <option value="4">Mesa Superficies de Madera</option>
</select><br /><br />
    Tipo producto: <span id="quote_product"></span><br /><br />
Selecciona una opcion del menu, aqui se desplegara la informacion de acuerdo al ID obtenido por medio de GET</body>
 
</html>

tu select lo vas a generar con php? o sea los el texto y el id lo traes de una tabla de la base de datos?

Dany_s · #20 (**permalink**) 18/08/2010, 13:20

otra es esta para separar php del jquery

pones un campo oculto que en el value reciba lo de la cariable get, entonces cuando se carga la página seteas el select con el valor de ese campo oculto

Código HTML:

Ver original<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(function(){
 
    $('#tipo_producto').val( $('#id_productoOculto').val() )
 
    $('#tipo_producto').change( function (){
        $('#quote_product').text( $('option:selected', this).text());
        document.location = "prueba.php?id="+$(this).val();
    });
 
    $('#quote_product').text( $('option:selected', this).text());
});
</script>
<title>Pruebas</title>
</head>
 
<body>
 
    <input name="id_productoOculto" id="id_productoOculto" type="hidden" value="<?php echo $_GET['id'] ?>">
<select name="tipo_producto" id="tipo_producto">
    <option selected="selected">Por favor selecciona un modelo</option>
    <option value="1">Mesa Formaica Laminada</option>
    <option value="2">Mesa Antiestatica</option>
    <option value="3">Mesa Superficies de Acero</option>
    <option value="4">Mesa Superficies de Madera</option>
</select><br /><br />
    Tipo producto: <span id="quote_product"></span><br /><br />
Selecciona una opcion del menu, aqui se desplegara la informacion de acuerdo al ID obtenido por medio de GET</body>
 
</html>

JessicaTJ · #21 (**permalink**) 18/08/2010, 13:31

Ya me hice mas bolas XD

Entonces lo hare como no keria, con un switch de PHP, la verdad con JQuery apenas y me entiendo jijiji pero pokito a pokito voy entendiendole ^-^u

Si toy leyendo tambien pero a veces me hago mas bolas T-T

Dany_s · #22 (**permalink**) 18/08/2010, 13:34

y si suponemos que creamos el select con lo registros de un tabla en la base de datos, seguimos el rastro de la opción seleccionada con php por medio de la variable get 'id' y un condicional si la variable get es igual que el valor de option (o sea el id del registro) lo seleamos como 'selected', entonces cuando se carga el documento con jquery recupero el texto y lo meto en el span

acá simulo con un array los registro de un db

Código PHP:

Ver original<?php
    //Simulo que tengo algunos registros
    $productos = array(1 => 'Mesa Formaica Laminada', 2 => 'Mesa Antiestatica', 3 => 'Mesa Superficies de Acero', 4 => 'Mesa Superficies de Madera');
?>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(function(){
 
    $('#tipo_producto').change( function (){
        $('#quote_product').text( $('option:selected', this).text());
        document.location = "prueba.php?id="+$(this).val();
    });
 
    $('#quote_product').text( $('option:selected', this).text());
});
</script>
<title>Pruebas</title>
</head>
<body>
 
<select name="tipo_producto" id="tipo_producto">
    <option>Por favor selecciona un modelo</option>
    <?php foreach ($productos as $key => $value): ?>
    <option value="<?php echo $key ?>" <?php echo ($key == $_GET['id'])?"selected='selected'":""; ?>><?php echo $value ?></option>
    <?php endforeach ?>
</select><br /><br />
    Tipo producto: <span id="quote_product"></span><br /><br />
Selecciona una opcion del menu, aqui se desplegara la informacion de acuerdo al ID obtenido por medio de GET</body>
 
</html>

JessicaTJ · #23 (**permalink**) 18/08/2010, 13:48

Exactamente eso XD, taba mas dificil de lo ke creia jijiji, pero me pongo a estudiarlo bien para no estar de enfadosa en el futuro, de nuevo super mil mil gracias !!!!!!