2009-04-02 21 views
8

Tôi muốn biết cách lấy sự kiện onsubmit từ biểu mẫu để thực hiện xác thực biểu mẫu nào đó vì tôi không có quyền truy cập trực tiếp vào nó. (Tôi đang viết một plugin Wordpress cho nhận xét, vì vậy không có quyền truy cập trực tiếp vào thẻ biểu mẫu hoặc nút gửi.)Làm thế nào để lấy sự kiện onSubmit cho một biểu mẫu?

Tôi đã rất thất vọng khi thực hiện việc này cho plugin của mình mà tôi đã viết phiên bản Hello World phía dưới. Tôi muốn nó hiển thị cảnh báo 'Hello World' khi tôi tải trang và thông báo "gửi biểu mẫu" khi tôi nhấp vào nút gửi. Thay vào đó, nó hiển thị cả pop up khi tải trang.

Đây là mã của tôi:

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

Trả lời

12

Thay đổi này:

formCheck.onSubmit = doMapping() 

này:

formCheck.onSubmit = doMapping 

Khi bạn thêm dấu ngoặc đơn để kết thúc một chức năng bạn thực hiện chức năng . Khi bạn gán một hàm (hoặc chuyển nó thành một tham số cho một hàm khác), bạn cần phải bỏ qua dấu ngoặc đơn vì đó là cách để lấy một con trỏ hàm trong JavaScript.


Edit: Bạn cũng sẽ cần phải di chuyển tờ khai của doMapping chức năng trên giao mà chức năng sự kiện onsubmit như thế này (bắt tvanfosson tốt!):

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

formCheck.onSubmit = doMapping(); 

Tuy nhiên nếu chức năng doMapping không được sử dụng ở nơi khác, bạn có thể khai báo chức năng doMapping như một chức năng ẩn danh như sau:

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

có vẻ sạch hơn một chút đối với tôi.

+0

Tôi nghĩ bạn cũng sẽ phải thay đổi thứ tự vì doMapping có thể cần phải được xác định trước khi bạn gán nó làm trình xử lý onSubmit. – tvanfosson

+0

Cảm ơn - Tôi đã chỉnh sửa câu trả lời của tôi để giải quyết vấn đề của bạn. –

8

Sử dụng jQuery.

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

Cảm ơn bạn! Trên thực tế tôi đã giải quyết nó theo một cách khác, sử dụng cả hai đề xuất của Andrew và sự kiện window.onload - Tôi nghĩ rằng vấn đề là một phần vì phần tử đã không thực sự được nạp.

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

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

Lưu ý rằng sự kiện onload được kích hoạt sau khi toàn bộ trang đã được tải. Vì vậy, nên có một hình ảnh mất nhiều thời gian để tải - thường là một cái gì đó như google phân tích xử lý sự kiện của bạn sẽ không được assinged trước khi người dùng truy cập gửi. – Rashack

+0

Câu trả lời jQuery xử lý ... – Rashack

Các vấn đề liên quan