Форма с изменением состояния кнопки не всегда отправляется

Question

Форма с изменением состояния кнопки не всегда отправляется

0

Моя страница отображает форму в html через jQuery. Иногда, когда я нажимаю кнопку "Отправить" или нажимаю "Enter", кнопка переходит в состояние "загрузка", но форма не отправляется, ничего не происходит на сервере или на вкладке сети, и пользователь должен перезагрузить страницу, чтобы попытаться отправить снова форму. Поэтому я удалил кнопку из формы и поместил ее сразу после нее, а также изменил 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

avalente1 30 апр. 2014, в 00:53

Источник

0

Можете ли вы сделать пример jsfiddle?
Ayman El Temsahi 29 апр. 2014, в 22:29

Теги:

javascript

jquery

forms

ruby-on-rails-4

twitter-bootstrap-2

1 ответ

Ещё вопросы

Можете ли вы сделать пример jsfiddle?

slashingweapon · Accepted Answer · 2014-04-29T22-47-00.000Z

У меня были проблемы с перекрестным браузером, прежде чем при отправке формы с помощью кнопки, не создавая правильное событие. Кроме того, если у вас есть другие обработчики на кнопке, они могут иногда мешать событиям, связанным с формой. При работе с формами я обычно получаю лучшие результаты, используя событие 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
});

Спасибо за помощь и поделились своим опытом с похожей проблемой!