cuenta regresiva con submit automatico

KAKOROSAS · #1 (**permalink**) 12/10/2012, 11:46

Hola .. el usuario Dradi7

me soluciooe un problema que tenia con un script por lo cual tengo este codigo de ejemplo

Código PHP:

  <!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>  
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
<title>Documento sin título</title>  
* * <script> 
* * * * function validar(){ 
* * * * * * return false; * * * * 
* * * * } 
* * </script> 
</head>  
* 
<body>  
<form id="form2" name="form2" method="post" action="" onsubmit="return validar();">  
* * pregunta 1 
* <p>  
* * <label>  
* * * <input type="radio" name="a1" value="a" id="a1_0" />  
* * * a</label>  
* * <br />  
* * <label>  
* * * <input type="radio" name="a1" value="b" id="a1_1" />  
* * * b</label>  
* * <br />  
* * <label>  
* * * <input type="radio" name="a1" value="c" id="a1_2" />  
* * * c</label>  
* * <br />  
* </p> 
* * <br/> 
* * pregunta 2 
* <p>  
* * <label>  
* * * <input type="radio" name="a2" value="a" id="a2_0" />  
* * * a</label>  
* * <br />  
* * <label>  
* * * <input type="radio" name="a2" value="b" id="a2_1" />  
* * * b</label>  
* * <br />  
* * <label>  
* * * <input type="radio" name="a2" value="c" id="a2_2" />  
* * * c</label>  
* </p>  
* * <br/> 
* * pregunta 3 
* <p>  
* * <label>  
* * * <input type="radio" name="a3" value="a" id="a2_3" />  
* * * a</label>  
* * <br />  
* * <label>  
* * * <input type="radio" name="a3" value="b" id="a2_4" />  
* * * b</label>  
* * <br />  
* * <label>  
* * * <input type="radio" name="a3" value="c" id="a2_5" />  
* * * c</label>  
</p>  
* * <br/> 
* * pregunta 4 
* <p>  
* * <label>  
* * * <input type="radio" name="a4" value="a" id="a2_6" />  
* * * a</label>  
* * <br />  
* * <label>  
* * * <input type="radio" name="a4" value="b" id="a2_7" />  
* * * b</label>  
* * <br />  
* * <label>  
* * * <input type="radio" name="a4" value="c" id="a2_8" />  
* * * c</label>  
* </p>  
* <p><br />  
* </p>  
* <p> * *<input type="submit" name="enviar" id="enviar" value="Enviar" /><br />  
</p>  
</form>  
</body>  
</html> *

Código PHP:

  function comprobarPregunta(ele){ 
* * var radios = document.getElementsByName(ele); 
* * var noContesto = true; 
* * for(var x=0;radios[x];x++){ 
* * * * if(radios[x].checked){ 
* * * * * * noContesto = false; 
* * * * * * break; 
* * * * } 
* * } 
* * return noContesto; 
} 
function validar(){ 
* * var ele = document.forms['form2'].elements; 
* * var name = ''; 
* * var noContestados = ''; 
* * for(var x=0;ele[x];x++){ 
* * * * if(ele[x].type == "radio" && ele[x].name!=name){ 
* * * * * * name = ele[x].name; 
* * * * * * noContestados += comprobarPregunta(ele[x].name) ? (name.replace(/D/gi,"") + ', ') : ''; 
* * * * }else{ 
* * * * * * continue; 
* * * * } 
* * } 
* 
* * if(noContestados!=''){ 
* * * * // CON ESTO ESTOY VERIFICANDO QUE SI PONE EN ACEPTAR ENTONCES REALIZAR EL SUBMIT DE LO CONTRARIO QUE NO HAGA EL SUBMIT 
* * * * if(confirm("Falta responer las siguientes preguntas " + noContestados.substr(0,noContestados.length-2))){ 
* * * * * * return true; 
* * * * }else{ 
* * * * * * return false; 
* * * * } 
* * } 
* * return true; 
}

