web-dev-qa-db-fra.com

Formulaire Envoyer Exécuter JavaScript Meilleure pratique?

Je voudrais exécuter une fonction JavaScript lorsqu'un formulaire est soumis. Le problème est que, lorsque le formulaire est soumis, la page est rechargée et les valeurs du formulaire sont ajoutées à l'URL en tant que paramètres GET. Je voudrais qu'il reste sur la page en cours et n'exécute que la fonction JavaScript.

Je me demandais quelle était la meilleure pratique (ou ce que vous faites) pour éviter l'envoi du rechargement de page et des paramètres.

javascripthtmlforms
43
gberg927

Utilisez l'événement onsubmit pour exécuter le code JavaScript lors de l'envoi du formulaire. Vous pouvez ensuite renvoyer false ou appeler la méthode preventDefault de l'événement transmis pour désactiver la soumission du formulaire.

Par exemple:

<script>
function doSomething() {
    alert('Form submitted!');
    return false;
}
</script>

<form onsubmit="return doSomething();" class="my-form">
    <input type="submit" value="Submit">
</form>

Cela fonctionne, mais il est préférable de ne pas ajouter de code HTML à votre code HTML, tout comme vous ne devriez pas écrire beaucoup de règles CSS en ligne. De nombreux frameworks Javascript facilitent cette séparation des préoccupations. Dans jQuery, vous liez un événement à l'aide d'un code JavaScript comme suit:

<script>
$('.my-form').on('submit', function () {
    alert('Form submitted!');
    return false;
});
</script>

<form class="my-form">
    <input type="submit" value="Submit">
</form>
71
moteutsch

Je sais qu'il est un peu tard pour ça. Mais j'ai toujours pensé que le meilleur moyen de créer des auditeurs d'événements est directement à partir de JavaScript. Un peu comme ne pas appliquer les styles CSS en ligne.

function validate(){
    //do stuff
}
function init(){
    document.getElementById('form').onsubmit = validate;
}
window.onload = init;

De cette façon, vous n'avez pas beaucoup d'auditeurs d'événements tout au long de votre code HTML.

8
Martin

Attachez un gestionnaire d'événement à l'événement submit du formulaire. Assurez-vous qu'il annule l'action par défaut.

Le mode Quirks a n guide des gestionnaires d'événements , mais il serait probablement préférable d'utiliser une bibliothèque pour simplifier le code et résoudre les différences entre les navigateurs. Tous les principaux (tels que YUI et jQuery ) incluent des fonctionnalités de gestion d'événements, et il existe une grande collection de bibliothèques d'événements minuscules .

Voici comment vous le feriez dans YUI 3:

<script src="http://yui.yahooapis.com/3.4.1/build/yui/yui-min.js"></script>
<script>
    YUI().use('event', function (Y) {
        Y.one('form').on('submit', function (e) {
            // Whatever else you want to do goes here
            e.preventDefault();
        });
    });
</script>

Assurez-vous que le serveur prendra le relais si le JavaScript échoue pour une raison quelconque.

3
Quentin