Values of a Select - Javascript

Question

Values of a Select - Javascript

Navigation

#1 by (3 votes)

1

Unable to modify the HTML, only with Javascript perform the following operation:

I have a SELECT with four possibilities:

<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>

When submitting a form, you DO NOT have to allow me to send it if I choose the first option, by default, whose text is: "Choose one ...". How could that be controlled?

Code:

//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;
    }
}

Choose the option you choose to show me "The TYPE field should choose an option." in all options. What is the reason?

javascript select

asked by omaza1990 25.05.2017 в 14:10

source

1 answer

Delete PHP blank space CSS style does not work for me in Chrome

score 3 · Accepted Answer

This can be controlled without JavaScript, only with HTML and the required property of the fields to make them mandatory. What you should do is:

Make the select mandatory by setting the attribute required

Change the value of the "Choose one ..." option from "none" to simply "" (empty string)

If the browser supports HTML5 and required (all modern browsers), it will ensure that the form can not be sent until that drop-down list has a valid value (different from "").

Demo:

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

Now, if you do not want to change the HTML as you put in the comments below, and you want to solve the JavaScript function, the problem is easy to identify: The if in which you make the comparison is a bit weird and failure. Right now you do:

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

That mix of ! , variable, comparison and value is not good. It seems that the precedence of operators is playing you a trick (is running !document.getElementById("tipo").value before comparison == and that's why it will always be false). Instead it should be:

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

And it works as you can see in this demo:

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;
  }
}

document.querySelector("form").addEventListener("submit", function(e) {
	e.preventDefault();
});

<form>
  <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>
  <div id="errores"></div>
  <input type="submit" value="enviar">
</form>