[SOLUCIONADO] Temporizador de 30 minutos para enviar datos de un formulario

MLDGATO · #1 (**permalink**) 28/07/2014, 15:12

Hola amigos espero que me puedan ayudar, tengo un examen que hize con un formulario y valido los datos con php y los datos los coloco en mi base de datos, todo ahí bien.. pero la idea de dicho examen es que sea con tiempo, específicamente de 30 minutos y al cumplirse el tiempo que haga el submit de dicho formulario, el temporizador debe ser visto por el usuario, así que debe ir en el formato de tiempo de 30:00 hasta llegar a 00:00, los que tengo que encontré por ahí es lo siguiente:

Tengo un div:

Código HTML:

Ver original<div id='i'></div>

Y el javascript que tengo es:

Código Javascript:

Ver originalc = 60;
int = setInterval(function(){
    c--;
    document.getElementById('i').innerHTML = c;
    if(c == 0){
        alert('Alerta');
                clearInterval(int);
    }
},1000);

pero no entiendo bien como acomodar esto para que el formulario haga submit despues de 30 minutos, muchas gracias.

caricatos · #2 (**permalink**) 28/07/2014, 19:20

Hola:

Tanto el parámetro de setInterval como setTimeout es un valor númérico en milisegundos, o sea si ese segundo parámetro es 1000 se trata de 1000 milisegundos, o sea un segundo... si lo multiplicas por 60 ya tienes un minuto...

Saludos

MLDGATO · #3 (**permalink**) 29/07/2014, 14:07

Cita:

Iniciado por caricatos

Hola:

Tanto el parámetro de setInterval como setTimeout es un valor númérico en milisegundos, o sea si ese segundo parámetro es 1000 se trata de 1000 milisegundos, o sea un segundo... si lo multiplicas por 60 ya tienes un minuto...

Saludos

Si mucas gracias, lo que hice fue esto:

Código HTML:

Ver original<!doctype html>
<html>
<head>
<meta charset="iso-8859-2">
<title>Untitled Document</title>
</head>
 
<body>
    <div id="Reloj">
        <table width="165" align="center">
            <tr>
                <td colspan="3" align="center"><p>Tiempo restante</p></td>
            </tr>
            <tr>
                <td id="j" width="87" align="right">29</td>
                <td id="k" width="6">:</td>
                <td id="i" width="91">59</td>
            </tr>
        </table>
    </div>
</body>
</html>

Este el javascript

Código Javascript:

Ver originalseg = 60;
int = setInterval(function()
{
    seg--;
    document.getElementById('i').innerHTML = seg;
    
    if(seg < 10)
    {
        document.getElementById('i').innerHTML = '0' + seg;
        if(seg == 0)
        {
            seg = 60;
        }
    }
},1000);
 
minutos = 29;
int = setInterval(function()
{
    minutos--;
    document.getElementById('j').innerHTML = minutos;
    if(minutos < 10)
    {
        document.getElementById('i').innerHTML = '0' + minutos;
        if(minutos == 0)
        {
            alert('Alerta: El tiempo se finalizó');
            clearInterval(int);
        }
    }
 
},60000);

Pero tengo dos problemas el primero que el temporizador al iniciar no es automático sino que inicia mas o menos despues de dos segundos y el otro es que los minutos me cambian cuando el segundo está en cero y no en 59, por más que cambio los valores de las variables o pruebo otras cosas no me funciona correctamente

Alexis88 · #4 (**permalink**) 29/07/2014, 14:43

Podrías hacerlo así:

Código HTML:

Ver original<label id = "tiempo">30:00</label>

Código Javascript:

Ver originalvar salida = document.getElementById("tiempo"),
    minutos = 30,
    segundos = 0,
    intervalo = setInterval(function(){
        if (--segundos < 0){
            segundos = 59;
            minutos--;
        }
      
        if (!minutos && !segundos)
            clearInterval(intervalo);
  
        salida.innerHTML = minutos + ":" + (segundos < 10 ? "0" + segundos : segundos);
    }, 1000);

