Impedire l'invio di moduli JavaScript

Kushank Singh 12 ottobre 2023
  1. Utilizzare una funzione all’interno del tag script per interrompere l’esecuzione di un modulo in JavaScript
  2. Utilizzare il JavaScript Vanilla per interrompere l’esecuzione del modulo in JavaScript
  3. Utilizzare la libreria jQuery per interrompere l’esecuzione del modulo in JavaScript
  4. Usa il Dojo Toolkit per interrompere l’esecuzione del modulo in JavaScript
Impedire l'invio di moduli JavaScript

JavaScript è supportato da tutti i browser Web e viene utilizzato per creare pagine Web dinamiche. In questo tutorial, fermeremo l’esecuzione di un modulo utilizzando JavaScript.

Utilizzare una funzione all’interno del tag script per interrompere l’esecuzione di un modulo in JavaScript

Il tag script viene utilizzato per contenere uno script lato client. Abbiamo creato una funzione JavaScript all’interno dei tag script per impedire l’invio del modulo.

Controlla il codice qui sotto.

<form onsubmit="submitForm(event)">
  <input type="text">
  <button type="submit">Submit</button>
</form>
<script type="text/JavaScript">
  function submitForm(event){
    event.preventDefault();
    window.history.back();
  }
</script>

La funzione preventDefault() non consente l’esecuzione dell’azione predefinita dell’evento. Il window.history.back() ci porta all’URL precedente nella nostra cronologia. Tutti i metodi discussi includeranno queste due funzioni.

Utilizzare il JavaScript Vanilla per interrompere l’esecuzione del modulo in JavaScript

Vanilla JavaScript funziona esclusivamente su JavaScript senza l’uso di librerie aggiuntive.

Un listener di eventi può essere utilizzato per impedire l’invio di moduli. Viene aggiunto al pulsante di invio, che eseguirà la funzione e impedirà l’invio di un modulo quando viene cliccato.

Per esempio,

element.addEventListener('submit', function(event) {
  event.preventDefault();
  window.history.back();
}, true);

Utilizzare la libreria jQuery per interrompere l’esecuzione del modulo in JavaScript

jQuery è una libreria veloce e robusta che semplifica l’uso di JavaScript. È una delle librerie più popolari di JavaScript.

Vedremo come è possibile impedire l’invio del modulo.

Controlla il codice qui sotto.

$('#form').submit(function(event) {
  event.preventDefault();
  window.history.back();
});

La funzione $('#form').submit() viene utilizzata per inviare un modulo in jQuery.

Usa il Dojo Toolkit per interrompere l’esecuzione del modulo in JavaScript

È una libreria JavaScript che aiuta a facilitare l’uso multipiattaforma di JavaScript per le applicazioni basate sul web. Utilizza la funzione dojo.connect() per gestire gli eventi. Nel nostro caso, questo viene utilizzato per l’invio del modulo e lo impediremo utilizzando la funzione preventDefault() e window.history.back().

Per esempio,

dojo.connect(form, 'submit', function(event) {
  event.preventDefault();
  window.history.back();
});

Articolo correlato - JavaScript Form