2

Quisiera saber quien me puede ayudar con el siguiente código, tengo un formulario en el cual quisiera lograr que al escoger la opción de soy asociado el input cédula quede activado y de lo contrario si la opción seleccionada es no soy asociado se desactive y deje ingresar los demás campos

Código HTML

 $('#select').on('change',function(){
        var selectValor = $(this).val();
        alert (selectValor);

        if (selectValor == 'opc1') {
            $('.cedula')addClass('.oculto');
        }else {
            alert('esta es la opcion 2')
        }
    });
.oculto{
	display: none;
}
<section>
    <div class="container container-form pb-5">
    <div class="row">
      <div class=" formulario col-12">
        <form id="contact-form" name="contact-form" >
          <div class="row" >

            <div class="col-12">
              <div class="form-group">
                <select class="form-control" name="select" id="select">
                  <option value="">¿Es Asosiado?</option>
                  <option value="opc1">Soy Asosiado</option>
                  <option value="opc2">No soy Asosiado</option>
                </select>
               </div>
             </div> 
              
             <div class="col-md-6 cedula">
                  <div class="form-group mb-5">
                      <input type="text" id="name" name="name" class="form-control" placeholder="Cedula">
                      
                  </div>
              </div>

             <div class="col-md-6 nombre " >
                  <div class="form-group mb-5">
                      <input type="text" id="name" name="name" class="form-control" placeholder="Nombre Completo">
                      
                  </div>
              </div>
              <div class="col-md-6">
                  <div class="form-group mb-5">
                      <input type="tel" id="phone" name="telefono" class="form-control" placeholder="Télefono/Celular">
                     
                  </div>
              </div>
               <div class="col-md-6">
                  <div class="form-group mb-5">
                      <input type="text" id="email" name="email" class="form-control" placeholder="Correo">
                     
                  </div>
              </div>
              <div class="col-md-6">
                  <div class="form-group mb-5">
                      <input type="text" id="name" name="name" class="form-control" placeholder="Departamento">
                     
                  </div>
              </div>
             
          </div>
            </form>

            
      </div>
    </div>
    </div>
  </section>

2 respuestas 2

5

Tienes varios errores en tu código

  • el addClass debería anteponerse por un punto (.) de lo contrario te dará error.
  • no necesitas crear una clase oculto cuando JQuery tiene las funciones necesarias para esconder o mostrar elementos.

Te adjunto el código

$('#select').on('change',function(){
        var selectValor = $(this).val();
        //alert (selectValor);

        if (selectValor == 'opc1') {
            $('.cedula').show();
        }else {
          $('.cedula').hide();
            //alert('esta es la opcion 2')
        }
    });
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container mt-3">
  <section>
    <div class="container container-form pb-5">
    <div class="row">
      <div class=" formulario col-12">
        <form id="contact-form" name="contact-form" >
          <div class="row" >

            <div class="col-12">
              <div class="form-group">
                <select class="form-control" name="select" id="select">
                  <option value="">¿Es Asosiado?</option>
                  <option value="opc1">Soy Asosiado</option>
                  <option value="opc2">No soy Asosiado</option>
                </select>
               </div>
             </div> 
              
             <div class="col-md-6 cedula">
                  <div class="form-group mb-5">
                      <input type="text" name="name" class="form-control" placeholder="Cedula">
                      
                  </div>
              </div>

             <div class="col-md-6 nombre " >
                  <div class="form-group mb-5">
                      <input type="text" id="name" name="name" class="form-control" placeholder="Nombre Completo">
                      
                  </div>
              </div>
              <div class="col-md-6">
                  <div class="form-group mb-5">
                      <input type="tel" id="phone" name="telefono" class="form-control" placeholder="Télefono/Celular">
                     
                  </div>
              </div>
               <div class="col-md-6">
                  <div class="form-group mb-5">
                      <input type="text" id="email" name="email" class="form-control" placeholder="Correo">
                     
                  </div>
              </div>
              <div class="col-md-6">
                  <div class="form-group mb-5">
                      <input type="text" id="name" name="name" class="form-control" placeholder="Departamento">
                     
                  </div>
              </div>
             
          </div>
            </form>

            
      </div>
    </div>
    </div>
  </section>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Nos comentas si es lo que buscas colega :)

2

Tienes errores puntuales, como por ejemplo hace falta el punto de separación para utilizar el método addClass y añadir una clase, además este método acepta el nombre de la clase tal cuál sin el punto adiciona, como se hace referencia en CSS para las clases.

.addClass('oculto');

La validación está mal, la opc1 pertenece a "soy asociado" por lo cuál ahí deberías remover la clase y no añadirla, y en el else hacer lo contrario.

Ejm

