0

muy buenas a todos.

Estoy haciendo un formulario y con ello quiero agregar prefijos a un <input type="tel">.

El caso es que por cada una de las opciones necesito un input con pattern distinto y añadiendo el required.

HTML y JS

function showInp(){
  getSelectValue = document.getElementById("telprefix").value;
  if(select.salue==and){
    docuement.getElementById("andphone").style.display = "inline-block";
  }
   if(select.value==esp){
    docuement.getElementById("espphone").style.display = "inline-block";
  }
  
   if(select.value==fr){
    docuement.getElementById("frphone").style.display = "inline-block";
  }
}

if( document.getElementById("telprefix").value === "and"){
  docuement.getElementById("andphone").addAttribute("required");
  
}

if( document.getElementById("telprefix").value === "esp"){
  docuement.getElementById("espphone").addAttribute("required");
  
}

if( document.getElementById("telprefix").value === "fr"){
  docuement.getElementById("frphone").addAttribute("required");
  
}
<select name="telprefix" id="telprefix" onchange="showInp()">
    <option value="">--Prefix</option>
    <option value="and">+376</option>
    <option value="esp">+34</option>
    <option value="fr">+33</option>
    
  </select>
  
  <input id="andphone" type="tel" pattern="[3]{9}-[3]{9}" style="display: none"/>
  <input id="espphone" type="tel" pattern="[3]{9}-[3]{9}-[3]{9}" style="display: none"/>
  <input id="frphone" type="tel"  pattern="[1]{9}[3]{9}-[3]{9}-[3]{9}" style="display: none"/>

Obviamente no funciona porque no tengo ni idea de JavaScript. Si me podéis ayudar y explicar un poco cómo se hace sería de gran ayuda.

Muchas gracias de antemano,

Un saludo.

2 respuestas 2

1

Veo varios errores en tu código, principalmente de escribir mal una palabra, ten mucho cuidado con eso porque son errores que puedes arrastrar todo el código y luego no sabes qué es lo que falla.

El primer error es que estás creando la variable getSelectValue, sin embargo luego intentas utilizarla llamándola select. Además, en la variable almacenas el valor del value y luego intentas coger de nuevo el value de eso. Es decir, recoges el value obtienes el valor "and" e intentas coger el value de un string.

También comparas el string obtenido con variables que no existen. Si quieres saber si el valor obtenido es "and" debes compararlo con un string "and" y no con una variable and que no existe.

function showInp(){
  var getSelectValue = document.getElementById("telprefix").value;
  if(getSelectValue == "and"){
    docuement.getElementById("andphone").style.display = "inline-block";
  }
   if(getSelectValue == "esp"){
    docuement.getElementById("espphone").style.display = "inline-block";
  }

   if(getSelectValue == "fr"){
    docuement.getElementById("frphone").style.display = "inline-block";
  }
}

Además, durante todo el código está el error en que has escrito docuement, debería ser document. Al haber copiado y pegado una línea con este error, lo has arrastrado en el resto del código.

Así quedaría tu código funcionando, la teoría la has sabido poner en práctica, han sido errores al escribirlo:

function showInp(){
  var getSelectValue = document.getElementById("telprefix").value;

  if(getSelectValue=="and"){
    document.getElementById("andphone").style.display = "inline-block";
  }
   if(getSelectValue=="esp"){
    document.getElementById("espphone").style.display = "inline-block";
  }
  
   if(getSelectValue=="fr"){
    document.getElementById("frphone").style.display = "inline-block";
  }
}

if( document.getElementById("telprefix").value === "and"){
  document.getElementById("andphone").addAttribute("required");
  
}

if( document.getElementById("telprefix").value === "esp"){
  document.getElementById("espphone").addAttribute("required");
  
}

if( document.getElementById("telprefix").value === "fr"){
  document.getElementById("frphone").addAttribute("required");
  
}
<select name="telprefix" id="telprefix" onchange="showInp()">
    <option value="">--Prefix</option>
    <option value="and">+376</option>
    <option value="esp">+34</option>
    <option value="fr">+33</option>
    
  </select>
  
  <input id="andphone" type="tel" pattern="[3]{9}-[3]{9}" style="display: none"/>
  <input id="espphone" type="tel" pattern="[3]{9}-[3]{9}-[3]{9}" style="display: none"/>
  <input id="frphone" type="tel"  pattern="[1]{9}[3]{9}-[3]{9}-[3]{9}" style="display: none"/>

