0

我在頁面上有一個表單,它是一個輸入字段。我希望用戶能夠按Enter鍵提交表單。不幸的是,當使用enter提交表單時,表單被多次提交。我知道表單多次提交,因爲有多個POST請求發送到服務器。它發生在開發和生產中,它只是零星發生。Rails遠程表單通過'enter'多次​​提交

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

如果我添加一個f.submit的形式,它只會提交一次。

這是Rails 5,其中turbolinksjquery_ujs包含在application.js中,如果這有什麼區別的話。

UPDATE

我一直沒能作出一些改變後重現。

我懷疑這個問題必須在頁面上多次加載jquery_ujs。這是由於turbolinks。更確切地說,由於我將所有的JavaScript包含在body標籤中。 turbolinks建議在head標記中添加您的JavaScript文件。由於這樣做,我無法重現錯誤。

+0

爲什麼不使用隱藏的提交按鈕? – trueinViso

+0

@trueinViso刪除turbolinks後,我無法複製它。我發現jquery_ujs有時會在頁面上添加兩次,這是由於turbolinks,因此導致多次提交操作。 –

回答

1

使用turbolink時,使用正確的方法添加事件處理程序非常重要。不要在HTML body標籤中放置任何Javascript。使用turbolinks文檔來確定您需要掛接哪些事件以添加您自己的事件處理程序或進行其他頁面元素轉換。

當前turbolinks的版本:https://github.com/turbolinks/turbolinks#full-list-of-events 舊版本turbolinks的:https://github.com/turbolinks/turbolinks-classic#events

目前的版本也有一些recommendations on making your document changes idempotent,我將添加事件偵聽器,以及做。

+0

感謝您的資源。 –

0

此類症狀的另一種情況是同時使用rails-ujsjquery_ujs。對於我的觀察,如果rails-ujs在application.js中的jquery_ujs之前,一切正常,但兩次在ajax表單上提交出現在另一個案例中。