Foros del Web - Ver Mensaje Individual - deshabilitar boton hasta completar campos

pabloe9k · #11 (**permalink**) 04/02/2013, 09:36

Cita:

Iniciado por emprear

El problema para integrar las 2 cosas es el uso del evento onkeyup, solo sería posible si el select fuese operado por el cliente antes de completar los text boxes. Una alternativaes tener deshabilitados los textbox por defecto y habilitarlos solo al modificar le select.
Lo del alert es solo un ejemplo. Antes de continuar tenés que tener en claro que una validación efectiva solo puede hacerse del lado del servidor. Con javascript, en este caso solo estamos mejorando la experiencia del usuario
Pero algo como esto te puede servir

Código HTML:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"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", "campo3", "campo4"];
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 pais = document.getElementById('pais').value;
console.log(c + '-' +campos.length );
    if(pais != ""){
        for(var d in campos){
        document.getElementById(campos[d]).disabled = false;
        }
        if(c== campos.length){
        document.getElementById('envia').disabled = false;
        }
    }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');">
<div>
<select id="pais" name="pais" onchange="validar_select();">
<option value="">Selecciona País</option>
<option value="arg">Argentina</option>
<option value="esp">España</option>
</select>
<br />
</div>
<div>
<input type="text" id="campo1" value="" disabled="disabled" /><br />
<input type="text" id="campo2" value="" disabled="disabled" /><br />
<input type="text" id="campo3" value="" disabled="disabled" /><br />
<input type="text" id="campo4" value="" disabled="disabled" /><br />
<input type="submit" id="envia" name="envia" value="procesar" disabled="disabled"/><br />
</div>
</form>
</body>
</html>

Demo
http://foros.emprear.com/javascript/...s_select.phtml

Y la recomendación final, dados tus comentarios es que empieces con un manual de Javascript, http://librosweb.es sería un buen punto de partida

Saludos

Wow!
Esto es excelente!!
MUCHÍSIMAS GRACIAS!