'Enter'를 사용하여 여러 번 원격 양식을 제출하는 레일

Question

단일 입력 필드 인 페이지에 양식이 있습니다. 사용자가 입력을 눌러 양식을 제출할 수 있기를 바랍니다. 죄송하지만 enter을 제출하면 양식이 여러 번 제출됩니다. 서버에 여러 POST 요청이 전송 되었기 때문에 양식이 여러 번 제출되고 있음을 알고 있습니다. 개발과 생산 모두에서 발생하며 간헐적으로 만 발생합니다. 내가 폼에 f.submit를 추가하는 경우

= form_for thing, remote: true do |f| 
    = f.text_field :name, placeholder: "hit enter to submit" 

, 한 번만 제출합니다.

차이점이 있다면 application.js에 포함 된 turbolinks 및 jquery_ujs이있는 레일 5입니다. 나는 약간 변경 한 후 재현 할 수 없었던

UPDATE.

페이지에 여러 번로드 된 jquery_ujs과 관련된 문제라고 생각됩니다. 이는 turbolinks 때문입니다. 더 정확히 말하면, 내가 모든 자바 스크립트를 body 태그에 포함하고 있었다는 사실 때문입니다. turbolinks은 head 태그에 자바 스크립트 파일을 추가 할 것을 제안합니다. 그렇게했기 때문에 오류를 재현하지 못했습니다.

Answer 1

터보 링크를 사용할 때는 올바른 방법으로 이벤트 처리기를 추가해야합니다. HTML 본문 태그에 Javascript를 두지 마십시오. 터보 링크 설명서를 사용하여 이벤트 처리기를 추가하거나 페이지 요소의 다른 변형을 만들기 위해 어떤 이벤트를 연결할 지 결정하십시오. turbolinks의

현재 버전 : turbolinks의 https://github.com/turbolinks/turbolinks#full-list-of-events 이전 버전 : https://github.com/turbolinks/turbolinks-classic#events

현재 버전은 또한 나뿐만 아니라 이벤트 리스너를 추가 할 것 몇 가지 recommendations on making your document changes idempotent을 가지고 있습니다.

Answer 2

이러한 증상이있는 또 다른 경우는 rails-ujs과 jquery_ujs을 동시에 사용하는 것입니다. 내 관측을 위해 rails-ujs이 application.js의 jquery_ujs보다 먼저 나오면 모든 것이 정상이지만 다른 경우에는 ajax-forms를 두 번 제출하는 것이 좋습니다.