la idea es ahora colocar un reloj lo mas simple posible .. con 2 horas para responder "cuenta regresiva" y cuando queden 5 min avise nomas .. y al terminar que envie si o si las respuestas

muchas gracias por la ayuda

angel1993 · #2 (**permalink**) 12/10/2012, 12:41

Crea una variable que se almacene el tiempo restante, y llamas a una funcion que reste 1 segundo y compruebe las cosas cada segundo.
ejemplo:

Código Javascript:

Ver originalvar TiempoRestante = 7200; /* 7.200 son los segundos que tiene una hora*/
function ComprobarTiempo(){
TiempoRestante  = TiempoRestante  - 1;
 /* 300 son los segundos que tienem 2 minutos*/
if(TiempoRestante == 300 ){
alert('¡QUEDAN 5 MINUTOS!');
}
 
 
}
 
setInterval('ComprobarTiempo()',1000);

Más o menos esa es la idea, si quieres mostrar el tiempo que queda puedes calcularlo con la variable "TiempoRestante"
Te aconsejo meter el timer en una variable y destruirlo cuando llegue a 0 el contador.

KAKOROSAS · #3 (**permalink**) 16/10/2012, 06:32

eh vuelto al trabajo... gracias por la ayuda.. lo voy a intentar ahora ..

cualquier otra ayuda se los agradezco

NicoEchezarreta · #4 (**permalink**) 16/10/2012, 07:30

No es recomendado pasarle a un intervalo la ejecucción de una función, es una forma de eval(), y esto cuanto mas se pueda evitar mejor, así que dejo una versión "mejorada" a la que dejó Angel.
Cambié también el tiempo en que se ejecuta el intervalo para consumir menos cpu, ahora se ejecuta cada 5 minutos.

Código Javascript:

Ver originalvar comprobar = comprobar || {};
 
comprobar.tiempo = 7200;
comprobar.contador = setInterval(function() {
   comprobar.tiempo -= 300;
  if (comprobar.tiempo === 300) {
    return alert('listo');
  }
}, 300000);

Saludos

KAKOROSAS · #5 (**permalink**) 16/10/2012, 09:43

realize la siguien prueba.. y me funciono bien los mensajes..

Código PHP:

  <script type="text/javascript"> 
var comprobar = comprobar || {}; 
* 
comprobar.tiempo =60; 
comprobar.contador = setInterval(function() { 
* *comprobar.tiempo -= 5; 
* if (comprobar.tiempo === 30) { 
* * return alert('Te quedan 30 segundos'); 
return false; 
} 
if (comprobar.tiempo === 10) { 
* * return alert('Te quedan 10 segundos'); 
* } 
 
}, 5000); 
</script>

el tema ahora es como envió el form si o si independiente que esten o no contestados al terminar el tiempo

KAKOROSAS · #6 (**permalink**) 17/10/2012, 06:21

hola .. lo intente con

