2009-04-02 10 views
8

Je veux savoir comment récupérer l'événement onsubmit à partir d'un formulaire pour valider un formulaire, parce que je n'y ai pas directement accès. (Je suis en train d'écrire un plugin Wordpress pour les commentaires, donc je n'ai pas accès direct à la balise de formulaire ou au bouton de soumission.)Comment récupérer l'événement onSubmit pour un formulaire?

Je me suis tellement frustré en essayant de le faire pour mon plugin que j'ai écrit une version Hello World au dessous de. Je veux qu'il affiche l'alerte "Hello World" lorsque je charge la page, et l'alerte "formulaire soumis" lorsque je clique sur le bouton Soumettre. Au lieu de cela, il montre les deux pop-ups lorsque la page se charge.

Voici mon code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> 
    <html> 
    <head> 
    <title>Hello World</title> 
    </head> 
    <body> 
    <h2>Test</h2> 
    <form action="#" method="post" id="commentform"> 

    <p><input type="text" name="author" id="author" size="22" tabindex="1" /> 
    <label for="author"><small>Name (required)</small></label></p> 

    <p><input name="submit" type="submit" id="submit" tabindex="5" value="Submit Comment" /> 

    </form> 

    <script type="text/JavaScript"> 
    <!-- 
    alert("Hello world"); 

    var formCheck = document.getElementById("commentform"); 

    formCheck.onSubmit = doMapping(); 

    function doMapping() { 
     alert("form submitted"); 
     return false; 
    } 

    --> 
    </script>  

    </body> 
    </html> 

Répondre

12

Modifier ceci:

formCheck.onSubmit = doMapping() 

à ceci:

formCheck.onSubmit = doMapping 

Lorsque vous ajoutez entre parenthèses à la fin d'une fonction d'exécuter cette fonction . Lorsque vous affectez une fonction (ou la passez en paramètre à une autre fonction), vous devez omettre la parenthèse, car c'est la façon de récupérer un pointeur de fonction en JavaScript.


Edit: Vous aurez également besoin de déplacer la déclaration de la fonction doMapping ci-dessus l'attribution de cette fonction à l'événement onsubmit comme celui-ci (bon tvanfosson catch!):

function doMapping() { 
     alert("form submitted"); 
     return false; 
    } 

formCheck.onSubmit = doMapping(); 

Cependant Si la fonction doMapping n'est pas utilisée ailleurs, vous pouvez déclarer la fonction doMapping comme une fonction anonyme comme ceci:

formCheck.onSubmit = function() { 
     alert("form submitted"); 
     return false; 
    } 

qui me semble un peu plus propre.

+0

Je pense que vous devrez également modifier l'ordre car il se peut que doMapping doive être défini avant de l'affecter comme gestionnaire onSubmit. – tvanfosson

+0

Merci - J'ai édité ma réponse pour répondre à votre question. –

8

Utilisation de jQuery.

$(document).ready(function() { 
    $('#commentform').submit(function() { 
     alert('form submitted'); 
     return false; 
    }); 
}); 
0

Merci! En fait, je l'ai résolu d'une autre manière, en utilisant à la fois la suggestion d'Andrew et l'événement window.onload - je pense que le problème était en partie dû au fait que l'élément n'avait pas été chargé.

window.onload = function(){ 
    if (document.getElementById("commentform")){ 
     document.getElementById("commentform").onsubmit = doMapping; 
    } 
} 

function doMapping(){ 
      alert("form submitted"); 
      return false; 
} 
+0

Remarque a pensé que l'événement onload est déclenché après que la page entière a été chargée. Par conséquent, si une image est trop longue à charger, en général quelque chose comme google analytics, votre gestionnaire d'événements ne sera pas évalué avant que l'utilisateur ne l'envoie. – Rashack

+0

La réponse de jQuery gère ... – Rashack

Questions connexes