deshabilitar un botón submit cuando acabe una cuenta atras

gonfrias19 · #1 (**permalink**) 11/08/2011, 13:07

Buenas tardes,
Me podrian ayudar con el codigo necesario para deshabilitar un botón submit cuando acabe una cuenta atras?

Muchas gracias.

este es el codigo de la cuenta atras:

<script language="JavaScript">

StartCountDown("clock1","09/07/2011 07:28 PM")
function StartCountDown(myDiv,myTargetDate)
{
var dthen = new Date(myTargetDate);
var dnow = new Date();
ddiff = new Date(dthen-dnow);
gsecs = Math.floor(ddiff.valueOf()/1000);
CountBack(myDiv,gsecs);
}

function Calcage(secs, num1, num2)
{
s = ((Math.floor(secs/num1))%num2).toString();
if (s.length < 2)
{
s = "0" + s;
}
return (s);
}

function CountBack(myDiv, secs)
{
var DisplayStr;
var DisplayFormat = "%%D%% Dias, %%H%% Horas, %%M%% Minutos, %%S%% Segundos.";
DisplayStr = DisplayFormat.replace(/%%D%%/g, Calcage(secs,86400,100000));
DisplayStr = DisplayStr.replace(/%%H%%/g, Calcage(secs,3600,24));
DisplayStr = DisplayStr.replace(/%%M%%/g, Calcage(secs,60,60));
DisplayStr = DisplayStr.replace(/%%S%%/g, Calcage(secs,1,60));
if(secs > 0)
{
document.getElementById(myDiv).innerHTML = DisplayStr;
setTimeout("CountBack('" + myDiv + "'," + (secs-1) + ");", 990);
}
else
{
document.getElementById(myDiv).innerHTML = "cuenta atras ha terminado!";
}

}

</script>

laratik · #2 (**permalink**) 11/08/2011, 15:08

Por que no intentas a pasar como parámetro el id del botón a desactivar así como haces con el div en el cual realizas la cuenta atrás, de esa manera obtendrías algo como esto:

Código Javascript:

Ver original<script language="JavaScript">
 
StartCountDown("clock1","09/07/2011 07:28 PM")
function StartCountDown(myDiv,myTargetDate)
{
var dthen   = new Date(myTargetDate);
var dnow    = new Date();
ddiff    = new Date(dthen-dnow);
gsecs    = Math.floor(ddiff.valueOf()/1000);
CountBack(myDiv,gsecs);
}
 
function Calcage(secs, num1, num2)
{
s = ((Math.floor(secs/num1))%num2).toString();
if (s.length < 2) 
{   
s = "0" + s;
}
return (s);
}
 
function CountBack(myDiv, secs, desh)
{
var DisplayStr;
var DisplayFormat = "%%D%% Dias, %%H%% Horas, %%M%% Minutos, %%S%% Segundos.";
DisplayStr = DisplayFormat.replace(/%%D%%/g,    Calcage(secs,86400,100000));
DisplayStr = DisplayStr.replace(/%%H%%/g,    Calcage(secs,3600,24));
DisplayStr = DisplayStr.replace(/%%M%%/g,    Calcage(secs,60,60));
DisplayStr = DisplayStr.replace(/%%S%%/g,    Calcage(secs,1,60));
if(secs > 0)
{   
document.getElementById(myDiv).innerHTML = DisplayStr;
setTimeout("CountBack('" + myDiv + "'," + (secs-1) + ", '"+desh+"' );", 990);
}
else
{
    document.getElementById(desh).disabled = true;
document.getElementById(myDiv).innerHTML = "cuenta atras ha terminado!";
}
 
}
 
</script>

Al manejar recursividad debes también enviar el parámetro que recibes dentro de la función.

Código HTML:

<body onload="CountBack('c',60,'env')">
<div id="c"></div>
<form action="prueba.php" method="post">
<input type="submit" value="Enviar" id="env" />
</form>
</body>

Espero que sea lo que estas buscando.

gonfrias19 · #3 (**permalink**) 17/08/2011, 14:20

Hola laratik,
Gracias por tu rapida respuesta, pero me podrias explicar un poquillo como hacer lo que me dices?

Un saludo.

laratik · #4 (**permalink**) 18/08/2011, 08:24

Me refiero a pasar como parámetro el botón que quieres deshabilitar:

function CountBack(myDiv, secs, desh)

Cuando acabe la cuenta atrás deshabilitas el botón:

else
{
document.getElementById(desh).disabled = true;
document.getElementById(myDiv).innerHTML = "cuenta atras ha terminado!";
}

Cuando invoques de nuevo la función dentro del setTimeout no olvides enviar el botón a deshabilitar:

setTimeout("CountBack('" + myDiv + "'," + (secs-1) + ", '"+desh+"' );", 990);

Todos los cambios que te he señalado se pueden observar en mi primer post.

gonfrias19 · #5 (**permalink**) 18/08/2011, 14:08

Perdon por mi torpeza, ya he puesto todo lo que me has dicho, pero el boton no se me bloquea...
Creo que lo que no tengo claro de como se hace es lo de la recursividad...
Pongo todos los parametros en el script de la cuenta atras, pero no se que hay que hacer en la parte del boton, o como debo decir, que boton es el que hay que bloquear...

