JS, mostrare il tempo rimanente al timeout, poi disabilitare pulsante submit

mentelibera

JS, mostrare il tempo rimanente al timeout, poi disabilitare pulsante submit

Salve, sfortunatamente JavaScript non è il mio forte, ma volevo sapere come disabilitare il pulsante di submit di una form dopo un certo tempo. Tengo a precisare che nello stesso pulsante c'è anche un controllo che lo attiva quando un certo checkbox è spuntato, altrimenti di default è disabilitato. Per ora si trova all'interno di un tag JavaScript che riporto solo un frammento:

[HTML]<input name="pulsante_form" id="pulsante_form" value="Invia" type="submit" disabled="disabled" />[/HTML]

Infatti per prevenire messaggi indesiderati ricorro ad un captcha che è associato ad una sessione che scade dopo un certo tempo che ho personalizzato in PHP. Quello che mi piacerebbe è mostrare un countdown (tipo hh:mm:ss) al timeout in un div oltre alla disattivazione del submit quando viene raggiunto.

Grazie per l'aiuto.

digitald

Hola, è un po che non passo di qui...

Allora, vediamo un po:
Per prima cosa devi settare il timeout credo che se arriva dal PHP lo scriverai direttamente con le funzioni lato server, giusto!?

Vediamo se riesco a fare qualcosa che ti vada bene:


<script>
/*
Questa funzione fa il controllo tra due date, passandogli la data di partenza e quella di arrivo ritorna un array contenente la differenza di giorni, ore, minuti, secondi e secondi globali
Se non si passa uno dei due parametri, la funzione prenderà la data attuale

es. distanza_tra_date('','2012,21,12,12,30,0');
Restituirà la differenza tra ora e la fine del mondo
*/
function distanza_tra_date(data_partenza,data_arrivo)
{
    if(data_partenza=='')
    {
        tn = new Date();
        timenow = new Array();
        timenow['timestamp'] = tn.getTime()/1000;
    }
    else
    {
        data_partenza = data_partenza.split(',')
        timenow['timestamp'] =  new Date(Date.UTC(data_partenza[0],data_partenza[1],data_partenza[2],data_partenza[3],data_partenza[4],data_partenza[5],0))/1000;
    }
    
    if(data_arrivo=='')
    {
        tn = new Date();
        timeout = new Array();
        timeout['timestamp'] = tn.getTime()/1000;
    }
    else
    {
        timeout = new Array();
        data_arrivo = data_arrivo.split(',')
        timeout_timestamp =  new Date(Date.UTC(data_arrivo[0],data_arrivo[1],data_arrivo[2],data_arrivo[3],data_arrivo[4],data_arrivo[5],0));
        timeout['timestamp'] = (timeout_timestamp.getTime()/1000);
    }
    
    secondi_differenza =  Math.ceil(timeout['timestamp']-timenow['timestamp']);
    
    differenza = new Array();
    differenza['secondi_globali'] = secondi_differenza;
    differenza['g'] = Math.ceil(secondi_differenza/(60*60*24));
    differenza['o'] = Math.ceil((secondi_differenza-(differenza['g']*(60*60*24)))/(60*60));
    if(differenza['o']<0){differenza['o'] += 24; differenza['g']--;}
    differenza['m'] = Math.ceil((secondi_differenza-((differenza['o']*(60*60))+(differenza['g']*(60*60*24))))/60);
    if(differenza['m']<0){differenza['m'] += 60; differenza['o']--;}
    differenza['s'] = Math.ceil(secondi_differenza-((differenza['m']*(60)+(differenza['o']*(60*60))+(differenza['g']*(60*60*24)))));
    if(differenza['s']<0){differenza['s'] += 60; differenza['m']--;}
    if(differenza['m']<0){differenza['m'] += 60; differenza['o']--;}
    if(differenza['o']<0){differenza['o'] += 24; differenza['g']--;}
    
    return differenza;
}

