我的页面通过 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
最佳答案
我之前遇到过跨浏览器问题,通过单击按钮提交表单时未生成正确的事件。此外,如果按钮上有其他处理程序,它们有时会干扰与表单相关的事件。在处理表单时,我通常使用提交事件获得更好的结果。
将按钮放回表单中。然后捕获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
});
关于javascript - 具有按钮状态更改的表单并不总是提交,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23376260/