Ver Mensaje Individual
  #5 (permalink)  
Antiguo 02/02/2013, 13:33
Avatar de emprear
emprear
Colaborador
 
Fecha de Ingreso: junio-2007
Ubicación: me mudé
Mensajes: 8.388
Antigüedad: 16 años, 10 meses
Puntos: 1567
Respuesta: deshabilitar boton hasta completar campos

Cita:
Iniciado por sycrox2 Ver Mensaje
Aquí está el código de emprear con algunas correcciones para que no detecte los espacios que comentaba y también para arreglar un pequeño detalle (el botón se habilitaba al escribir únicamente en el último campo); en mi opinión es algo inseguro dejar la validación sólo en el lado del cliente, así que debería también procurar hacerla en el servidor.

Para controlar lo de espacios en blanco(barra espaciadora), utilicé el replace(/\s/g,'') donde /\s/g es una pequeña expresión regular que saca todos los espacios en blanco dentro de una cadena
Gracias por la corrección. Ya lo arreglé haciendo un par de modificaciones, y le hice ya que estamos el trim para los value y agregué el evento onkeyup dinamicamente

Código HTML:
Ver original
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml">
  4. <title>Submit disabled</title>
  5. <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  6.  <script type="text/javascript">
  7. //<![CDATA[
  8. // Definimos los campos que se han de verificar, contruimos un array con los id de los mismos
  9. var campos = ["campo1", "campo2", "campo3", "campo4"];
  10. function activar() {
  11. var c = 0;
  12. for(var i in campos){
  13. i = parseInt(i);
  14. var cadenaL = document.getElementById(campos[i]).value;
  15. // hacemos un trim previo a la verificación
  16. cadenaL = cadenaL.replace(/^\s+/g,'').replace(/\s+$/g,'')
  17. if(cadenaL != ""){
  18. c++; // incrementamos c por cada campo que no está vacío
  19. }
  20. if(c == (i+1)){ // si c es = al total de los campos habilitamos el submit
  21. document.getElementById('envia').disabled = false;
  22. }else{
  23. document.getElementById('envia').disabled = true;
  24. }
  25. }
  26. }
  27.  
  28. // agregamos el evento onkeyup dinamicamente a los campos requeridos
  29. window.onload = function(){
  30.     for(var e in campos){
  31.     var elem = document.getElementById(campos[e])
  32.     if (elem.addEventListener){
  33.     elem.addEventListener("keyup", function(){activar()}, false);
  34.     }else{ // <IE9
  35.         if (elem.attachEvent){
  36.         elem.attachEvent ("onkeyup", function () {activar(elem)});
  37.         }
  38.     }
  39.     }
  40. }
  41.  
  42. //]]>
  43. </head>
  44. <form action="#" method="post">
  45. <input type="text" id="campo1" value="" /><br />
  46. <input type="text" id="campo2" value="" /><br />
  47. <input type="text" id="campo3" value="" /><br />
  48. <input type="text" id="campo4" value="" /><br />
  49. <input type="submit" id="envia" name="envia" value="procesar" disabled="disabled"/><br />
  50. </form>
  51. </body>
  52. </html>

Demo
http://foros.emprear.com/javascript/...submit_ok.html

Saludos
__________________
La voz de las antenas va, sustituyendo a Dios.
Cuando finalice la mutación, nueva edad media habrá
S.R.

Última edición por emprear; 02/02/2013 a las 13:38