Intercepter une soumission de formulaire en JavaScript et empêcher la soumission normale

Question

Il semble y avoir beaucoup d'informations sur la façon de soumettre un formulaire en utilisant JavaScript, mais je cherche une solution pour capturer quand un formulaire a été soumis et l'intercepter en JavaScript.

HTML

 Go

Quand un utilisateur appuie sur le bouton de soumission, je ne veux pas que le formulaire soit soumis, mais je voudrais qu'une fonction JavaScript soit appelée.

function captureForm() {
 // faire quelque chose avec les valeurs dans le formulaire
 // arrêter la soumission du formulaire
}

Une astuce rapide serait d'ajouter une fonction onclick au bouton mais je n'aime pas cette solution... il existe de nombreuses façons de soumettre un formulaire... par exemple en appuyant sur la touche Entrée lorsque l'on est sur un champ de saisie, ce qui n'est pas pris en compte.

Merci

Answer 1

    Go

En JS :

function processForm(e) {
    if (e.preventDefault) e.preventDefault();

    /* faites ce que vous voulez avec le formulaire */

    // Vous devez retourner false pour éviter le comportement par défaut du formulaire
    return false;
}

var form = document.getElementById('my-form');
if (form.attachEvent) {
    form.attachEvent("submit", processForm);
} else {
    form.addEventListener("submit", processForm);
}

Éditer : à mon avis, cette approche est meilleure que de définir l'attribut onSubmit sur le formulaire car elle maintient la séparation entre la mise en forme et la fonctionnalité. Mais ce ne sont que mes deux cents.

Éditer2 : J'ai mis à jour mon exemple pour inclure preventDefault()

Answer 2

Vous ne pouvez pas attacher des événements avant que les éléments auxquels vous les attachez aient été chargés

Il est recommandé d'utiliser des eventListeners - ici lorsque la page se charge et une autre lorsque le formulaire est soumis.

REMARQUE : NE NOMMEZ JAMAIS quelque chose dans un formulaire "submit"

Cela fonctionne depuis IE9 :

JS Plain/Vanilla

// Ne doit être déclenché qu'au chargement initial de la page
console.log('ho');

window.addEventListener("DOMContentLoaded", function() {
  document.getElementById('my-form').addEventListener("submit", function(e) {
    e.preventDefault(); // avant le code
    /* faites ce que vous voulez avec le formulaire */

    // Sera déclenché lors de la soumission du formulaire
    console.log('hi');
  })
});

  Go

jQuery

// Ne doit être déclenché qu'au chargement initial de la page
console.log('ho');

$(function() {
  $('#my-form').on("submit", function(e) {
    e.preventDefault(); // annule la soumission effective

    /* faites ce que vous voulez avec le formulaire */

    // Sera déclenché lors de la soumission du formulaire
    console.log('hi');
  });
});

  Go

Non recommandé mais fonctionnera

Si vous n'avez pas besoin de plus d'un gestionnaire d'événements, vous pouvez utiliser onload et onsubmit

// Ne doit être déclenché qu'au chargement initial de la page
console.log('ho');

window.onload = function() {
  document.getElementById('my-form').onsubmit = function() {
    /* faites ce que vous voulez avec le formulaire */

    // Doit être déclenché lors de la soumission du formulaire
    console.log('hi');
    // Vous devez retourner false pour empêcher le comportement par défaut du formulaire
    return false;
  }
}

  Go

Answer 3

Cela devrait faire l'affaire. Assurez-vous que votre méthode captureForm() renvoie false.

Answer 4

Une autre option pour gérer toutes les demandes que j'ai utilisées dans ma pratique pour les cas où onload ne peut pas aider consiste à gérer les soumissions JavaScript, les soumissions HTML, les demandes ajax. Ce code doit être ajouté en haut de l'élément body pour créer un écouteur avant que tout formulaire soit rendu et soumis.

Par exemple, j'ajoute un champ caché à n'importe quel formulaire sur la page lors de sa soumission, même si cela se produit avant le chargement de la page.

// Gère les requêtes ajax jquery, dojo, etc.
(function (send) {
    var token = $("meta[name='_csrf']").attr("content");
    var header = $("meta[name='_csrf_header']").attr("content");
    XMLHttpRequest.prototype.send = function (data) {
        if (isNotEmptyString(token) && isNotEmptyString(header)) {
            this.setRequestHeader(header, token);
        }
        send.call(this, data);
    };
})(XMLHttpRequest.prototype.send);

// Gère les soumissions JavaScript
(function (submit) {
    HTMLFormElement.prototype.submit = function (data) {
        var token = $("meta[name='_csrf']").attr("content");
        var paramName = $("meta[name='_csrf_parameterName']").attr("content");
        $('').attr({
            type: 'hidden',
            name: paramName,
            value: token
        }).appendTo(this);

        submit.call(this, data);
    };
})(HTMLFormElement.prototype.submit);

// Gère les soumissions HTML
document.body.addEventListener('submit', function (event) {
    var token = $("meta[name='_csrf']").attr("content");
    var paramName = $("meta[name='_csrf_parameterName']").attr("content");
    $('').attr({
        type: 'hidden',
        name: paramName,
        value: token
    }).appendTo(event.target);
}, false);

Answer 5

Utilisez la réponse de @Kristian Antonsen, ou vous pouvez utiliser :

$('button').click(function() {
    preventDefault();
    captureForm();
});