如何在Rails中的两个表单中使用一个提交按钮?

时间:2019-02-11 02:49:43

标签: ruby-on-rails ruby ruby-on-rails-5

我有一个创建对象“ Visit”和自定义条纹的表单。我想合并这两种形式,并且只有一个提交按钮可以处理两种形式。

创建访问表并在其中显示条纹付款表。

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

当前,有两个提交按钮。我希望只有一个。我该怎么做呢?谢谢!

1 个答案:

答案 0 :(得分:0)

  1. 统一控制器

为了使2个表单同时处理,您需要使控制器从两个表单中接收参数并进行相应的处理。 在这种情况下,如果其中一项操作失败,则需要进行适当的回滚。 如果您的用例变得更加复杂,您可能会看到Interactor之类的宝石。

  1. 独立的AJAX请求

如果两个请求是独立的,则可以使它们成为ajax调用(异步);并且只有一个按钮可以发布一种表格。 示例代码:

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

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