Lo que hace este pequeño script es lo siguiente. Primero, tomo al elemento en el cual se visualizará la cuenta regresiva, además, inicializo a las variables minutos y [inline]segundos/inline] con los valores que inicialmente (valga la redundancia) deberán de tener y por último, una cuarta variable de nombre intervalo, a la cual le asignaré el intervalo creado con el método setInterval. En la función que se ejecutará cada segundo en el intervalo, resto 1 a segundos y si su valor es menor a 0, le asigno el 59 como nuevo valor, además, resto 1 a minutos, de este modo, para la siguiente ejecución, segundos será igual a 59 - 1, por lo que al no ser menor que 0, quedará con ese valor y no se restará otro minuto. Por otro lado, cuando los valores de minutos y segundos sean iguales a 0 (recordando que el 0 equivale al valor booleano false), se terminará el intervalo de tiempo. Finalmente, muestro en el elemento de salida a los valores actualizados de las variables minutos y segundos, dándole a esta última el formato respectivo en caso sea menor que 10.

Saludos

MLDGATO · #5 (**permalink**) 29/07/2014, 15:48

Cita:

Iniciado por Alexis88

Podrías hacerlo así:

Código HTML:

Ver original<label id = "tiempo">30:00</label>

Código Javascript:

Ver originalvar salida = document.getElementById("tiempo"),
    minutos = 30,
    segundos = 0,
    intervalo = setInterval(function(){
        if (--segundos < 0){
            segundos = 59;
            minutos--;
        }
      
        if (!minutos && !segundos)
            clearInterval(intervalo);
  
        salida.innerHTML = minutos + ":" + (segundos < 10 ? "0" + segundos : segundos);
    }, 1000);

Lo que hace este pequeño script es lo siguiente. Primero, tomo al elemento en el cual se visualizará la cuenta regresiva, además, inicializo a las variables minutos y [inline]segundos/inline] con los valores que inicialmente (valga la redundancia) deberán de tener y por último, una cuarta variable de nombre intervalo, a la cual le asignaré el intervalo creado con el método setInterval. En la función que se ejecutará cada segundo en el intervalo, resto 1 a segundos y si su valor es menor a 0, le asigno el 59 como nuevo valor, además, resto 1 a minutos, de este modo, para la siguiente ejecución, segundos será igual a 59 - 1, por lo que al no ser menor que 0, quedará con ese valor y no se restará otro minuto. Por otro lado, cuando los valores de minutos y segundos sean iguales a 0 (recordando que el 0 equivale al valor booleano false), se terminará el intervalo de tiempo. Finalmente, muestro en el elemento de salida a los valores actualizados de las variables minutos y segundos, dándole a esta última el formato respectivo en caso sea menor que 10.

Saludos

Muchas gracias el script se ve simple pero no me funciona el temporizador no corre, creo que tengo que poner un onload en el body para llamar la función??? pero no se, muchas gracias.

Alexis88 · #6 (**permalink**) 29/07/2014, 15:51

¿Será quizá que colocaste el script en la cabecera del documento? Colócalo justo antes de la etiqueta </body> para que surta efecto.

Saludos

MLDGATO · #7 (**permalink**) 29/07/2014, 16:04

Cita:

Iniciado por Alexis88

¿Será quizá que colocaste el script en la cabecera del documento? Colócalo justo antes de la etiqueta </body> para que surta efecto.

Saludos

Así es ya lo coloque después de</body> y ahí funcionó, estoy haciendo esto para que cuando el tiempo se termine me envié los datos de un formulario, agregue la siguiente línea:

Código Javascript:

Ver originaldocument.getElementById("test").submit(); //test es el nombre de mi form

y todo quedo así:

Código Javascript:

Ver originalvar salida = document.getElementById("tiempo"),
    minutos = 30,
    segundos = 0,
    intervalo = setInterval(function(){
        if (--segundos < 0){
            segundos = 59;
            minutos--;
        }
      
        if (!minutos && !segundos)
            clearInterval(intervalo);
  
        salida.innerHTML = minutos + ":" + (segundos < 10 ? "0" + segundos : segundos);
        document.getElementById("test").submit();
    }, 1000);

