Nhận lỗi Gửi biểu mẫu bị hủy vì biểu mẫu không được kết nối

Tôi có một trang web cũ với JQuery 1.7 hoạt động chính xác cho đến hai ngày trước. Đột nhiên một số nút của tôi không hoạt động nữa và sau khi nhấp vào chúng, tôi nhận được cảnh báo này trong bảng điều khiển:

Gửi biểu mẫu bị hủy vì biểu mẫu không được kết nối

Mã đằng sau nhấp chuột là một cái gì đó như thế này:

 this.handleExcelExporter = function(href, cols) {
   var form = $('<form method="post"><input type="submit" /><input type="hidden" name="layout" /></form>').attr('action', href);
   $('input[name="layout"]', form).val(JSON.stringify(cols));
   $('input[type="submit"]', form).click();
 }

Có vẻ như Chrome 56 không còn hỗ trợ loại mã này nữa. Phải không? Nếu có, câu hỏi của tôi là:

1. Tại sao điều này xảy ra đột ngột? Nếu không có bất kỳ cảnh báo khấu hao?
2. Cách giải quyết cho mã này là gì?
3. Có cách nào để buộc chrome (hoặc các trình duyệt khác) hoạt động như trước mà không thay đổi bất kỳ mã nào không?

PS Nó không hoạt động trong phiên bản firefox mới nhất (không có bất kỳ tin nhắn nào). Ngoài ra, nó không hoạt động trong IE 11.0 & Edge! (cả hai đều không có tin nhắn nào)

Trả lời nhanh: nối các hình thức vào cơ thể.

document.body.appendChild(form);

Hoặc, nếu bạn đang sử dụng jQuery như trên: $(document.body).append(form);

Chi tiết: Theo tiêu chuẩn HTML, nếu biểu mẫu không được liên kết với bối cảnh duyệt web (tài liệu), việc gửi biểu mẫu sẽ bị hủy bỏ.

HTML Đặc biệt xem 4.10.21.3.2

Trong Chrome 56, thông số này đã được áp dụng.

Mã Chrome khác nhau xem @@ -347,9 +347,16 @@

PS về câu hỏi của bạn # 1. Theo tôi, không giống như ajax, việc gửi biểu mẫu gây ra việc di chuyển trang ngay lập tức.
Vì vậy, hiển thị 'thông điệp cảnh báo không dùng nữa' là gần như không thể.
Tôi cũng nghĩ rằng không thể chấp nhận được rằng thay đổi nghiêm trọng này không có trong danh sách thay đổi tính năng. Các tính năng của Chrome 56 - www.chromestatus.com/features#milestone%3D56

nếu bạn gặp lỗi này trong React JS khi bạn cố gắng gửi biểu mẫu bằng cách nhấn enter, hãy đảm bảo tất cả các nút của bạn ở dạng không gửi biểu mẫu có a type="button".

Nếu bạn chỉ có một có buttonvới type="submit"nhấn Enter sẽ gửi biểu mẫu như mong đợi.

Tài liệu tham khảo :
https://dzello.com/blog/2017/02/19/demystifying-enter-key-submission-for-react-forms/ https://github.com/facebook/react/issues/2093

thêm thuộc tính type = "button" vào nút khi ai nhấp vào bạn sẽ thấy lỗi, nó hoạt động với tôi.

Bạn phải đảm bảo rằng mẫu có trong tài liệu. Bạn có thể nối các hình thức vào cơ thể.

cách khác bao gồm event.preventDefault (); trong tay cầm của bạnSubmit (sự kiện) {

xem https://facebook.github.io/react/docs/forms.html

Tôi thấy bạn đang sử dụng jQuery để khởi tạo biểu mẫu.

Khi tôi thử câu trả lời của @KyungHun Jeon, tôi cũng không sử dụng jQuery.

Vì vậy, tôi đã thử gắn biểu mẫu vào phần thân bằng cách sử dụng cách jQuery:

$(document.body).append(form);

Va no đa hoạt động!

Một điều cần chú ý nếu bạn thấy điều này trong React, đó là <form>vẫn phải hiển thị trong DOM trong khi gửi. tức là, điều này sẽ thất bại

{ this.state.submitting ? 
     <div>Form is being submitted</div> :
     <form onSubmit={()=>this.setState({submitting: true}) ...>
         <button ...>
     </form>
}

Vì vậy, khi biểu mẫu được gửi, state.submittingđược đặt và thông báo "gửi ..." hiển thị thay vì biểu mẫu, thì lỗi này xảy ra.

Di chuyển thẻ biểu mẫu bên ngoài điều kiện đảm bảo rằng nó luôn ở đó khi cần, tức là

<form onSubmit={...} ...>
  { this.state.submitting ? 
     <div>Form is being submitted</div> :
     <button ...>
  }
</form>

Tôi đã đối mặt với cùng một vấn đề trong một trong những thực hiện của chúng tôi.

chúng tôi đã sử dụng jquery.forms.js. đó là một plugin hình thức và có sẵn ở đây.http://malsup.com/jquery/form/

chúng tôi đã sử dụng cùng một câu trả lời được cung cấp ở trên và dán

$(document.body).append(form);

và nó đã làm việc. Cảm ơn.

Tùy thuộc vào câu trả lời từ KyungHun Jeon, nhưng appendChild mong đợi một nút dom, vì vậy hãy thêm một chỉ mục vào đối tượng jquery để trả về nút: document.body.appendChild(form[0])

Thêm cho hậu thế vì điều này không liên quan đến chrome nhưng đây là chủ đề đầu tiên xuất hiện trên google khi tìm kiếm lỗi gửi biểu mẫu này.

Trong trường hợp của chúng tôi, chúng tôi đã đính kèm một chức năng để thay thế div html hiện tại bằng hình ảnh động "đang tải" khi gửi - vì nó xuất hiện trước khi biểu mẫu được gửi, không còn bất kỳ biểu mẫu hoặc dữ liệu nào để gửi.

Lỗi rất rõ ràng khi nhìn lại nhưng trong trường hợp bất kỳ ai kết thúc ở đây, nó có thể giúp họ tiết kiệm thời gian trong tương lai.

Tôi đã nhận được lỗi này trong Reac.js. Nếu bạn có một nút ở dạng mà bạn muốn hoạt động như một nút và không gửi biểu mẫu, bạn phải cung cấp cho nó loại = "nút". Nếu không, nó cố gắng gửi biểu mẫu. Tôi tin rằng vaskort đã trả lời điều này với một số tài liệu bạn có thể kiểm tra.

Tôi đã có thể loại bỏ tin nhắn bằng cách thêm thuộc tính type = "button" vào thành phần nút trong vue.

Bạn cũng có thể giải quyết nó, bằng cách áp dụng một bản vá duy nhất trong jquery-xxxjs chỉ cần thêm sau "thử {rp;} Catch (m) {}" dòng 1833 mã này:

if (r instanceof HTMLFormElement &&! r.parentNode) { r.style.display = "none"; document.body.append (r); r [p] (); }

Điều này xác nhận khi một hình thức không phải là một phần của cơ thể và thêm nó.

Tôi thấy thông báo này sử dụng angular, vì vậy tôi mới lấy phương thức = "post" và action = "", và cảnh báo đã biến mất.