2009-04-02 2 views
8

Я хочу знать, как захватить событие onsubmit из формы, чтобы сделать некоторую проверку формы, потому что у меня нет доступа к ней напрямую. (Я пишу плагин Wordpress для комментариев, поэтому не имею прямого доступа к тегу формы или кнопке отправки.)Как захватить событие onSubmit для формы?

Я так расстроен, пытаясь сделать это для своего плагина, что написал «Hello World» ниже. Я хочу, чтобы он показывал предупреждение «Hello World», когда я загружаю страницу, и «оповещение формы», когда я нажимаю кнопку отправки. Вместо этого он показывает всплывающие окна при загрузке страницы.

Вот мой код:

<!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> 

ответ

12

Изменить это:

formCheck.onSubmit = doMapping() 

к этому:

formCheck.onSubmit = doMapping 

При добавлении скобку в конце функции вы выполняете эту функцию , Когда вы назначаете функцию (или передаете ее как параметр другой функции), вам нужно опустить скобку, так как это способ получить указатель на функцию в JavaScript.


Edit: Вы также должны переместить объявление функции doMapping над назначением этой функции на onsubmit события, как это (хороший улов tvanfosson!):

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

formCheck.onSubmit = doMapping(); 

Однако если функция doMapping не используется в другом месте, вы можете объявить функцию doMapping анонимной функцией:

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

, который кажется немного чище для меня.

+0

Я думаю, вам также придется изменить порядок, так как doMapping может потребоваться определить, прежде чем назначать его как обработчик onSubmit. – tvanfosson

+0

Спасибо - я отредактировал свой ответ, чтобы ответить на ваш вопрос. –

8

Использование jQuery.

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

Спасибо! На самом деле я решил это по-другому, используя предложение Андрея и событие window.onload - я думаю, проблема была отчасти потому, что элемент фактически не загружался.

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

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

Обратите внимание, что событие onload запускается после загрузки всей страницы. Так что должен быть образ, который занимает много времени, чтобы загрузить - обычно что-то вроде google analytics, обработчик событий не будет проверяться до того, как пользователь попадет в submit. – Rashack

+0

Ответ jQuery обрабатывает это ... – Rashack

Смежные вопросы