Как я могу использовать одну кнопку отправки для двух форм в рельсах?

Question

У меня есть форма, которая создает объект «Визит» и пользовательский для полосы.Я хотел бы объединить две формы и иметь только одну кнопку отправки, которая обрабатывает обе формы.

Создать форму посещения с представленной в ней полосовой формой оплаты.

<%= simple_form_for([@service, @visit]) do |f| %>

  <%= f.error_notification %>
  <%= f.error_notification message: f.object.errors[:base].to_sentence if f.object.errors[:base].present? %>
  <%= f.input :visit_date, as: :date , :label => "Service date:"%>
  <%= f.input :visit_time, as: :time , :label => "Service time:" %>
  <%= f.input :note, :label => "Anything we should know?" %>

  <%= render 'payments/payments-form' %>

  <%= f.button :submit, 'Schedule and Pay', class:'btn btn-bennett' %>

<% end %>

Это полосовая форма.

<%= form_tag payments_path, method: 'post', id: 'payment-form' do %>
  <span class="payment-errors"></span>

  <div class="form-row">
    <label>
      <span>Card Number</span>
      <input type="text" size="20" data-stripe="number"/>
    </label>
  </div>

  <div class="form-row">
    <label>
      <span>CVC</span>
      <input type="text" size="4" data-stripe="cvc"/>
    </label>
  </div>

  <div class="form-row">
    <label>
      <span>Expiration (MM/YYYY)</span>
      <input type="text" size="2" data-stripe="exp-month"/>
    </label>
    <span> / </span>
    <input type="text" size="4" data-stripe="exp-year"/>
  </div>

  <button type="submit">Submit Payment</button>
<% end %>

Это страница показа, куда отправляется форма

<p>
  <strong>Name:</strong>
  <%= @service.name %>
</p>

<p>
  <strong>Price:</strong>
  <%= @service.price %>
</p>

<p>
  <strong>Estimated time:</strong>
  <%= @service.estimated_time %>
</p>

<p>
  <strong>Modal tag:</strong>
  <%= @service.modal_tag %>
</p>

<p>This is where the desciption of the service would go.
  This is where the desciption of the service would go.
  This is where the desciption of the service would go.
  This is where the desciption of the service would go.
  This is where the desciption of the service would go.
</p>

<h1>Set Service: </h1>

<%= render 'visits/form' %>

<%= link_to 'Edit', edit_service_path(@service) %> |
<%= link_to 'Back', services_path %>

</div>

В настоящее время есть две кнопки отправки.Я бы хотел, чтобы там был только один.Как мне это сделать?Спасибо!

Answer 1

1. Unify Controller

Чтобы одновременно обрабатывать 2 формы, вам необходимо настроить контроллер на получение параметров из обеих форм и соответственно обрабатывать их.В этом случае вам необходимо будет выполнить надлежащие откаты в случае сбоя одной из операций.Вы можете смотреть на драгоценные камни как Interactor , если в случае, если ваш вариант использования становится более сложным.

Независимые запросы AJAX

Если два запроса независимы, вы можете превратить их в вызовы ajax (асинхронные);и просто есть одна кнопка, чтобы опубликовать одну форму за другой.Пример кода:

$('.single-submit-btn').click(function(){
  $('#form1').submit();
});

$("#form1").bind('ajax:complete', function() {
  $('#form2').submit();
});