Mostrando y ocultando partes de Form

ignacio85r · #1 (**permalink**) 04/06/2015, 05:58

Buenas muchachos. todo bien????
les consulto ya que no logro hacer que se muestre una parte de la web y no encuentro donde esta mi error.

la cuestion es mostrar el campo Tarjeta, Cbu o Efectivo, segun lo escogido en el select:

Código HTML:

Ver original<div class="form-group">
                    <label class="control-label col-xs-3">Medio de pago:</label>
                        <div class="col-xs-7 col-md-9">
                            <select class="form-control col-xs-3" name="medio de pago">
                              <option id="Tarjeta">Tarjeta de credito</option>
                              <option id="Debito">Debito en cuenta</option>
                              <option id="Efectivo">Efectivo</option>
                            </select>
                        </div>
                    </div>
                    <div id="Tc" class="form-group">
                        <label class="control-label col-xs-3">Nº Tarjeta:</label>
                        <div class="col-xs-7 col-md-9">
                            <input type="number" name="Nº Tarjeta" class="form-control" placeholder="Tarjeta(16)" title="Faltan los Numeros de tarjeta" required="">
                        </div>
                    </div>
                    <div id="Dc" class="form-group">
                        <label class="control-label col-xs-3">Nº Cbu:</label>
                        <div class="col-xs-7 col-md-9">
                            <input type="number" name="Nº Cbu" class="form-control" placeholder="Numero de CBU(22)" title="Faltan los Numeros de Cuenta" required="">
                        </div>
                    </div>
                    <div id="Pe" class="form-group">
                        <label class="control-label col-xs-3">Efectivo:</label>
                        <div class="col-xs-7 col-md-9">
                            <input type="number" name="Nº Cbu" class="form-control" placeholder="Numero de CBU(22)" title="Faltan los Numeros de Cuenta" required="">
                        </div>
                    </div>

Código Javascript:

Ver original$(document).ready(function(){
$("#form1").css("display","none");
$("#form2").css("display","none");
 
$("#Tc").css("display","none");
$("#Dc").css("display","none");
$("#Pe").css("display","none");
 
$("#emision").on("click", function(){
    $("#form1").css("display","block");
    $("#form2").css("display","none");
    $("#form2").prop('requiered', false);
});
$("#cotizacion").on("click", function(){
    $("#form2").css("display","block");
    $("#form1").css("display","none");
    $("#form1").prop('requiered', false);
});
 
$("#Tarjeta").on("click", function(){
    $("#Tc").css("display", "block");
    $("#Dc").css("display", "none");
    $("#Pe").css("display", "none");
});
 
$("#Debito").on("click", function(){
    $("#Tc").css("display", "none");
    $("#Dc").css("display", "block");
    $("#Pe").css("display", "none");
});
 
$("#Efectivo").on("click", function(){
    $("#Tc").css("display", "none");
    $("#Dc").css("display", "none");
    $("#Pe").css("display", "block");
});
 
});

desde ya muchas gracias!! saludos!!

Alexis88 · #2 (**permalink**) 04/06/2015, 11:55

Las opciones de un <select> trabajan con valores, no con identificadores.

ignacio85r · #3 (**permalink**) 04/06/2015, 13:10

explicame... como es eso?? o donde ver al respecto documentacion??

Alexis88 · #4 (**permalink**) 04/06/2015, 13:19

Lo que quiero decir es que, en lugar de trabajar con las opciones del <select> mediante un id para cada una de ellas, debes de usar el atributo value que es el que normalmente se usa.

Por ejemplo, si en el siguiente <select> selecciono la segunda opción, el valor del <select> será "bar".

Código HTML:

Ver original<select>
    <option value = "foo">Foo</option>
    <option value = "bar">Bar</option>
    <option value = "bin">Bin</option>
    <option value = "baz">Baz</option>
</select>

Entonces, lo que te conviene es trabajar con el evento change en el <select>, de tal modo que cuando selecciones una de las opciones, se disparará dicho evento y podrás ejecutar una función con el valor que poseerá el <select>.

