0

tengo que hacer un proyecto donde si selecciono tarjeta me aparezca el campo para introducir el numero y si elijo paypal desaparezca ese campo y aparezca para introuducir el email. Luego tengo que validar los campos

            <div class="row">
                <div class="form-group col-xs-18 col-sm-10 col-md-88">

                    <label for="payment">Tipo de tarjeta: *</label>
                    <select id="prueba">
                        <option value="VISA" id="visa">VISA</option>
                        <option value="Mastercard" id="mcard">Mastercard</option>
                        <option value="Paypal" id="paypal">Paypal</option>
                    </select>

                </div>
            </div>


            <div class="row">
                <div class="form-group CVV col-xs-18 col-sm-10 col-md-8">
                    <label for="ccv">Numero de tarjeta *</label>
                    <input type="text" id="cc-number" name="cc_number" class="form-inline"
                        placeholder="9999-9999-9999-9999" minlength="16" maxlength="16" required>

                </div>
            </div>

Este es mi código de script


        $(document).ready(function () {

            $('#registration').bootstrapValidator({
                feedbackIcons: {
                    valid: 'glyphicon glyphicon-ok',
                    invalid: 'glyphicon glyphicon-remove',
                    validating: 'glyphicon glyphicon-refresh'
                },
                fields: {
                    name: {
                        message: 'The username is not valid',
                        validators: {
                            notEmpty: {
                                message: 'The username is required and cannot be empty'
                            },
                            stringLength: {
                                min: 3,
                                max: 15,
                                message: 'The username must be more than 3 and less than 15 characters long'
                            },
                            regexp: {
                                regexp: /^[a-zA-Z0-9]+$/,
                                message: 'The username can only consist of alphabetical and number'
                            },
                            different: {
                                field: 'password',
                                message: 'The username and password cannot be the same as each other'
                            }
                        }
                    },
                    email: {
                        validators: {
                            notEmpty: {
                                message: 'The email address is required and cannot be empty'
                            },
                            emailAddress: {
                                message: 'The email address is not a valid'
                            }
                        }
                    },
                    password: {
                        validators: {
                            notEmpty: {
                                message: 'The password is required and cannot be empty'
                            },
                            different: {
                                field: 'username',
                                message: 'The password cannot be the same as username'
                            },
                            stringLength: {
                                min: 8,
                                max: 15,
                                message: 'The password must have at least 8 characters and maximum 15'
                            }
                        }
                    },
                    cc_number: {
                        validators: {
                            creditCard: {
                                message: 'The credit card number is not valid'
                            }
                        }
                    },
                    email_paypal: {
                        validators: {
                            notEmpty: {
                                message: 'The email address is required and cannot be empty'
                            },
                            emailAddress: {
                                message: 'The email address is not a valid'
                            }
                        }
                    }
                }
            });



            $('#prueba').change(function () {
                if ($(this).val() == "VISA") {
                    $('cc-number').show();
                    $('expiration-date').show();
                    $('email-paypal').hide();
                    $('validar').show();

                } else if ($(this).val() == "Mastercard") {

                    {
                        $('cc-number').show();
                        $('expiration-date').show();
                        $('email-paypal').hide();
                        $('validar').show();
                    }
                }

                else {

                        $('cc-number').hide();
                        $('expiration-date').hide();
                        $('email-paypal').show();
                        $('validar').show();

                }




            });

            $('#prueba').trigger("change");

        });



    </script>

Para validar he usado un validador de bootstrap pues con javascript me daba errores.

La parte de cambiar no me funciona y no veo errores con el inspeccionar elemento y ya no sé que hacer para que me ejecute ambas, he probado hacer un script solo de eso al inicio y tampoco, estoy muy perdido la verdad.

Gracias de antemano.

1 respuesta 1

0

Bienvenido a la comunidad, lo que necesitas si no mal entiendo es que cuando el << select >> cambie, inicies el evento "change", recuerda que si necesitas llamar un elemento por su id, se tiene que poner '#' antes y si lo llamas por su clase un '.'

//

$('#tipoTarjeta').on('change', function(value) {
      console.log('el valor seleccionado es: '+this.value );
      /*Aqui van tus eventos cuando una opción esté seleciconada*/
      
      if(this.value == 'VISA' || this.value == 'Mastercard'){
      $('#nTarjetDiv').show();
       $('#nEmailDiv').hide();
      }else{
       $('#nTarjetDiv').hide();
       $('#nEmailDiv').show();
      }
    
      
    });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row">
                <div class="form-group col-xs-18 col-sm-10 col-md-88">

                    <label for="payment">Tipo de tarjeta </label>
                    <select id="tipoTarjeta">
                        <option value="VISA" id="visa">VISA</option>
                        <option value="Mastercard" id="mcard">Mastercard</option>
                        <option value="Paypal" id="paypal">Paypal</option>
                    </select>

                </div>
            </div>
            
            <div class="row">
                <div class="form-group CVV col-xs-18 col-sm-10 col-md-8" id="nTarjetDiv">
                    <label for="ccv">Numero de tarjeta *</label>
                    <input type="text" id="cc-number" name="cc_number" class="form-inline"
                        placeholder="9999-9999-9999-9999" minlength="16" maxlength="16" required>

                </div>
                
                <div class="form-group CVV col-xs-18 col-sm-10 col-md-8" id="nEmailDiv" style="display:none">
                    <label for="ccv">Email *</label>
                    <input type="email" name="cc_number" class="form-inline"
                        placeholder="[email protected]" minlength="16" maxlength="16" required>

                </div>
            </div>

Espero te sirva de ayuda.

7
  • Muchísimas gracias, pero no se ni el comentario me lo ha escrito antes o después de que editara la página. Pero, en la consola se me van a hacer efectivos los cambios? He actualizado el código para que se vea mejor el 18 oct. 2019 a las 21:34
  • @NetbeansNoob ¿A que te refieres con "en la consola se me van a hacer efectivos los cambios"? el 18 oct. 2019 a las 21:38
  • Perdona es que estoy frustrado porque llevo horas con esto, soy estudiante de programación, y no sé si se me entiende. El objetivo del proyecto es un formulario de pago con un desplegable que si selecciono VISA/MASTERCARD me aparezca el nºtarjeta y la fecha de expiracion y si clico en paypal desaparezca eso y aparezca un input para escribir un email el 18 oct. 2019 a las 21:46
  • @NetbeansNoob Ya he actualizado mi respuesta, con el resultado que necesitas, si es correcta, favor de marcarla como correcta, saludos. el 18 oct. 2019 a las 21:55
  • Pese a que aquí funciona, en mi proyecto sigue sin funcionar, puede ser por la función que hay antes que valida campos? el 18 oct. 2019 a las 22:12

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.