Prevenire l’invio di un form HTML

Il web è il miglior posto dove poter scambiare e condividere dati e informazioni tra utenti, ogni sito web generalmente è provvisto di moduli, detti anche form, predisposti per l’invio di specifiche informazioni. Che sia ad esempio un modulo per la richiesta di contatto, l’invio di email, una sezione di caricamento di immagini o di altre tipologie.

In ogni sito web sono presenti moduli, che hanno il compito di inviare dati al server per la loro elaborazione. Personalmente, come sviluppatore, ho avuto necessità di creare form HTML che non dovessero inviare dati, dunque ho dovuto costruire “finti” moduli che non eseguissero l’invio delle informazioni contenute nei campi di testo e non reindirizzassero gli utenti in un’altra pagina. Prevenire l’invio di un form in HTML è facile e non richiede particolari conoscenze, dunque se anche tu hai la necessità di bloccare l’invio dei moduli nella tua pagina HTML ora ti spiegherò come fare.

Impedire l’invio di un form HTML

Impedire (o prevenire) l’invio di un form HTML (in inglese: “Prevent HTML form submit“) è semplice e per fare in modo che il browser non esegua l’invio di questa richiesta abbiamo bisogno dell’aiuto di JavaScript. In puro HTML non è possibile eseguire questa operazione ma è necessario “istruire” la pagina con della semplice programmazione JavaScript.

Non hai bisogno di conoscere JavaScript per seguire questa guida, poiché il codice da inserire è veramente poco e ti basterà fare un copia/incolla di quello che ti mostrerò.

Cosa si intende per “prevenire l’invio del form”?

I moduli HTML sono elementi definiti tramite i tag <form> e </form> e comprendono tutti gli elementi di input che permettono agli utenti di digitare parole e informazioni (esempio: nome, cognome, data di nascita etc…).

Nei form sono sempre presenti dei pulsanti di invio (submit) che permettono di completare la procedura e mandare queste informazioni al server su cui è ospitato il sito, con conseguente refresh della pagina o reindirizzamento su un’altra pagina.

Prevenire l’invio del form significa proprio “impedire” che il form invii le informazioni al server tramite click sul pulsante “submit” oppure attraverso la pressione del tasto “Enter” da tastiera, mantenendo la sessione attiva dell’utente senza refresh o reindirizzamento (l’invio del form potrebbe anche avvenire tramite richiesta AJAX).

Non è l’utente/visitatore che decide di non mandare dati con un form, ma è lo sviluppatore del sito che programma il form affinché questo avvenga.

Il codice

Ci sono differenti modi per bloccare un form con JavaScript, qui in basso ti mostrerò tre metodi facili da applicare in tutti i contesti.

Metodo inline:

<form onsubmit="event.preventDefault()">
   ...
   <input type="submit" value="Invia">
 </form>

Metodo “onpage“:

<form>
   ...
   <input type="submit" value="Invia">
 </form>

<script>
document.getElementsByTagName('form')[0].onsubmit = function (e){
   e.preventDefault();
 }
</script>

Metodo “onpage” con funzione dedicata:

<form onsubmit="prevent(event)">
   ...
   <input type="submit" value="Invia">
 </form>

<script>
 function prevent(e){
   e.preventDefault();
 }
</script>

Lo scopo di questi metodi è il medesimo, anche se apparentemente differenti, perché tendono a rilevare l’evento “submit” del form HTML e ad impedirlo con la funzione “preventDefault()“.

Articoli recenti:

• Upgrade Scheda Rete. Sostituzione della Realtek RTL8822CE
• Da jQuery a JavaScript Puro: Sfruttare il Potenziale Nativo del Web
• Come Risolvere i Problemi di Connessione Bluetooth al PC
• Guida alla Cybersecurity: Come proteggerti da minacce informatiche
• Come Aggiungere un Dizionario su App Kindle