Làm thế nào để làm một cái gì đó trước khi nộp? [đóng cửa]


141

tôi có một hình thức có một nút gửi biểu mẫu. Tôi cần phải làm một cái gì đó trước khi đệ trình xảy ra. Tôi đã thử thực hiện onClick trên nút đó nhưng nó xảy ra sau khi gửi.

Tôi không thể chia sẻ mã nhưng nói chung, tôi nên làm gì trong jQuery hoặc JS để xử lý việc này?



2
@Brad Christie nếu chỉ tôi có thể chấp nhận bình luận như một câu trả lời. Cảm ơn rất hữu ích.
Jimmy

3
Tôi ghét nó khi stackover đóng một câu hỏi. Bạn có thể xử lý các hành động của mình bằng cách sử dụng các sự kiện sau phát sinh vào thời điểm sau ngay trước khi gửi biểu mẫu: 1- onmouseover 2- onmousemove 3- onmousedown 4- onf Focus 5- onmouseup 6- onclick 7- onsubmit
Shadi Namrouti

1
Tôi đánh giá cao câu hỏi này bởi vì tôi đã gặp phải vấn đề tương tự chỉ gần đây và câu hỏi này chính xác là những gì tôi muốn hỏi.
Wasteetime909

2
buồn cười là câu hỏi này đã bị đóng vì nó không phải là một câu hỏi thực sự: -?
AnnaKlein

Câu trả lời:


207

Nếu bạn có một hình thức như vậy:

<form id="myform">
...
</form>

Bạn có thể sử dụng mã jQuery sau đây để làm một cái gì đó trước khi biểu mẫu được gửi:

$('#myform').submit(function() {
    // DO STUFF...
    return true; // return false to cancel form action
});

2
Tôi gặp sự cố khi sử dụng điều này cho các vòng lặp phải được hoàn thành trước khi gửi. Bất kỳ đề xuất?
Smilyan

Có bất kỳ mã để xem xét? Không chắc tôi hiểu vấn đề.
Dan Breen

3
Tại sao điều này được gói trong một cuộc gọi chức năng trống? Không phải submitchức năng có thể liên kết trực tiếp với $('#form')mà không có chức năng trống xung quanh? EDIT: các tài liệu cho thấy rằng cuộc gọi chức năng xung quanh là không cần thiết .
Eykanal

@eykanal Điểm tốt. Tôi đã tiếp tục và chỉnh sửa câu trả lời để loại bỏ hàm bao sau khi xác nhận rằng nó hoạt động tốt với nó đã bị xóa.
Jon Schneider

3
@eykanal Tôi đã sử dụng lệnh gọi hàm "rỗng", vì đó là cách viết tắt của $(document).ready()hàm jQuery , đảm bảo DOM hoàn tất trước khi đính kèm submitsự kiện. Nếu JS của bạn ở cuối trang, điều đó không cần thiết, nhưng nếu nó nằm trong <head>phần thì bạn cần nó. Xem: stackoverflow.com/q/13062246/135108
Dan Breen

23

Giả sử bạn có một hình thức như thế này:

<form id="myForm" action="foo.php" method="post">
   <input type="text" value="" />
   <input type="submit" value="submit form" />

</form>

Bạn có thể đính kèm một onsubmit-event với jQuery như thế này:

$('#myForm').submit(function() {
  alert('Handler for .submit() called.');
  return false;
});

Nếu return falsebiểu mẫu của bạn sẽ không được gửi sau hàm, nếu bạn trả về đúng hoặc không có gì thì nó sẽ được gửi như bình thường.

Xem tài liệu jQuery để biết thêm.


11

Bạn có thể sử dụng onclickđể chạy một số mã JavaScript hoặc jQuery trước khi gửi biểu mẫu như thế này:

<script type="text/javascript">
    beforeSubmit = function(){
        if (1 == 1){
            //your before submit logic
        }        
        $("#formid").submit();            
    }
</script>
<input type="button" value="Click" onclick="beforeSubmit();" />

18
Nhưng điều này không hoạt động, khi biểu mẫu chứa ví dụ như trường nhập liệu, người dùng đang nhấn phím quay lại đang kích hoạt sự kiện gửi. Thông thường tốt hơn là đính kèm trực tiếp vào sự kiện gửi để bạn có thể đảm bảo nó được gọi bất kể người dùng đã gửi bài như thế nào.
acme

2
<input type = "submit" value = "Nhấp vào" onmouseover = "beforeSubmit ();" />
Ansyori

5

đảm bảo nút gửi không thuộc loại "gửi", biến nó thành nút. Sau đó sử dụng sự kiện onclick để kích hoạt một số javascript. Ở đó bạn có thể làm bất cứ điều gì bạn muốn trước khi bạn thực sự đăng dữ liệu của mình.


3
Biểu mẫu có thể được gửi theo một số cách, chẳng hạn như nhấn enter trong các trường nhất định. Liên kết với một nhấp chuột vào một nút có thể không được nhấp, không phải là một ý tưởng tốt. Những câu trả lời khác cho thấy cách bạn ràng buộc onsubmitcủa hình thức , mà sẽ cháy dù biểu mẫu được gửi.
Jason
Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookieChính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.