0

Hola soy nuevo en este foro, les comento que estoy implementando un sistema de registro de mascotas, que al momento de dar click en varios debe de desplegarse un input text, he tratado de hacerlo con onclick y no funciona, les pido sugerencias.


<div class="form-group col-12 col-md-4">
                  <label for="raza-mascota">Raza</label>
                  <select
                    data-toggle="tooltip"
                    data-placement="bottom"
                    title="Este campo es obligatorio"
                    class="form-control"
                    id="razaMascotaRegistra"
                    onchange="addCleseRazaRegistra ()"

                  >
                    <option value="" >-Raza-</option>
                    <option value="2" >Schnauzer</option>
                    <option value="3" >Cruzado</option>
                    <option value="4" >Otros</option>
                  </select>
                </div>  
<div class="form-row mb-3 justify-content-center d-none" id="razaOtroMascotaRegistra">
                <div class="form-group col-12 col-md-8 ">                      
                  <input                           
                    type="text"
                    class="form-control"                        
                    placeholder="* Especifica la raza de tu mascota"
                  />
                </div>
              </div>
function remCleseRazaRegistra() { 
var razaOtroMascotaRegistra = document.getElementById("razaOtroMascotaRegistra");
razaOtroMascotaRegistra.classList.remove("d-none");
};
10
  • que es lo que no funciona exactamente, lo digo por que veo el onchange que usas en el select pero la funcion addCleseRazaRegistra no la has colocado y no veo donde se utiliza el remCleseRazaRegistra....
    – persona_A
    Commented el 22 ago. 2019 a las 17:15
  • Te explico, al momento de enviar el formulario valida campos y nos envía mensajes de error uno de esos mensaje es si no selecciona una raza nos pide seleccionar raza, entonces al momento de seleccionar la raza debe de desaparecer dicho errot, ejemplo doy click en cruzado debe de desaparecer el mensaje que le pide seleccionar raza, ahora, el problema surge que cuando doy en otros debe de desaparecer el mensaje y aparecerme un cuadro txt para escribir la raza.. Commented el 22 ago. 2019 a las 17:21
  • y este error donde lo colocan? un span, label, p
    – persona_A
    Commented el 22 ago. 2019 a las 17:23
  • a ok en el input aparece el mensaje no?
    – persona_A
    Commented el 22 ago. 2019 a las 17:24
  • <div class="alert alert-danger d-none" id="mensajeErrorRazaReg" > Debe de seleccionar una raza </div> pero esto ya lo tengo Commented el 22 ago. 2019 a las 17:25

1 respuesta 1

1

La explicación esta en el código, cualquier duda hazla saber, también agregue desde el principio un style al div que sería style="display: none" para que este oculto desde que carga la página.

function addCleseRazaRegistra(){

  let valor = document.getElementById('razaMascotaRegistra').value; //obtenemos el valor del select
  
  console.log(valor);

  if(valor == 4){ // si es igual a 4 que significa "otro"
  
    document.getElementById('razaOtroMascotaRegistra').style.display = 'block'; //mostramos el id que contiene el input
  
  }else{
  
  document.getElementById('razaOtroMascotaRegistra').style.display = 'none';//si no lo volvemos a ocultar
  
  }

}
<div class="form-group col-12 col-md-4">
                  <label for="raza-mascota">Raza</label>
   <select  data-toggle="tooltip" data-placement="bottom" title="Este campo es obligatorio" class="form-control"  id="razaMascotaRegistra" onchange="addCleseRazaRegistra()"  >
                    <option value="" >-Raza-</option>
                    <option value="2" >Schnauzer</option>
                    <option value="3" >Cruzado</option>
                    <option value="4" >Otros</option>
                  </select>
                </div>  
<div class="form-row mb-3 justify-content-center d-none" id="razaOtroMascotaRegistra" style="display: none">
                <div class="form-group col-12 col-md-8 ">                      
 <input  type="text" class="form-control"placeholder="* Especifica la raza de tu mascota" />
                </div>
              </div>

2
  • 1
    Hola, muchísimas gracias, me funciono de maravilla... un fuerte abrazo desde Perú Commented el 22 ago. 2019 a las 21:07
  • De nada, buen día compañero! :) Commented el 22 ago. 2019 a las 21:22

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.