web-dev-qa-db-fra.com

Capturer un formulaire à soumettre en JavaScript

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 le moment où un formulaire a été soumis et l’intercepter en javascript.

HTML

<form>
 <input type="text" name="in" value="some data" />
 <button type="submit">Go</button>
</form>

Lorsqu'un utilisateur appuie sur le bouton d'envoi, je ne souhaite pas soumettre le formulaire, mais je souhaite plutôt appeler une fonction JavaScript.

function captureForm() {
 // do some stuff with the values in the form
 // stop form from being submitted
}

Un hack rapide consisterait à 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 Entrée pendant une entrée, ce que cela ne prend pas en compte.

Ty

javascripthtmlforms
67
mrwooster
<form id="my-form">
    <input type="text" name="in" value="some data" />
    <button type="submit">Go</button>
</form>

En JS:

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

    /* do what you want with the form */

    // You must return false to prevent the default form behavior
    return false;
}

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

Edit: à mon avis, cette approche est préférable à la définition de l'attribut onSubmit sur le formulaire, car elle maintient une séparation entre les balises et les fonctionnalités. Mais ce n'est que mes deux centimes.

Edit2: Mise à jour mon exemple pour inclure preventDefault()

77
Michael McTiernan

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

Cela marche -

Plain JS

DÉMO

Recommandé d'utiliser eventListener

window.addEventListener("load",function() {
  document.getElementById('my-form').addEventListener("submit",function(e) {
    e.preventDefault(); // before the code
    /* do what you want with the form */

    // Should be triggered on form submit
    alert('hi');
  });
});

mais si vous n'avez pas besoin de plus d'un auditeur, vous pouvez utiliser onload et onsubmit

// Should only be triggered on first page load
alert('ho');

window.onload=function() {
    document.getElementById('my-form').onsubmit=function() {
    /* do what you want with the form */

    // Should be triggered on form submit
    alert('hi');
    // You must return false to prevent the default form behavior
    return false;
  }
}

jQuery 

// Should only be triggered on first page load
alert('ho');

$(function() {
  $('#my-form').on("submit",function(e) {
    e.preventDefault(); // cancel the actual submit

    /* do what you want with the form */

    // Should be triggered on form submit

    alert('hi');
  });
});
24
mplungjan

<form onSubmit="return captureForm()"> cela devrait faire. Assurez-vous que votre méthode captureForm() renvoie false.

16
kba

Une autre option pour gérer toutes les demandes que j'ai utilisées dans mon cabinet pour les cas où onload ne peut pas aider est de gérer les demandes javascript, submit html, ajax. Ce code doit être ajouté dans la partie supérieure de l'élément body pour créer un programme d'écoute avant tout formulaire rendu et soumis.

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

//Handles jquery, dojo, etc. ajax requests
(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);


//Handles javascript submit
(function (submit) {
    HTMLFormElement.prototype.submit = function (data) {
        var token = $("meta[name='_csrf']").attr("content");
        var paramName = $("meta[name='_csrf_parameterName']").attr("content");
        $('<input>').attr({
            type: 'hidden',
            name: paramName,
            value: token
        }).appendTo(this);

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


//Handles html submit
document.body.addEventListener('submit', function (event) {
    var token = $("meta[name='_csrf']").attr("content");
    var paramName = $("meta[name='_csrf_parameterName']").attr("content");
    $('<input>').attr({
        type: 'hidden',
        name: paramName,
        value: token
    }).appendTo(event.target);
}, false);
4
Vitaliy Borisok

Utilisez la réponse de @Kristian Antonsen ou utilisez:

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