[SOLUCIONADO] deshabilitar boton hasta completar todos los desplegables

luisitovarona · #1 (**permalink**) 17/05/2017, 02:24

Hola, Necesito de vuestra ayuda porque no consigo que funciones
Básicamente lo que necesito que hasta que no se selecciones los 3 desplegables de mi formulario, no se habilite el botón para enviar. Se entiende? Por Ejemplo

Código HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//es" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Botón Submit disabled con textBox y Select</title> 
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
 <script type="text/javascript">
//<![CDATA[
// Definimos los campos que se han de verificar, contruimos un array con los id de los mismos
var campos = ["campo1", "campo2"];
var c;
function activar() {
c = 0;
for(var i in campos){
i = parseInt(i);
var cadenaL = document.getElementById(campos[i]).value;
// hacemos un trim previo a la verificación
cadenaL = cadenaL.replace(/^\s+/g,'').replace(/\s+$/g,'')
if(cadenaL != ""){
c++; // incrementamos c por cada campo que no está vacío
}
if(c == (i+1)){ // si c es = al total de los campos habilitamos el submit
document.getElementById('envia').disabled = false;
}else{
document.getElementById('envia').disabled = true;
}
}
}
 
// la validación del select controla la habilitación de los campos de texto
function validar_select(){
var carga = document.getElementById('carga').value;
console.log(c + '-' +campos.length );
    if(carga != ""){
        for(var d in campos){
        document.getElementById(campos[d]).disabled = false;
        }
        if(c== campos.length){
        document.getElementById('envia').disabled = false; validar_select
        }
    }else{
        for(var d in campos){
        document.getElementById(campos[d]).disabled = true;
        }
        document.getElementById('envia').disabled = true;
    }
}
 
// agregamos el evento onkeyup dinamicamente a los campos requeridos
window.onload = function(){
    for(var e in campos){
    var elem = document.getElementById(campos[e]);
    if (elem.addEventListener){
    elem.addEventListener("keyup", function(){activar()}, false);
    }else{ // <IE9
        if (elem.attachEvent){
        elem.attachEvent ("onkeyup", function () {activar(elem)});
        }
    }
    }
}
 
//]]>
</script>

</head>
<body>
<form action="#" method="post" onsubmit="alert('Form procesado');">
 <table width="600" border="0" cellspacing="1" bgcolor="#014c8f" cellpadding="1" align="left">


 <td width="150"><select id="carga" name="carga" onchange="validar_select();">
<option value="">Selecciona El tipo de carga</option>
                   <optgroup label="Particular">
   <option value="1">Carga y pallets</option>
   </optgroup> 
   <optgroup label="Empresa"> 
   <option selected value="0"> Elige una opción </option>
                      <option value="1">Agencias Carga Completa</option>
                 
</select>
 
<select type="text" id="campo1" value="" disabled="disabled" onchange="validar_select();">
   <option selected value="0"> Carga de origen </option>
   <option value="1">ALAVA</option>
  
 </select>
<select type="text" id="campo2" value="" disabled="disabled" onchange="validar_select();">
   <option selected value="0"> Carga de destino </option>
   <option value="1">ALAVA</option>
  
 </select>

 <input type="submit" id="envia" name="envia" value="procesar" disabled="disabled"/>

</table> 
</form>
</body>
</html>

Mi objetivo es que el botón "enviar datos" permanezca grisado (deshabilitado) hasta que el usuario haya ingresado datos de los 3 desplegables que se encuentran dentro del form.

No tengo ni idea de JavaScript, pero no tengo idea como.
Podrán ayudarme con el código?

Muchas gracias a todos.
Saludos.