$('#select').on('change',function(){
	var selectValor = $(this).val();
	if (selectValor == 'opc1') {
			$('.cedula').removeClass('oculto');
	}else {
		$('.cedula').addClass('oculto');
	}
});
.oculto{
	display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section>
    <div class="container container-form pb-5">
    <div class="row">
      <div class=" formulario col-12">
        <form id="contact-form" name="contact-form" >
          <div class="row" >

            <div class="col-12">
              <div class="form-group">
                <select class="form-control" name="select" id="select">
                  <option value="">¿Es Asociado?</option>
                  <option value="opc1">Soy Asociado</option>
                  <option value="opc2">No soy Asociado</option>
                </select>
               </div>
             </div> 
              
             <div class="col-md-6 cedula">
                  <div class="form-group mb-5">
                      <input type="text" id="name" name="name" class="form-control" placeholder="Cedula">
                      
                  </div>
              </div>

             <div class="col-md-6 nombre " >
                  <div class="form-group mb-5">
                      <input type="text" id="name" name="name" class="form-control" placeholder="Nombre Completo">
                      
                  </div>
              </div>
              <div class="col-md-6">
                  <div class="form-group mb-5">
                      <input type="tel" id="phone" name="telefono" class="form-control" placeholder="Télefono/Celular">
                     
                  </div>
              </div>
               <div class="col-md-6">
                  <div class="form-group mb-5">
                      <input type="text" id="email" name="email" class="form-control" placeholder="Correo">
                     
                  </div>
              </div>
              <div class="col-md-6">
                  <div class="form-group mb-5">
                      <input type="text" id="name" name="name" class="form-control" placeholder="Departamento">
                     
                  </div>
              </div>
             
          </div>
            </form>

            
      </div>
    </div>
    </div>
  </section>

Además este funcionamiento se puede lograr utilizando el método toggleClass() pasando como segundo parámetro la validación selectValor != 'opc1'

 $('#select').on('change',function(){
  var selectValor = $(this).val();
  if(selectValor){
    $('.cedula').toggleClass('oculto',(selectValor != 'opc1'));
  }else{
    alert("seleccione una opción ");
  }
});
.oculto{
	display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<section>
	<div class="container container-form pb-5">
	<div class="row">
		<div class=" formulario col-12">
			<form id="contact-form" name="contact-form" >
				<div class="row" >

					<div class="col-12">
						<div class="form-group">
							<select class="form-control" name="select" id="select">
								<option value="">¿Es Asociado?</option>
								<option value="opc1">Soy Asociado</option>
								<option value="opc2">No soy Asociado</option>
							</select>
							</div>
						</div> 
						
						<div class="col-md-6 cedula">
								<div class="form-group mb-5">
										<input type="text" id="name" name="name" class="form-control" placeholder="Cedula">
										
								</div>
						</div>

						<div class="col-md-6 nombre " >
								<div class="form-group mb-5">
										<input type="text" id="name" name="name" class="form-control" placeholder="Nombre Completo">
										
								</div>
						</div>
						<div class="col-md-6">
								<div class="form-group mb-5">
										<input type="tel" id="phone" name="telefono" class="form-control" placeholder="Télefono/Celular">
										
								</div>
						</div>
							<div class="col-md-6">
								<div class="form-group mb-5">
										<input type="text" id="email" name="email" class="form-control" placeholder="Correo">
										
								</div>
						</div>
						<div class="col-md-6">
								<div class="form-group mb-5">
										<input type="text" id="name" name="name" class="form-control" placeholder="Departamento">
										
								</div>
						</div>
						
				</div>
					</form>

					
		</div>
	</div>
	</div>
</section>

Sin utilizar clases, también se puede utilizar el método toggle() para mostrar y ocultar elementos pasando como parámetro la validación selectValor == 'opc1'

 $('#select').on('change',function(){
  var selectValor = $(this).val();
  if(selectValor){
    $('.cedula').toggle(selectValor == 'opc1');
  }else{
    alert("seleccione una opción ");
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section>
	<div class="container container-form pb-5">
	<div class="row">
		<div class=" formulario col-12">
			<form id="contact-form" name="contact-form" >
				<div class="row" >

					<div class="col-12">
						<div class="form-group">
							<select class="form-control" name="select" id="select">
								<option value="">¿Es Asociado?</option>
								<option value="opc1">Soy Asociado</option>
								<option value="opc2">No soy Asociado</option>
							</select>
							</div>
						</div> 
						
						<div class="col-md-6 cedula">
								<div class="form-group mb-5">
										<input type="text" id="name" name="name" class="form-control" placeholder="Cedula">
										
								</div>
						</div>

						<div class="col-md-6 nombre " >
								<div class="form-group mb-5">
										<input type="text" id="name" name="name" class="form-control" placeholder="Nombre Completo">
										
								</div>
						</div>
						<div class="col-md-6">
								<div class="form-group mb-5">
										<input type="tel" id="phone" name="telefono" class="form-control" placeholder="Télefono/Celular">
										
								</div>
						</div>
							<div class="col-md-6">
								<div class="form-group mb-5">
										<input type="text" id="email" name="email" class="form-control" placeholder="Correo">
										
								</div>
						</div>
						<div class="col-md-6">
								<div class="form-group mb-5">
										<input type="text" id="name" name="name" class="form-control" placeholder="Departamento">
										
								</div>
						</div>
						
				</div>
					</form>

					
		</div>
	</div>
	</div>
</section>

4
  • 2
    No sería más eficiente utilizar el hide/show? ya que el OP sólo está tratando de esconder un elemento; se justificaría si además de esconderlo quisiera agregarle nuevas características al input no? el 18 feb. 2019 a las 16:57
  • 1
    @PauloUrbanoRivera Sí, eso añadió en su respuesta, no iba a duplicarla, solo quería mostrar donde falla y como podría hacerse de las dos formas posibles. Utilizando clases y cuando no se desea hacerlo.
    – Dev. Joel
    el 18 feb. 2019 a las 17:04
  • 1
    @Jessicaquintero qué bueno que mi respuesta pueda ayudarle, recuerde si la respuesta te sirvió y/o solucionó el problema, puedes marcarla como aceptada.
    – Dev. Joel
    el 18 feb. 2019 a las 18:00
  • 1
    @Dev.Joel Aclarado colega :) Muy buena respuesta el 18 feb. 2019 a las 18:05

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

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