/*
Questa funzione è quella che controlla che la differenza tra le due date non sia minore/uguale a zero, in caso contrario disabilita il bottone, smette di richiamarsi e scrive un messaggio nel value del bottone
*/
function controllo_validita()
{
    data_arrivo ='2012,12,21,12,30,0,0';
    d = distanza_tra_date('',data_arrivo);
    
    if(d['secondi_globali'] <= 0){  document.getElementById('pulsante').disabled = 'disabled'; document.getElementById('pulsante').value = 'Ora è tutto finito';}
    else{ document.getElementById('pulsante').value = d['g']+' '+d['o']+':'+d['m']+':'+d['s']; st = setTimeout(controllo_validita,1000); }
    
}
</script>
<input type='submit' id="pulsante" />
<script>
//Faccio partire il countdown
controllo_validita();
</script>

digital.daigor

Ho ritovato il mio vecchio account! Comunque fammi sapere se è giusto!

mentelibera

Grazie per la risposta, riguardo il timeout della sessione lo imposto così (ovviamente è da mettere nei tag PHP prima di qualsiasi altro output generato dal server):

[PHP]<?php
ini_set('session.gc_maxlifetime','3600');
session_start();

...

?>[/PHP]

Essendo 3600 i secondi di vita della sessione. Al limite per ricondurci alla soluzione che proponi con la funzione date di PHP, con le opportune opzioni, è possibile scrivere la data di arrivo come l'avevi scritta.

Ho sperimentato il codice tale e quale, sostanzialmente funziona a parte l'orario che temo si riferisca ad UTC e non quello della macchina.

Forse non mi ero spiegato bene, ma mi sarebbe piaciuto se il countdown apparisse esternamente al pulsante che invece dovrebbe avere il valore dell'attributo value.

Una soluzione che fa l'inverso (nel senso che prima mantiene diabilitato il pulsante di submit, e poi lo abilita con la fine del timeout, poi sulla posizione dove mettere i secondi residui possiamo ragionarci in un secondo momento) di quella che mi piacerebbe l'avevo trovata su un forum inglese, e forse è da considerare più uno script di partenza:

[HTML]<html>
<head>
<script type="text/javascript">
setTimeout (function(){
document.getElementById('submitButton').disabled = null;
},10000);

var countdownNum = 10;
incTimer();

function incTimer(){
setTimeout (function(){
	if(countdownNum != 0){
	countdownNum--;
	document.getElementById('timeLeft').innerHTML = 'Time left: ' + countdownNum + ' seconds';
	incTimer();
	} else {
	document.getElementById('timeLeft').innerHTML = 'Ready!';
	}
},1000);
}

</script>
</head>

<body>
<form>
<input type="submit" disabled="disabled" id="submitButton" />
<p id="timeLeft">Time Left: 10 seconds</p>
</form>
</body>
</html>[/HTML]

Sfortunatamente non ho le basi per cambiarlo, ma mi è sembrato utile postarlo.

Ti ringrazio per la disponibilità.

digital.daigor

Dopo aver letto che volevi mostrare hh:mm:ss ho dato per scontato fosse un countdown a obiettivo e non a consumo...

in questo caso, ecco qui:


<script>
var timeout2 = 3600;//3600 secondi

function controlla_validita2()
{
	if(timeout2 > 0){	document.getElementById('pulsante2').disabled = ''; timeout2--; st = setTimeout(controlla_validita2,1000); }
	else{	document.getElementById('pulsante2').disabled = 'disabled'; }
	
	secondi_differenza = timeout2;
	differenza = new Array();
	differenza['secondi_globali'] = secondi_differenza;
	differenza['g'] = Math.ceil(secondi_differenza/(60*60*24));
	differenza['o'] = Math.ceil((secondi_differenza-(differenza['g']*(60*60*24)))/(60*60));
	if(differenza['o']<0){differenza['o'] += 24; differenza['g']--;}
	differenza['m'] = Math.ceil((secondi_differenza-((differenza['o']*(60*60))+(differenza['g']*(60*60*24))))/60);
	if(differenza['m']<0){differenza['m'] += 60; differenza['o']--;}
	differenza['s'] = Math.ceil(secondi_differenza-((differenza['m']*(60)+(differenza['o']*(60*60))+(differenza['g']*(60*60*24)))));
	if(differenza['s']<0){differenza['s'] += 60; differenza['m']--;}
	if(differenza['m']<0){differenza['m'] += 60; differenza['o']--;}
	if(differenza['o']<0){differenza['o'] += 24; differenza['g']--;}
	
	document.getElementById('timeout').innerHTML = differenza['o']+':'+differenza['m']+':'+differenza['s'];
}
</script>
<input type='submit' id="pulsante2" value="pulsante" /><div id="timeout"></div>
<script>
//Faccio partire il countdown
controlla_validita2();
</script>