Ten en cuenta que el código fuera de la función nunca se ejecuta, es decir, los input nunca son required. Para ello deberías meter este código en la función.

Y sobre ocultar los inputs que no se utilizan, al ponerlo en inline-block sustituyes el que tienes en html por ese, por lo que deberías volver a decírselo.

Para que el código sea más limpio, lo he hecho todo en switch ya que creo que te podrá ayudar a mantenerlo en el futuro:

function showInp(){
  var getSelectValue = document.getElementById("telprefix").value;
  
  switch (getSelectValue) {
    case "and": 
      document.getElementById("andphone").style.display = "inline-block";
      document.getElementById("andphone").setAttribute("required", "required");
      document.getElementById("espphone").style.display = "none";
      document.getElementById("frphone").style.display = "none";
      break;
      
    case "esp":
      document.getElementById("espphone").style.display = "inline-block";
      document.getElementById("espphone").setAttribute("required", "required");
      document.getElementById("andphone").style.display = "none";
      document.getElementById("frphone").style.display = "none";
      break;
      
    case "fr":
      document.getElementById("frphone").style.display = "inline-block";
      document.getElementById("frphone").setAttribute("required", "required");
      document.getElementById("espphone").style.display = "none";
      document.getElementById("andphone").style.display = "none";
      break;
  }
}
<select name="telprefix" id="telprefix" onchange="showInp()">
    <option value="">--Prefix</option>
    <option value="and">+376</option>
    <option value="esp">+34</option>
    <option value="fr">+33</option>
    
  </select>
  
  <input id="andphone" type="tel" pattern="[3]{9}-[3]{9}" style="display: none"/>
  <input id="espphone" type="tel" pattern="[3]{9}-[3]{9}-[3]{9}" style="display: none"/>
  <input id="frphone" type="tel"  pattern="[1]{9}[3]{9}-[3]{9}-[3]{9}" style="display: none"/>

3
  • Qué cabeza la mía... Ahora la cosa está en que se siguen mostrando aunque cambies de prefijo. Cómo hago para que el js no predomine en el display y quede lo que le he puesto en el html?
    – Yuna Sch
    Commented el 13 mar. 2019 a las 11:51
  • Ya está editado y añadido eso :)
    – Rabegi
    Commented el 13 mar. 2019 a las 12:00
  • Estupendo, muchísimas gracias ^^
    – Yuna Sch
    Commented el 13 mar. 2019 a las 14:08
0

Lo primero que te diria es que revises tu codigo. Tienes muchisimos errores como docuement en lugar de document etc...

Respecto a tu pregunta, si obtienes el valor del select, es de tipo String (texto) y tienes que compararlo en el if con un valor igual.

Por otro lado, te recomiendo que ocultes los otros input cuando muestras uno nuevo. Puedes hacerlo en los if de uno en uno, o ocultarlos todos según llames a la función showinput y luego mostrar el necesario.

function showInp(){
  getSelectValue = document.getElementById("telprefix").value;
  if(getSelectValue=="and"){
    document.getElementById("andphone").style.display = "inline-block";
    document.getElementById("espphone").style.display = "none";
    document.getElementById("frphone").style.display = "none";
  }else if(getSelectValue=="esp"){
    document.getElementById("andphone").style.display = "none";
    document.getElementById("espphone").style.display = "inline-block";
    document.getElementById("frphone").style.display = "none";
  }else if(getSelectValue=="fr"){
    document.getElementById("andphone").style.display = "none";
    document.getElementById("espphone").style.display = "none";
    document.getElementById("frphone").style.display = "inline-block";
  }
}
<select name="telprefix" id="telprefix" onchange="showInp()">
    <option value="">--Prefix</option>
    <option value="and">+376</option>
    <option value="esp">+34</option>
    <option value="fr">+33</option> 
</select>

<input id="andphone" type="tel" pattern="[3]{9}-[3]{9}" style="display: none" placeholder="and"/>
<input id="espphone" type="tel" pattern="[3]{9}-[3]{9}-[3]{9}" style="display: none" placeholder="esp"/>
<input id="frphone" type="tel"  pattern="[1]{9}[3]{9}-[3]{9}-[3]{9}" style="display: none" placeholder="fr"/>

1
  • Muchísimas gracias. Sí, los que tocamos código no nos sienta bien la dislexia hahah. Gracias por responder y aportar la solución.
    – Yuna Sch
    Commented el 13 mar. 2019 a las 11:58

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.