Form Submit Execute JavaScript Best Practice ?

Question

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. J'aimerais que la page actuelle soit conservée et que seule la fonction JavaScript soit exécutée.

Je me demandais quelle était la meilleure pratique (ou ce que vous faites) pour éviter que la page soit rechargée et que des paramètres soient envoyés.

Answer 1

Utilisez le onsubmit pour exécuter du code JavaScript lorsque le formulaire est soumis. Vous pouvez alors renvoyer false ou appeler l'élément preventDefault 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 encombrer votre HTML de JavaScript, 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 de 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>

Answer 2

Je sais que c'est un peu tard pour ça. Mais j'ai toujours pensé que la meilleure façon de créer des écouteurs d'événements est directement à partir de JavaScript. C'est 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 un tas d'écouteurs d'événements dans votre HTML.

Answer 3

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

Le mode bizarrerie a un guide des gestionnaires d'événements mais il serait probablement préférable d'utiliser une bibliothèque pour simplifier le code et aplanir les différences entre les navigateurs. Tous les principaux navigateurs (tels que YUI y jQuery ) comprennent des fonctions de gestion d'événements, et il existe une vaste collection d'outils de gestion d'événements. petites bibliothèques d'événements .

Voici comment procéder 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.