[英]Form with button state change does not always submit
我的頁面通過jQuery將表單呈現為html。 有時,當我單擊提交或按Enter鍵時,按鈕變為“正在加載”狀態,但表單未提交,服務器或網絡標簽上沒有任何反應,用戶必須重新加載頁面才能嘗試提交再次形成。 因此,我從表單中刪除了按鈕,然后將其放置在其中,並更改了jQuery以在單擊此按鈕時也提交表單。 這可以正常工作,但是用戶現在無法單擊Enter提交表單,這對我的客戶來說是一個重要的用例。 有誰知道原始問題或潛在修復的原因? 謝謝!
新的jQuery
$("#add_order_btn").click(function(){
$(this).button('loading');
$("#new_order").submit(); # added as fix when button moved outside the form
});
新表格
<%= form_for(@new_order, url: add_order_url, method: "post", remote: true, class: "form-inline mb0") do |f| %>
<%= f.text_field :order_start_date_time, class: "new-order-datetime input-medium", placeholder: "Start date & time", id:"new_order_time" %>
<%= f.text_field :yrd, placeholder: "# of yards", class: "span2" %>
<%= f.check_box :plus %>
<%= f.label :plus, '<i class="fa fa-plus" id="go_plus"> </i>'.html_safe, class: "label_inline mr15" %>
<%= f.text_area :notes, placeholder: "Private Dispatch notes", class: "span12", id: "new_text_area", rows: "1" %>
<h4 class="mt5" id="new_order_extras">Order extras
<%= link_to "Add", new_order_extras_url, remote: true %>
</h4>
<% end %>
<%= button_tag '<i class="fa fa-list-alt"></i> New Order'.html_safe, class: "btn btn-primary btn-block btn-large mt5 mb15", id: "add_order_btn" %> # Moved out of form as fix
在通過單擊按鈕提交表單而不生成正確的事件之前,我曾遇到跨瀏覽器的麻煩。 此外,如果按鈕上還有其他處理程序,則它們有時可能會干擾與表單相關的事件。 在處理表單時,通常使用Submit事件可以獲得更好的結果。
將按鈕放回窗體。 然后捕獲form.submit事件,而不是button.click事件。
$("#new_order").submit( function(evt) {
evt.preventDefault();
var btn = $(this).find('button[type=submit]');
// Do whatever it is you do here to indicate the loading state
// handle the form submission
// Undo your button load state
});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.