Saludos

ignacio85r · #5 (**permalink**) 05/06/2015, 09:05

gracias por tu respuesta Alexis.
entonces el codigo me quedaria asi?? obviamente agregando display none en el html...

Código HTML:

 <div class="form-group" name="pago" id="pagar">
                    <label class="control-label col-xs-3">Medio de pago:</label>
                        <div class="col-xs-7 col-md-9">
                            <select id="medioDePago" class="form-control col-xs-3" name="Medio de pago">
                              <option value="" selected>Despliegue Aqui</option>
                              <option value="Tarjeta">Tarjeta de credito</option>
                              <option value="Debito">Debito en cuenta</option>
                              <option value="Efectivo">Efectivo</option>
                            </select>
                        </div>
                    </div>
                    <div id="Tc" class="form-group" display="none">
                        <label class="control-label col-xs-3">Nº Tarjeta:</label>
                        <div class="col-xs-7 col-md-9">
                            <input type="text" name="Tarjeta" class="form-control" placeholder="Tarjeta(16)" title="Faltan los Numeros de tarjeta" required="">
                        </div>
                    </div>
                    <div id="Dc" class="form-group" display="none">
                        <label class="control-label col-xs-3">Nº Cbu:</label>
                        <div class="col-xs-7 col-md-9">
                            <input type="text" name="Cbu" class="form-control" placeholder="Numero de CBU(22)" title="Faltan los Numeros de Cuenta" required="">
                        </div>
                    </div>
                    <div id="Pe" class="form-group" display="none">
                        <label class="control-label col-xs-3">Efectivo:</label>
                        <div class="col-xs-7 col-md-9">
                            <input type="text" name="Efectivo" class="form-control" placeholder="Efectivo" title="Efectivo">
                        </div>
                    </div>

jquery:::

Código Javascript:

Ver original($document).ready(function(){
        $("#medioDePago").change(function(){
        if($("#medioDePago").attr("selected")){
            $("#Tc").css("display", "block");
        } else if ($("#medioDePago").attr("selected")){
            $("#Dc").css("display", "block");
        } else if ($("#medioDePago").attr("selected")){
            $("#Pe").css("display", "block");
        }
        });
    });

o nada que ver????

Alexis88 · #6 (**permalink**) 05/06/2015, 09:44

Nuevamente te lo digo: Trabaja con el valor seleccionado.

Código HTML:

Ver original<select id = "combo">
    <option value = "foo">Foo</option>
    <option value = "bar">Bar</option>
    <option value = "bin">Bin</option>
    <option value = "baz">Baz</option>
</select>

Código Javascript:

Ver original$("#combo").on("change", function(){
    alert(this.value); //El valor de la opción seleccionada
});

Saludos

ignacio85r · #7 (**permalink**) 06/06/2015, 17:38

pero por que con alert?? no es para mostraravisos de dialogo??

Alexis88 · #8 (**permalink**) 06/06/2015, 18:06

Es solo un ejemplo. Se supone que debes de adaptarlo a lo que necesitas.

ignacio85r · #9 (**permalink**) 08/06/2015, 11:24

lamentablemente no me doy cuenta como hacerlo ya que probe de varias formas y no me salio. :(

ignacio85r · #10 (**permalink**) 30/06/2015, 13:42

buenos dias gente... alguien me da una mano con esto o me explica... ya que Alexis no le entiendo...

gracias!!

PHPeros · #11 (**permalink**) 30/06/2015, 14:02

ignacio85r, no hagas bump, Alexis te lo explicó demasiado bien, seguro que ni te has molestado en entenderlo

Cada etiqueta option de un select debe tener un atributo value asociado. Cuando el usuario modifica o selecciona una de esas opciones el evento change del select se dispara y entonces el value de la opción seleccionada queda reflejado en el valor del select.

En función de ese valor obtenido (this.value) muestras u ocultas los controles.

¿Sigues sin entenderlo?