How can I use one submit button for two forms in rails?

Question

I have a form that creates an object 'Visit' and a custom for stripe. I would like to merge the two forms and have only one submit button that processes both forms.

Create Visit Form with stripe payment form rendered in it.

<%= 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 %>

This is the stripe form.

<%= 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 %>

This is the show page where the form goes

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

Currently, there are two submit buttons. I would like there to be only one. How do I do this? Thank you!

Answer 1

1. Unify Controller

In order to make 2 forms to be processed simultaneously, you would need to make the controller to receive params from both the forms and process accordingly. In this case, you would need to do proper rollbacks in case of failure to one of the operations. You may look at gems like Interactor if in case your use case becomes more complex.

2. Independent AJAX requests

If two of the requests are independent, you can make them into ajax calls (asynchronous); and just have one button to post one form after another. Example code:

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

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