Evitar el envío de formularios JavaScript

Kushank Singh 12 octubre 2023
  1. Utilice una función dentro de la etiqueta script para detener la ejecución de un formulario en JavaScript
  2. Use el JavaScript de Vanilla para detener la ejecución del formulario en JavaScript
  3. Utilice la biblioteca jQuery para detener la ejecución del formulario en JavaScript
  4. Utilice el kit de herramientas de Dojo para detener la ejecución del formulario en JavaScript
Evitar el envío de formularios JavaScript

JavaScript es compatible con todos los navegadores web y se utiliza para crear páginas web dinámicas. En este tutorial, detendremos la ejecución de un formulario usando JavaScript.

Utilice una función dentro de la etiqueta script para detener la ejecución de un formulario en JavaScript

La etiqueta script se utiliza para contener un script del lado del cliente. Hemos creado una función de JavaScript dentro de las etiquetas script para evitar el envío del formulario.

Verifique el código a continuación.

<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 función preventDefault() no permite que se lleve a cabo la acción predeterminada del evento. El window.history.back() nos lleva a la URL anterior en nuestro historial. Todos los métodos discutidos incluirán estas dos funciones.

Use el JavaScript de Vanilla para detener la ejecución del formulario en JavaScript

Vanilla JavaScript funciona exclusivamente en JavaScript sin el uso de bibliotecas adicionales.

Se puede utilizar un detector de eventos para evitar el envío de formularios. Se agrega al botón enviar, que ejecutará la función y evitará que se envíe un formulario cuando se haga clic en él.

Por ejemplo,

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

Utilice la biblioteca jQuery para detener la ejecución del formulario en JavaScript

jQuery es una biblioteca rápida y robusta que simplifica el uso de JavaScript. Es una de las bibliotecas de JavaScript más populares.

Veremos cómo podemos evitar el envío del formulario.

Verifique el código a continuación.

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

La función $('#form').submit() se usa para enviar un formulario en jQuery.

Utilice el kit de herramientas de Dojo para detener la ejecución del formulario en JavaScript

Es una biblioteca de JavaScript que ayuda a facilitar el uso multiplataforma de JavaScript para aplicaciones basadas en web. Utiliza la función dojo.connect() para manejar eventos. En nuestro caso, esto se usa para el envío de formularios, y lo evitaremos usando la función preventDefault() y window.history.back().

Por ejemplo,

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

Artículo relacionado - JavaScript Form