Dimmi se mi sto avvicinando!

mentelibera

Sì, un po' alla volta ci stiamo avvicinando alla soluzione
Tuttavia manca il caso in cui un checkbox "pilota" abilitando o disabilitando il pulsante del submit, nel senso che se non fosse selezionato il pulsante rimarrà disattivato, mentre quando si mette il segno di spunta si abilita.
Resta dato per scontato che il countdown prosegue dalla generazione della pagina e non da quando il checkbox cambia valore.
Il modulo lo avevo fatto originariamente così:

[HTML]
<html>
<head>
<script type="text/javascript" src="controllaform.js"></script>
<script type="text/javascript">
function verifica(){
if(document.mia_form.checkbox_pilota.checked)
document.mia_form.pulsante_form.disabled="";
else
document.mia_form.pulsante_form.disabled="disabled";
}
</script>
</head>
<body>
<form method="post" id="mia_form" name="mia_form" action="" onsubmit="return ChkFrm(this)">
<input type="checkbox" name="checkbox_pilota" onclick="verifica()" /> Checkbox pilota</label><br />

Nota: Ho visto l'anteprima e per qualche ragione sconosciuta non mostra il tag di chiusura della form che invece ho messo nel codice, e forse questo errore si presenterà con la pubblicazione del post. Sorry.

Ho cercato di fare qualche esperimento negli ultimi minuti ricombinando la tua soluzione al mio caso fallendo, ma ho l'impressione che siamo sulla buona strada

digital.daigor

Così!?


<html>
<head>
<script type="text/javascript" src="controllaform.js"></script>
<script>
var timeout2 = 3600;//3600 secondi

function controlla_validita2()
{

	if(timeout2 > 0)
	{	
		if(document.getElementById('checkbox_pilota').checked)
		{
				document.getElementById('pulsante_form').disabled = '';
		}
		else
		{
			document.getElementById('pulsante_form').disabled = 'disabled';
		} 
		timeout2--; st = setTimeout(controlla_validita2,1000); 
	}
	else{	document.getElementById('"pulsante_form').disabled = 'disabled'; }
	
	secondi_differenza = timeout2;
	differenza = new Array();
	differenza['secondi_globali'] = secondi_differenza;
	differenza['g'] = Math.ceil(secondi_differenza/(60*60*24));
	differenza['o'] = Math.ceil((secondi_differenza-(differenza['g']*(60*60*24)))/(60*60));
	if(differenza['o']<0){differenza['o'] += 24; differenza['g']--;}
	differenza['m'] = Math.ceil((secondi_differenza-((differenza['o']*(60*60))+(differenza['g']*(60*60*24))))/60);
	if(differenza['m']<0){differenza['m'] += 60; differenza['o']--;}
	differenza['s'] = Math.ceil(secondi_differenza-((differenza['m']*(60)+(differenza['o']*(60*60))+(differenza['g']*(60*60*24)))));
	if(differenza['s']<0){differenza['s'] += 60; differenza['m']--;}
	if(differenza['m']<0){differenza['m'] += 60; differenza['o']--;}
	if(differenza['o']<0){differenza['o'] += 24; differenza['g']--;}
	
	document.getElementById('timeout').innerHTML = differenza['o']+':'+differenza['m']+':'+differenza['s'];
}
</script>
</head>
<body>
<form method="post" id="mia_form" name="mia_form" action="" onsubmit="return ChkFrm(this)">
<input type="checkbox" name="checkbox_pilota" onclick="verifica()" id='checkbox_pilota' /> Checkbox pilota</label><br />

<!-- altri campi da compilare... -->

<script type="text/javascript">
<!--
document.write("<p><input name=\"pulsante_form\" id=\"pulsante_form\" value=\"Invia\" type=\"submit\" disabled=\"disabled\" /><span id='timeout'></span></p>");
controlla_validita2();
// -->
</script>
</form>

mentelibera

Ottima.
Dovrei provare a combinarla con il resto della form ma ci siamo, grazie!
Per caso sai se fosse possibile inserire uno zero quando per esempio i secondi, minuti od ore sono composti da una sola cifra (per esempio anziché 0:53:3 metterla nel formato 00:53:03)?

