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.