Pero no funcinó

En donde es que debo de colocar dicha línea para que el formulario haga submit, muchas gracias y disculpa que te moleste tanto.

Alexis88 · #8 (**permalink**) 29/07/2014, 16:09

Esa línea debes de colocarla en el mismo bloque de instrucciones que se ejecuta cuando los minutos y segundos llegan a cero, es decir:

Código Javascript:

Ver originalif (!minutos && !segundos){
    clearInterval(intervalo);
    document.getElementById("test").submit();
}

Por cierto, te dije que coloques el código JS antes de la etiqueta </body>, no después. Aunque funcione, también es bueno tener un código ordenado, evitando colocar contenido en donde no va.

Saludos

MLDGATO · #9 (**permalink**) 29/07/2014, 16:56

Cita:

Iniciado por Alexis88

Esa línea debes de colocarla en el mismo bloque de instrucciones que se ejecuta cuando los minutos y segundos llegan a cero, es decir:

Código Javascript:

Ver originalif (!minutos && !segundos){
    clearInterval(intervalo);
    document.getElementById("test").submit();
}

Por cierto, te dije que coloques el código JS antes de la etiqueta </body>, no después. Aunque funcione, también es bueno tener un código ordenado, evitando colocar contenido en donde no va.

Saludos

Gracias ya coloque el script en donde vá, pero hice la prueba colocando la línea del submit pero el temporizador no llega a cero sino que se quedo en 00:01

Alexis88 · #10 (**permalink**) 29/07/2014, 17:06

Eso sucede porque cuando la cuenta llega a cero, se corta el intervalo y se ejecuta el método submit antes de mostrar el tiempo actualizado. Lo único que tendrías que hacer es colocar la línea en donde muestras el tiempo antes de la condición en donde cortas el intervalo.

Saludos

MLDGATO · #11 (**permalink**) 29/07/2014, 21:32

Cita:

Iniciado por Alexis88

Eso sucede porque cuando la cuenta llega a cero, se corta el intervalo y se ejecuta el método submit antes de mostrar el tiempo actualizado. Lo único que tendrías que hacer es colocar la línea en donde muestras el tiempo antes de la condición en donde cortas el intervalo.

Saludos

Gracias por todo tu apoyo pero no se en que parte colocar el submit, ayúdame por favor, muchas gracias.

Alexis88 · #12 (**permalink**) 29/07/2014, 23:01

¿Qué no habías solucionado eso y solo te faltaba el tema de que se ejecutaba el envío faltando 1 segundo?

Así es como debería de quedar el script:

Código Javascript:

Ver originalvar salida = document.getElementById("tiempo"),
    minutos = 30,
    segundos = 0,
    intervalo = setInterval(function(){
        if (--segundos < 0){
            segundos = 59;
            minutos--;
        }
 
        salida.innerHTML = minutos + ":" + (segundos < 10 ? "0" + segundos : segundos);
      
        if (!minutos && !segundos){
            clearInterval(intervalo);
            document.getElementById("test").submit();
        }
    }, 1000);

Si no se realiza el envío, probablemente sea porque no estás tomando correctamente al formulario. Recuerda que el id del mismo debe de tener como valor a la palabra 'test'; si el atributo name es el que posee a dicho valor, entonces deberás tomarlo con el método getElementsByName y especificando al final el número de elemento, es decir:

Código Javascript:

Ver originaldocument.getElementsByName("test")[0].submit();

Ojo, lo anterior es válido solo si el valor del atributo name es igual a 'test', pero si el que posee a dicho valor es el atributo id, entonces así como está debería de funcionar.

Saludos

MLDGATO · #13 (**permalink**) 31/07/2014, 08:24

Muchas gracias por tu ayuda ha sido muy valiosa para mi, que Dios te bendiga amigo Alexis88.