Valores de un Select – Javascript

publicado por: Anonymous

Sin poder modificar el HTML, solamente con Javascript realizar la siguiente operación:

Tengo un SELECT con cuatro posibilidades:

<select name="tipo" id="tipo">
    <option selected value="none">Elige uno...</option>         
    <option value="rock">Rock</option>
    <option value="pop">Pop</option>
    <option value="punk">Punk</option>
    <option value="indie">Indie</option>
</select>   

A la hora de enviar un formulario, NO me tiene que permitir enviarlo si elijo la primera opción, por defecto, cuyo texto es: “Elige uno…”. ¿Cómo podría controlarse eso?

Código:

//Función que comprueba que no se elige la opción por defecto "Elige uno...".
function comprobarTipo(){
    if (!document.getElementById("tipo").value=="none"){ //Para comparar con el texto sería: .text="Elige uno..."
        var tipo = document.getElementById('tipo').value;
        return true;
    }else{
        document.getElementById("errores").innerHTML="El campo TIPO debe elegir una opción.";
        document.getElementById("tipo").focus();
        return false;
    }
}

Elija la opción que elija me muestra “El campo TIPO debe elegir una opción.” en todas las opciones. ¿A qué se debe?

solución

Esto se puede controlar sin necesidad de JavaScript, sólo con HTML y la propiedad required de los campos para hacerlos obligatorios. Lo que tendrías que hacer es:

  1. Hacer que el select sea obligatorio poniéndole el atributo required
  2. Cambiar el valor de la opción “Elige uno…” de “none” a simplemente “” (cadena vacía)

Si el navegador soporta HTML5 y required (todos los navegadores modernos), se encargará de que el formulario no se pueda enviar hasta que esa lista desplegable tenga un valor válido (diferente de “”).

Demo:

_x000D_

_x000D_

<form>_x000D_
  <select name="tipo" id="tipo" required>_x000D_
    <option selected value="">Elige uno...</option>_x000D_
    <option value="rock">Rock</option>_x000D_
    <option value="pop">Pop</option>_x000D_
    <option value="punk">Punk</option>_x000D_
    <option value="indie">Indie</option>_x000D_
  </select>_x000D_
  <input type="submit" value="enviar">_x000D_
</form>

_x000D_

_x000D_

_x000D_


Ahora, si no quieres cambiar el HTML como pones en los comentarios abajo, y lo que quieres es solucionar la función JavaScript, el problema es fácil de identificar: El if en el que haces la comparación es un poco raro y falla. Ahora mismo haces:

if (!document.getElementById("tipo").value=="none"){ 

Esa mezcla de !, variable, comparación y valor no es buena. Parece que la precedencia de operadores te está jugando una mala pasada (se está ejecutando !document.getElementById("tipo").value antes de la comparación == y por eso siempre va a ser falso). En su lugar debería ser:

if (document.getElementById("tipo").value!="none"){ 

Y ya funciona como puedes ver en esta demo:

_x000D_

_x000D_

function comprobarTipo() {_x000D_
  if (document.getElementById("tipo").value != "none") { //Para comparar con el texto sería: .text="Elige uno..."_x000D_
    var tipo = document.getElementById('tipo').value;_x000D_
    return true;_x000D_
  } else {_x000D_
    document.getElementById("errores").innerHTML = "El campo TIPO debe elegir una opción.";_x000D_
    document.getElementById("tipo").focus();_x000D_
    return false;_x000D_
  }_x000D_
}_x000D_
_x000D_
document.querySelector("form").addEventListener("submit", function(e) {_x000D_
	e.preventDefault();_x000D_
});

_x000D_

<form>_x000D_
  <select name="tipo" id="tipo">_x000D_
    <option selected value="none">Elige uno...</option>_x000D_
    <option value="rock">Rock</option>_x000D_
    <option value="pop">Pop</option>_x000D_
    <option value="punk">Punk</option>_x000D_
    <option value="indie">Indie</option>_x000D_
  </select>_x000D_
  <div id="errores"></div>_x000D_
  <input type="submit" value="enviar">_x000D_
</form>

_x000D_

_x000D_

_x000D_

Respondido por: Anonymous

Leave a Reply

Your email address will not be published. Required fields are marked *