Foros del Web » Programando para Internet » Javascript »

cuenta regresiva con submit automatico

Estas en el tema de cuenta regresiva con submit automatico en el foro de Javascript en Foros del Web. Hola .. el usuario Dradi7 me soluciooe un problema que tenia con un script por lo cual tengo este codigo de ejemplo Código PHP: <! ...
  #1 (permalink)  
Antiguo 12/10/2012, 11:46
 
Fecha de Ingreso: enero-2004
Mensajes: 72
Antigüedad: 20 años, 10 meses
Puntos: 1
cuenta regresiva con submit automatico

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

Última edición por KAKOROSAS; 12/10/2012 a las 12:35
  #2 (permalink)  
Antiguo 12/10/2012, 12:41
Avatar de angel1993  
Fecha de Ingreso: octubre-2009
Mensajes: 752
Antigüedad: 15 años, 1 mes
Puntos: 22
Respuesta: cuenta regresiva con submit automatico

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 original
  1. var TiempoRestante = 7200; /* 7.200 son los segundos que tiene una hora*/
  2. function ComprobarTiempo(){
  3. TiempoRestante  = TiempoRestante  - 1;
  4.  /* 300 son los segundos que tienem 2 minutos*/
  5. if(TiempoRestante == 300 ){
  6. alert('¡QUEDAN 5 MINUTOS!');
  7. }
  8.  
  9.  
  10. }
  11.  
  12. 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.
__________________
@angelxab Twiiter
  #3 (permalink)  
Antiguo 16/10/2012, 06:32
 
Fecha de Ingreso: enero-2004
Mensajes: 72
Antigüedad: 20 años, 10 meses
Puntos: 1
Respuesta: cuenta regresiva con submit automatico

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

cualquier otra ayuda se los agradezco
  #4 (permalink)  
Antiguo 16/10/2012, 07:30
 
Fecha de Ingreso: octubre-2012
Mensajes: 1
Antigüedad: 12 años, 1 mes
Puntos: 1
Respuesta: cuenta regresiva con submit automatico

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 original
  1. var comprobar = comprobar || {};
  2.  
  3. comprobar.tiempo = 7200;
  4. comprobar.contador = setInterval(function() {
  5.    comprobar.tiempo -= 300;
  6.   if (comprobar.tiempo === 300) {
  7.     return alert('listo');
  8.   }
  9. }, 300000);

Saludos
  #5 (permalink)  
Antiguo 16/10/2012, 09:43
 
Fecha de Ingreso: enero-2004
Mensajes: 72
Antigüedad: 20 años, 10 meses
Puntos: 1
Respuesta: cuenta regresiva con submit automatico

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
  #6 (permalink)  
Antiguo 17/10/2012, 06:21
 
Fecha de Ingreso: enero-2004
Mensajes: 72
Antigüedad: 20 años, 10 meses
Puntos: 1
Respuesta: cuenta regresiva con submit automatico

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> 
  #7 (permalink)  
Antiguo 17/10/2012, 12:52
 
Fecha de Ingreso: enero-2004
Mensajes: 72
Antigüedad: 20 años, 10 meses
Puntos: 1
Respuesta: cuenta regresiva con submit automatico

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> *​ 
  #8 (permalink)  
Antiguo 17/10/2012, 14:23
Avatar de Dradi7  
Fecha de Ingreso: junio-2008
Ubicación: Peru - Lima
Mensajes: 1.518
Antigüedad: 16 años, 5 meses
Puntos: 220
Respuesta: cuenta regresiva con submit automatico

Cita:
Iniciado por KAKOROSAS Ver Mensaje
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 original
  1. if(confirm("Falta responer las siguientes preguntas " + noContestados.substr(0,noContestados.length-2))){
  2.     return true;
  3. }else{
  4.     return false;
  5. }

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

Código Javascript:
Ver original
  1. alert("Falta responer las siguientes preguntas " + noContestados.substr(0,noContestados.length-2));
  2. return true;
__________________
La clave de todo triunfador es eliminar todas sus excusas y sus limitaciones
  #9 (permalink)  
Antiguo 17/10/2012, 15:40
 
Fecha de Ingreso: enero-2004
Mensajes: 72
Antigüedad: 20 años, 10 meses
Puntos: 1
Respuesta: cuenta regresiva con submit automatico

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
  #10 (permalink)  
Antiguo 18/10/2012, 07:45
Avatar de Dradi7  
Fecha de Ingreso: junio-2008
Ubicación: Peru - Lima
Mensajes: 1.518
Antigüedad: 16 años, 5 meses
Puntos: 220
Respuesta: cuenta regresiva con submit automatico

Y en que parte colocas el segundo alert???
__________________
La clave de todo triunfador es eliminar todas sus excusas y sus limitaciones
  #11 (permalink)  
Antiguo 18/10/2012, 08:52
 
Fecha de Ingreso: enero-2004
Mensajes: 72
Antigüedad: 20 años, 10 meses
Puntos: 1
Respuesta: cuenta regresiva con submit automatico

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> 
  #12 (permalink)  
Antiguo 18/10/2012, 09:39
Avatar de Dradi7  
Fecha de Ingreso: junio-2008
Ubicación: Peru - Lima
Mensajes: 1.518
Antigüedad: 16 años, 5 meses
Puntos: 220
Respuesta: cuenta regresiva con submit automatico

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
__________________
La clave de todo triunfador es eliminar todas sus excusas y sus limitaciones
  #13 (permalink)  
Antiguo 19/10/2012, 13:37
Avatar de angel1993  
Fecha de Ingreso: octubre-2009
Mensajes: 752
Antigüedad: 15 años, 1 mes
Puntos: 22
Respuesta: cuenta regresiva con submit automatico

Cita:
Iniciado por NicoEchezarreta Ver Mensaje
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 original
  1. var comprobar = comprobar || {};
  2.  
  3. comprobar.tiempo = 7200;
  4. comprobar.contador = setInterval(function() {
  5.    comprobar.tiempo -= 300;
  6.   if (comprobar.tiempo === 300) {
  7.     return alert('listo');
  8.   }
  9. }, 300000);

Saludos
No sabía eso.. ¿Que diferencia hay? ¿Realmente se nota la mejoría?
__________________
@angelxab Twiiter
  #14 (permalink)  
Antiguo 19/10/2012, 14:59
 
Fecha de Ingreso: enero-2004
Mensajes: 72
Antigüedad: 20 años, 10 meses
Puntos: 1
Respuesta: cuenta regresiva con submit automatico

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

Etiquetas: automatico, html, input, regresiva, submit
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 18:30.