Muchas gracias.

laratik · #6 (**permalink**) 20/08/2011, 11:47

Debes pasar como parámetro el Id del botón que vas a desactivar:

Cita:

Iniciado por laratik

Código HTML:

<body onload="CountBack('c',60,'env')">
<div id="c"></div>
<form action="prueba.php" method="post">
<input type="submit" value="Enviar" id="env" />
</form>
</body>

Referente a la recursividad, es cuando la función se invoca a si misma:

Código Javascript:

Ver originalsetTimeout("CountBack('" + myDiv + "'," + (secs-1) + ", '"+desh+"' );", 990);

gonfrias19 · #7 (**permalink**) 20/08/2011, 18:33

Hola laratik,
Ya he conseguido hacer lo que me has explicado, pero tengo alguna duda, a ver si me puedes seguir ayudando...
Consigo que el boton se bloquee y salga el mensaje, pero en el codigo
<body onload="CountBack('c',60,'env')">
me has puesto que se bloquee a los 60segundos de recargar la pagina...
Yo necesito que se me bloquee en una fecha determinada...
Por ejemplo, como tengo puesto en el codigo:
StartCountDown("clock1","09/07/2011 07:28 PM")

Se podria hacer de alguna forma?

MUCHAS GRACIAS!!

laratik · #8 (**permalink**) 21/08/2011, 09:50

Algo como esto:

Código Javascript:

Ver original<script language="JavaScript">
window.onload = function(){StartCountDown("clock1",{year:2011,month:7,day:21,hour:10,minute:44},"env")};
function StartCountDown(myDiv,myTargetDate,desh)
{
var dthen = new Date(myTargetDate.year,myTargetDate.month,myTargetDate.day,myTargetDate.hour,myTargetDate.minute);
var dnow = new Date();
ddiff = new Date(dthen-dnow);
gsecs = Math.floor(ddiff.valueOf()/1000);
CountBack(myDiv,gsecs,desh);
}
 
function Calcage(secs, num1, num2)
{
s = ((Math.floor(secs/num1))%num2).toString();
if (s.length < 2) 
{
s = "0" + s;
}
return (s);
}
 
function CountBack(myDiv, secs, desh)
{
var DisplayStr;
var DisplayFormat = "%%D%% Dias, %%H%% Horas, %%M%% Minutos, %%S%% Segundos.";
DisplayStr = DisplayFormat.replace(/%%D%%/g, Calcage(secs,86400,100000));
DisplayStr = DisplayStr.replace(/%%H%%/g, Calcage(secs,3600,24));
DisplayStr = DisplayStr.replace(/%%M%%/g, Calcage(secs,60,60));
DisplayStr = DisplayStr.replace(/%%S%%/g, Calcage(secs,1,60));
if(secs > 0)
{
document.getElementById(myDiv).innerHTML = DisplayStr;
setTimeout("CountBack('" + myDiv + "'," + (secs-1) + ", '"+desh+"' );", 990);
}
else
{
    document.getElementById(desh).disabled = true;
    document.getElementById(myDiv).innerHTML = "cuenta atras ha terminado!";
}
}
</script>

Estaba observando que enviabas una cadena con formato "09/07/2011 07:28 PM", la cual a mi no me funcionaba, asi que la cambie por un objeto con estos datos como enteros (hace falta recordar que el mes se expresa como mes-1, asi enero no es 1, si no 0). Espero que te halla servido de ayuda.

gonfrias19 · #9 (**permalink**) 21/08/2011, 16:14

Por fiiinnnn!!!!
MUCHISIMAS GRACIAS!!!!!
Te doy un 10!!!

gonfrias19 · #10 (**permalink**) 21/08/2011, 16:22

Abusando un poco de tu enorme conocimiento...
Se podria sumar tambien, que cuando acabe el tiempo, a parte de poner "cuenta atras ha terminado" , bloquear el boton, se podria enviar un email a una direccion de correo cogida de la base de datos Mysql, con la pagina web donde esta el reloj, impresa en el email?

Muchisimas gracias de nuevo!

laratik · #11 (**permalink**) 21/08/2011, 16:46

Cita:

Iniciado por gonfrias19

Abusando un poco de tu enorme conocimiento...
Se podria sumar tambien, que cuando acabe el tiempo, a parte de poner "cuenta atras ha terminado" , bloquear el boton, se podria enviar un email a una direccion de correo cogida de la base de datos Mysql, con la pagina web donde esta el reloj, impresa en el email?

Muchisimas gracias de nuevo!

Para lo que necesitas, debes emplear un lenguaje del lado del servidor (PHP, ASP, JSP, etc), tanto para enviar el mail, como para extraer datos de mysql, con javscript lo único que podrás hacer es redireccionar al script del lado del servidor o utilizar AJAX. Asi que te sugiero empieces a investigar la manera de enviar correos (si piensas emplear PHP) y como se trabaja SQL desde el lenguaje que vayas a utilizar. Ya cuando estes desarrollando tu proyecto puedes volver a pedir asistencia. SALUDOS

.