Poi mi dovrò vedere con attenzione come si potrà personalizzare il punto in cui mettere il tempo residuo.

Nel frattempo provo a metterla nel contesto più ingarbugliato, ma ti ringrazio sentitamente.

mentelibera

Me tapino ad aver gioito troppo in fretta...
Purtroppo mi sono accorto che alla fine del timeout il pulsante di submit rimane attivato, mentre avrei voluto che automaticamente si disattivasse indipendentemente dal checkbox pilota.
Almeno in questa fase di sviluppo mi sa che conviene avere timeout bassi.

Ho cercato di fare un piccolo tentativo cambiando questa riga che è quella che gestisce la fine del timeout

[HTML]else{ document.getElementById('"pulsante_form').disabled = 'disabled'; }[/HTML]

con questa

[HTML]else{ document.getElementById('"pulsante_form').disabled = 'disabled'; return;}[/HTML]

perché pensavo che dovesse uscire dalla funzione senza più proseguire per le altre istruzioni, eppure c'è qualcosa che non va.

digital.daigor

Il problema stava soltanto in una " di troppo...

nel mentre ho anche aggiunto un controllo sulla scrittura del countdown e sui numeri minori di 10...


<html>
<head>
<script type="text/javascript" src="controllaform.js"></script>
<script>
var timeout2 = 10;//3600 secondi

function controlla_validita2()
{
timeout2--;
	if(timeout2 >= 0)
	{	
		if(document.getElementById('checkbox_pilota').checked)
		{
				document.getElementById('pulsante_form').disabled = '';
		}
		else
		{
			document.getElementById('pulsante_form').disabled = 'disabled';
		} 
		 
		st = setTimeout(controlla_validita2,1000); 
	}
	else
	{	
		document.getElementById('pulsante_form').disabled = 'disabled'; 
	}
	
	
	secondi_differenza = timeout2;
	differenza = new Array();
	differenza['secondi_globali'] = secondi_differenza;
	differenza['g'] = Math.ceil(secondi_differenza/(60*60*24));
	differenza['o'] = Math.ceil((secondi_differenza-(differenza['g']*(60*60*24)))/(60*60));
	if(differenza['o']<0){differenza['o'] += 24; differenza['g']--;}
	differenza['m'] = Math.ceil((secondi_differenza-((differenza['o']*(60*60))+(differenza['g']*(60*60*24))))/60);
	if(differenza['m']<0){differenza['m'] += 60; differenza['o']--;}
	differenza['s'] = Math.ceil(secondi_differenza-((differenza['m']*(60)+(differenza['o']*(60*60))+(differenza['g']*(60*60*24)))));
	if(differenza['s']<0){differenza['s'] += 60; differenza['m']--;}
	if(differenza['m']<0){differenza['m'] += 60; differenza['o']--;}
	if(differenza['o']<0){differenza['o'] += 24; differenza['g']--;}
	
	differenza['o'] = (differenza['o']<10)?'0'+differenza['o']:differenza['o'];
	differenza['m'] = (differenza['m']<10)?'0'+differenza['m']:differenza['m'];
	differenza['s'] = (differenza['s']<10)?'0'+differenza['s']:differenza['s'];
	
	if(timeout2 >= 0)
	{
		document.getElementById('timeout').innerHTML = differenza['o']+':'+differenza['m']+':'+differenza['s'];
	}
}
</script>
</head>
<body>
<form method="post" id="mia_form" name="mia_form" action="" onSubmit="return ChkFrm(this)">
<input type="checkbox" name="checkbox_pilota" onClick="verifica()" id='checkbox_pilota' /> Checkbox pilota</label><br />

<!-- altri campi da compilare... -->

<script type="text/javascript">
<!--
document.write("<p><input name=\"pulsante_form\" id=\"pulsante_form\" value=\"Invia\" type=\"submit\" disabled=\"disabled\" /><span id='timeout'></span></p>");
controlla_validita2();
// -->
</script>
</form>

mentelibera

