Validación de una lista select

omdsetenta · #1 (**permalink**) 22/05/2014, 05:22

Hola a todos. Primero que programo en php así que no estoy muy familiarizado con js.
Tengo un formulario con 2 listas select comunes y un botón de enviar. La información de lo seleccionado en estas listas es enviado a otra pagina.
Me gustaría saber como hago para anular el botón de enviar hasta que se hallan seleccionado un elemento de cada lista. Estuve intentando algo, pero se me complicó bastante.
Logicamente lo estoy intentando hacer con formularios, listas select y codigo standard, aún no aplico nada en mi web. Y no pasa nada aún. El codigo js está en el encabezado y el código html en body

Cita:

Creo que la parte que esta mal es esta "formulario.boton.disabled = true; ", no se como desactivar el botón cuando no se ha seleccionado nada. O sea, la palabra "formulario" me parece que no va, no se como llegar al botón.
Muchas gracias por las futuras colaboraciones.

quimfv · #2 (**permalink**) 22/05/2014, 06:25

Temas que deberias mirarte:
Modelo de eventos de html.
Funciones javascript.

Código HTML:

Ver original<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Documento sin t&iacute;tulo</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language="Javascript">
// Creamos una función que mira si los dos selects han sido elegidos
// Esta es lanzada cada vez que se produce el evento "onChange" de los selects, es decir en el momento que puede haber cambiado la situación
function valida(){
    var indice = document.getElementById("opciones").selectedIndex;
    var indice2 = document.getElementById("opciones2").selectedIndex;
    if( indice != 0 && indice2 != 0) {
        document.getElementById("boton").disabled=false;
    }else{
        document.getElementById("boton").disabled=true;
    }
}
</script>
 
</head>
 
<body>
<form action="" id="form">
<select id="opciones" name="opciones" onChange="valida()">
<option value="0" selected>- Selecciona un valor -</option>
<option value="1">Primer valor</option>
<option value="2">Segundo valor</option>
<option value="3">Tercer valor</option>
</select>
 
<select id="opciones2" name="opciones2" onChange="valida()">
<option value="0" selected>- Selecciona un valor -</option>
<option value="4">Cuarto valor</option>
<option value="5">Quinto valor</option>
<option value="6">Sexto valor</option>
</select>
 
<input type="submit" id = "boton" name="boton" value="Enviar" disabled />
 
</form>
</body>
</html>