Código PHP:

  if (comprobar.tiempo === 1) { 
* * document.form2.submit();

pero no me funciono ... .. posea no me guarda en la BD

Código PHP:

  <script type="text/javascript"> 
var comprobar = comprobar || {}; 
* 
comprobar.tiempo =61; 
comprobar.contador = setInterval(function() { 
* *comprobar.tiempo -= 5; 
* if (comprobar.tiempo === 31) { 
* * return alert('Te quedan 30 segundos'); 
return false; 
} 
if (comprobar.tiempo === 11) { 
* * return alert('Te quedan 10 segundos'); 
return false; 
* } 
if (comprobar.tiempo === 1) { 
* * document.form2.submit(); 
} 
}, 5000); 
</script>

KAKOROSAS · #7 (**permalink**) 17/10/2012, 12:52

aki esta el codigo de muestra

si se dan cuenta al terminar el tiempo simulo el click del boton enviar .... pero me aparese el otro js donde me avisa de las preguntas sin responder y con la opcion cancelar ..

la idea es que no tenga opción cancelar al terminar el tiempo .. o que envie si o si al terminar el tiempo sin preguntar nada ..

muchas gracias por su tiempo

Código PHP:

  <!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>  
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
<title>Documento sin título</title>  
* * <script> 
* * * *function comprobarPregunta(ele){ 
* * var radios = document.getElementsByName(ele); 
* * var noContesto = true; 
* * for(var x=0;radios[x];x++){ 
* * * * if(radios[x].checked){ 
* * * * * * noContesto = false; 
* * * * * * break; 
* * * * } 
* * } 
* * return noContesto; 
} 
function validar(){ 
* * var ele = document.forms['form2'].elements; 
* * var name = ''; 
* * var noContestados = ''; 
* * for(var x=0;ele[x];x++){ 
* * * * if(ele[x].type == "radio" && ele[x].name!=name){ 
* * * * * * name = ele[x].name; 
* * * * * * noContestados += comprobarPregunta(ele[x].name) ? (name.replace(/D/gi,"") + ', ') : ''; 
* * * * }else{ 
* * * * * * continue; 
* * * * } 
* * } 
* 
* * if(noContestados!=''){ 
* * * * // CON ESTO ESTOY VERIFICANDO QUE SI PONE EN ACEPTAR ENTONCES REALIZAR EL SUBMIT DE LO CONTRARIO QUE NO HAGA EL SUBMIT 
* * * * if(confirm("Falta responer las siguientes preguntas " + noContestados.substr(0,noContestados.length-2))){ 
* * * * * * return true; 
* * * * }else{ 
* * * * * * return false; 
* * * * } 
* * } 
* * return true; 
} 
 
* * </script> 
 
<script type="text/javascript"> 
var comprobar = comprobar || {}; 
* 
comprobar.tiempo =10; 
comprobar.contador = setInterval(function() { 
* *comprobar.tiempo -= 1; 
* if (comprobar.tiempo === 9) { 
* * return alert('Te quedan 9 segundos'); 
return false; 
} 
if (comprobar.tiempo === 7) { 
* * return alert('Te quedan 7 segundos'); 
* } 
if (comprobar.tiempo === 1) { 
    document.getElementById('enviar').click() 
    return true; 
} 
}, 1000); 
</script> 
</head>  
* 
<body>  
<form id="form2" name="form2" method="post" action="" onsubmit="return validar();">  
* * pregunta 1 
* <p>  
* * <label>  
* * * <input type="radio" name="a1" value="a" id="a1_0" />  
* * * a</label>  
* * <br />  
* * <label>  
* * * <input type="radio" name="a1" value="b" id="a1_1" />  
* * * b</label>  
* * <br />  
* * <label>  
* * * <input type="radio" name="a1" value="c" id="a1_2" />  
* * * c</label>  
* * <br />  
* </p> 
* * <br/> 
* * pregunta 2 
* <p>  
* * <label>  
* * * <input type="radio" name="a2" value="a" id="a2_0" />  
* * * a</label>  
* * <br />  
* * <label>  
* * * <input type="radio" name="a2" value="b" id="a2_1" />  
* * * b</label>  
* * <br />  
* * <label>  
* * * <input type="radio" name="a2" value="c" id="a2_2" />  
* * * c</label>  
* </p>  
* * <br/> 
* * pregunta 3 
* <p>  
* * <label>  
* * * <input type="radio" name="a3" value="a" id="a2_3" />  
* * * a</label>  
* * <br />  
* * <label>  
* * * <input type="radio" name="a3" value="b" id="a2_4" />  
* * * b</label>  
* * <br />  
* * <label>  
* * * <input type="radio" name="a3" value="c" id="a2_5" />  
* * * c</label>  
</p>  
* * <br/> 
* * pregunta 4 
* <p>  
* * <label>  
* * * <input type="radio" name="a4" value="a" id="a2_6" />  
* * * a</label>  
* * <br />  
* * <label>  
* * * <input type="radio" name="a4" value="b" id="a2_7" />  
* * * b</label>  
* * <br />  
* * <label>  
* * * <input type="radio" name="a4" value="c" id="a2_8" />  
* * * c</label>  
* </p>  
* <p><br />  
* </p>  
* <p> * *<input type="submit" name="enviar" id="enviar" value="Enviar" /><br />  
</p>  
</form>  
</body>  
</html> *

Dradi7 · #8 (**permalink**) 17/10/2012, 14:23

Cita:

Iniciado por KAKOROSAS

aki esta el codigo de muestra

si se dan cuenta al terminar el tiempo simulo el click del boton enviar .... pero me aparese el otro js donde me avisa de las preguntas sin responder y con la opcion cancelar ..

la idea es que no tenga opción cancelar al terminar el tiempo .. o que envie si o si al terminar el tiempo sin preguntar nada ..

muchas gracias por su tiempo

Código PHP:

  <!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>  
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
<title>Documento sin título</title>  
* * <script> 
* * * *function comprobarPregunta(ele){ 
* * var radios = document.getElementsByName(ele); 
* * var noContesto = true; 
* * for(var x=0;radios[x];x++){ 
* * * * if(radios[x].checked){ 
* * * * * * noContesto = false; 
* * * * * * break; 
* * * * } 
* * } 
* * return noContesto; 
} 
function validar(){ 
* * var ele = document.forms['form2'].elements; 
* * var name = ''; 
* * var noContestados = ''; 
* * for(var x=0;ele[x];x++){ 
* * * * if(ele[x].type == "radio" && ele[x].name!=name){ 
* * * * * * name = ele[x].name; 
* * * * * * noContestados += comprobarPregunta(ele[x].name) ? (name.replace(/D/gi,"") + ', ') : ''; 
* * * * }else{ 
* * * * * * continue; 
* * * * } 
* * } 
* 
* * if(noContestados!=''){ 
* * * * // CON ESTO ESTOY VERIFICANDO QUE SI PONE EN ACEPTAR ENTONCES REALIZAR EL SUBMIT DE LO CONTRARIO QUE NO HAGA EL SUBMIT 
* * * * if(confirm("Falta responer las siguientes preguntas " + noContestados.substr(0,noContestados.length-2))){ 
* * * * * * return true; 
* * * * }else{ 
* * * * * * return false; 
* * * * } 
* * } 
* * return true; 
} 
 
* * </script> 
 
<script type="text/javascript"> 
var comprobar = comprobar || {}; 
* 
comprobar.tiempo =10; 
comprobar.contador = setInterval(function() { 
* *comprobar.tiempo -= 1; 
* if (comprobar.tiempo === 9) { 
* * return alert('Te quedan 9 segundos'); 
return false; 
} 
if (comprobar.tiempo === 7) { 
* * return alert('Te quedan 7 segundos'); 
* } 
if (comprobar.tiempo === 1) { 
    document.getElementById('enviar').click() 
    return true; 
} 
}, 1000); 
</script> 
</head>  
* 
<body>  
<form id="form2" name="form2" method="post" action="" onsubmit="return validar();">  
* * pregunta 1 
* <p>  
* * <label>  
* * * <input type="radio" name="a1" value="a" id="a1_0" />  
* * * a</label>  
* * <br />  
* * <label>  
* * * <input type="radio" name="a1" value="b" id="a1_1" />  
* * * b</label>  
* * <br />  
* * <label>  
* * * <input type="radio" name="a1" value="c" id="a1_2" />  
* * * c</label>  
* * <br />  
* </p> 
* * <br/> 
* * pregunta 2 
* <p>  
* * <label>  
* * * <input type="radio" name="a2" value="a" id="a2_0" />  
* * * a</label>  
* * <br />  
* * <label>  
* * * <input type="radio" name="a2" value="b" id="a2_1" />  
* * * b</label>  
* * <br />  
* * <label>  
* * * <input type="radio" name="a2" value="c" id="a2_2" />  
* * * c</label>  
* </p>  
* * <br/> 
* * pregunta 3 
* <p>  
* * <label>  
* * * <input type="radio" name="a3" value="a" id="a2_3" />  
* * * a</label>  
* * <br />  
* * <label>  
* * * <input type="radio" name="a3" value="b" id="a2_4" />  
* * * b</label>  
* * <br />  
* * <label>  
* * * <input type="radio" name="a3" value="c" id="a2_5" />  
* * * c</label>  
</p>  
* * <br/> 
* * pregunta 4 
* <p>  
* * <label>  
* * * <input type="radio" name="a4" value="a" id="a2_6" />  
* * * a</label>  
* * <br />  
* * <label>  
* * * <input type="radio" name="a4" value="b" id="a2_7" />  
* * * b</label>  
* * <br />  
* * <label>  
* * * <input type="radio" name="a4" value="c" id="a2_8" />  
* * * c</label>  
* </p>  
* <p><br />  
* </p>  
* <p> * *<input type="submit" name="enviar" id="enviar" value="Enviar" /><br />  
</p>  
</form>  
</body>  
</html> *

En este caso cambia todo esto

Código Javascript:

Ver originalif(confirm("Falta responer las siguientes preguntas " + noContestados.substr(0,noContestados.length-2))){
    return true;
}else{
    return false;
}

por esto para que solo te muestre una alerta y luego envie

Código Javascript:

Ver originalalert("Falta responer las siguientes preguntas " + noContestados.substr(0,noContestados.length-2));
return true;

KAKOROSAS · #9 (**permalink**) 17/10/2012, 15:40

muchas gracias.. lo solucione... XD

ahora lo unico que me queda .. es que cuando tire el primer alert del tiempo .. "dicho tiempo continue avanzando"

hice una prueba y mientras no acepte el primer alert el tiempo del segundo alert no avanza

Dradi7 · #10 (**permalink**) 18/10/2012, 07:45

Y en que parte colocas el segundo alert???

KAKOROSAS · #11 (**permalink**) 18/10/2012, 08:52

si no apreto aceptar en el return alert('Te quedan 9 segundos'); el tiempo se queda detenido y cuando recien apreto aceptar el tiempo sigue

Código PHP:

   </script>  
 
<script type="text/javascript">  
var comprobar = comprobar || {};  
*  
comprobar.tiempo =10;  
comprobar.contador = setInterval(function() {  
* *comprobar.tiempo -= 1;  
* if (comprobar.tiempo === 9) {  
* * return alert('Te quedan 9 segundos');  
return false;  
}  
if (comprobar.tiempo === 7) {  
* * return alert('Te quedan 7 segundos');  
* }  
if (comprobar.tiempo === 1) {  
    document.getElementById('enviar').click()  
    return true;  
}  
}, 1000);  
</script>

Dradi7 · #12 (**permalink**) 18/10/2012, 09:39

Pero esto es nativo se supone que cuando uno usa el alert se bloquea la pagina hasta que cierres el alert o pongas aceptar, el alert no puede cerrarse solo en un tiempo determinado, ni poder manipular la pagina, si quieres hacer eso entonces debes usar un control personalizado que simule una alerta

Saludos

angel1993 · #13 (**permalink**) 19/10/2012, 13:37

Cita:

Iniciado por NicoEchezarreta

No es recomendado pasarle a un intervalo la ejecucción de una función, es una forma de eval(), y esto cuanto mas se pueda evitar mejor, así que dejo una versión "mejorada" a la que dejó Angel.
Cambié también el tiempo en que se ejecuta el intervalo para consumir menos cpu, ahora se ejecuta cada 5 minutos.

Código Javascript:

Ver originalvar comprobar = comprobar || {};
 
comprobar.tiempo = 7200;
comprobar.contador = setInterval(function() {
   comprobar.tiempo -= 300;
  if (comprobar.tiempo === 300) {
    return alert('listo');
  }
}, 300000);

Saludos

No sabía eso.. ¿Que diferencia hay? ¿Realmente se nota la mejoría?

KAKOROSAS · #14 (**permalink**) 19/10/2012, 14:59

mmm :( .. toy viendo alternativas cualquier ayuda se agradece......