Sei un grande Digital Daigor.
Anche se c'è un piccolo ritardo nell'attivare il pulsante del submit all'attivazione del checkbox pilota (probabilmente lo attiva solo nel nuovo ciclo) tuttavia pensando in un lasso di tempo maggiore è tollerabile.
Dopo la pubblicazione del post mi ero tuffato a capofitto per vedere se in qualche meandro della Rete ci fosse qualche soluzione, ma non sembrava esistere.
Grazie della pazienza.

digital.daigor

Il ritardo è proprio dovuto al ciclo, se lo estrapoli da li e lo fai funzionare parallelamente, lo elimini...

mentelibera

Forse sbaglierò, ma stai pensando a qualcosa come una mutua ricorsione, nel dettaglio una funzione che dopo il decremento richiama un'altra. Quest'ultima rimane in attesa di un evento dell'utente (attivare o disattivare il checkbox pilota) per un secondo e poi richiama la precedente. Il tutto finché ci sono secondi disponibili?
Una soluzione che sarebbe interessante approfondire...

digital.daigor

Il rimanere in attesa dell'utente in una funzione JS, credo sia di difficile implementazione...

Direi piuttosto di attivare/disattivare il bottone da un'altra funzione, e la funzione del countdown confermerebbe o reificherebbe nel giro di un secondo.

Credo sia più facile!

mentelibera

Ho provato a scrivere un po' di codice (sono stato preso con uno script PHP abbastanza grosso) e parzialmente ho risolto il problema del sincronismo. Ecco il nuovo:

[HTML]<html>
<head>
<script type="text/javascript" src="controllaform.js"></script>
<script type="text/javascript">
var timeout2 = 10;//3600 secondi

	differenza['o'] = (differenza['o']<10)?'0'+differenza['o']:differenza['o'];
	differenza['m'] = (differenza['m']<10)?'0'+differenza['m']:differenza['m'];
	differenza['s'] = (differenza['s']<10)?'0'+differenza['s']:differenza['s'];
	
	if(timeout2 >= 0) {
		document.getElementById('timeout').innerHTML = differenza['o']+':'+differenza['m']+':'+differenza['s'];
	}
}
else
{	
	document.getElementById('pulsante_form').disabled = 'disabled'; 
}

}
</script>

</head>
<body>
<form method="post" id="mia_form" name="mia_form" action="" onSubmit="return ChkFrm(this)">
<input type="checkbox" name="checkbox_pilota" onClick="cambia_stato()" id='checkbox_pilota' /> Checkbox pilota</label><br />

Il problema che ho attualmente è che alla fine del countdown il pulsante di submit è ancora pilotato dal checkbox.

Un saluto all'Australia, ieri ho letto un articolo online interessante.[/OT]

mentelibera

Ho cercato di evolvere il codice in quest'altra forma:

[HTML]<html>
<head>
<script type="text/javascript" src="controllaform.js"></script>
<script type="text/javascript">
var timeout2 = 10;//3600 secondi

	differenza['o'] = (differenza['o']<10)?'0'+differenza['o']:differenza['o'];
	differenza['m'] = (differenza['m']<10)?'0'+differenza['m']:differenza['m'];
	differenza['s'] = (differenza['s']<10)?'0'+differenza['s']:differenza['s'];
	
	if(timeout2 >= 0) {
		document.getElementById('timeout').innerHTML = differenza['o']+':'+differenza['m']+':'+differenza['s'];
	}
}
else
{	
	document.getElementById('pulsante_form').disabled = 'disabled'; 
	//disabilita_submit_button();
	
}
return false;

}
</script>

function disabilita_submit_button() {
if (controlla_validita2() && cambia_stato()) {
document.mia_form.pulsante_form.disabled='';
} else {
document.mia_form.pulsante_form.disabled="disabled";
}
}
</script>

</head>
<body>
<form method="post" id="mia_form" name="mia_form" action="" onSubmit="return ChkFrm(this)">
<input type="checkbox" name="checkbox_pilota" onClick="cambia_stato()" id='checkbox_pilota' /> Checkbox pilota</label><br />

Motivazioni: ho cambiato il codice oltre ad aggiungere la funzione disabilita_submit_button() il cui scopo dovrebbe abilitare il submit solo se entrambi i predicati fossero veri.
Tuttavia nonostante il sincronismo, dopo che è scaduto il timeout il checkbox pilota continua ad agire sul pulsante di submit.