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

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.