Jquery – Ricaricare la pagina subito dopo il submit di un form

A volte può essere necessario ricaricare la pagina solo dopo un certo lasso di tempo

Per esigenze di un cliente, mi è capitato di dover ricaricare la pagina subito dopo l’invio di un form di login. Più in concreto, la pagina di destinazione del form si apriva a parte, mentre la pagina corrente doveva essere ricaricata subito dopo.
Non solo: la pagina del form doveva ricaricarsi qualche secondo dopo l’invio, così da lasciare il tempo al cookies di settarsi e di “mostrare” al sito che l’utente era effettivamente loggato.

Una simile operazione può essere fatta facilmente con il semplice utilizzo di javascript e jquery.
Il concetto è semplice e richiede un codice di implementazione molto breve.

Ridotto ai minimi termini, il form è qualcosa di simile al seguente. Cliccando sul link “Login”, si richiamerà la funzione login_submit().

1
2
3
4
5
6

<form id="login" method="post" action="" target="_blank">
	<input type="text" name="username" value="" /><br />
	<input type="password" name="password" value="" />
</form>
<br /><br />
<a href="javascript:void(0)" onclick="login_submit()">Login</a>

Diamo un’occhiata al cuore dello script: due semplici funzioni javascript.

1
2
3
4
5
6
7
8

function login_submit(){
	$('#login').submit();
	setTimeout(ricarica_pagina, 3000);
}

function ricarica_pagina(){
	window.location.reload();
}

La funzione login_submit() che era stata richiamata si occupa, prima di tutto, di effettuare il submit del form che ha “id=login” (che, nel nostro caso, avendo “target=_blank” si aprirà in una nuova pagina dopo l’invio dei dati).
Subito dopo fa uso della funzione setTimeout per richiamare la funzione ricarica_pagina(), il cui scopo è di riavviare la pagina corrente. Ma questa funzione sarà richiamata dopo un’attesa di 3 secondi (3mila millisecondi), dando il tempo ai cookies di settarsi.

(1) https://www.fontfont.com/fonts/page-sans