带按钮状态变化的表单并不总是提交

Question

我的页面通过jQuery将表单呈现为html。偶尔，当我点击提交或按回车键时，按钮会变成'加载'状态，但表单不会提交，服务器或网络选项卡上没有任何反应，用户必须重新加载页面以尝试提交再次形成。所以我从表单中删除了按钮，并将其放在后面，并且在单击此按钮时将jQuery更改为也提交了表单。这工作正常，但用户现在无法点击输入提交表单，这是我的客户的重要用例。有谁知道可能是原始问题的原因还是可能的修复？谢谢！

新的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 

Answer 1

我已经通过点击一个按钮就可以产生正确的事件曾与表单提交之前，跨浏览器的麻烦。另外，如果您在按钮上有其他处理程序，他们有时可能会干扰与窗体相关的事件。在处理表单时，我通常使用提交事件获得更好的结果。

将按钮放回到窗体中。然后捕获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 
});