Rails: 确认提交的提交表单模式

Question

所以我有一个表单，当它被点击时需要有一个免责声明模式。它就像一个长长的免责声明，所以在模态中比在表单页面中更好。因此，用户单击触发模式的表单上的按钮。然后在模式中，有一个 "Submit form" 按钮可以实际进行提交。

这怎么可能，因为我现在的方式是，提交按钮在单击时什么都不做。在这种情况下（从模态）是否可以提交正常的表单？我可以使用 javascript 来完成这项工作吗？

<%= form_for [:client, Reportapproval.new], :validate => true do |f| %>
  <div class="actions">
    <%= f.hidden_field :blah, :value => current_client.name %>
  </div>
  <div class="block-inline">
    <label>Blah Blah</label><br>
     <%= f.select :client... %>   
  </div>
  <%= f.text_field :client... %>
    <label>
      <%= f.hidden_field :client... %>
    </label>
  <div class="text-center">
      <button type="button" class="btn btn-success" data-toggle="modal" data-target="#client_disclaimer_modal">
        Request a report from this renter
      </button> <!--- This button opens the modal--->
  </div>

<!-- Disclaimer Modal -->
  <div class="modal fade" id="clent_disclaimer_modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h4 class="modal-title" id="myModalLabel">Client Disclaimer Agreement</h4>
        </div>
        <div class="modal-body">
          <strong>NOTICE...<br>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
          <%= f.submit "Agree & Submit", class: 'btn btn-default' %>
        </div>
      </div>
    </div>
  </div>
</div> 
<br /> 
<% end %>

Answer 1

只要 <button type='submit'> 在 <form> 中，您上面提供的代码应该可以完美运行。确保控制模态的任何 JS 都不会将模态标记移动到 DOM 中的不同位置（即将其移动为 body 标记的直接后代）。

Answer 2

我也花了很多时间弄清楚这个：

我是这样做的:

根据官方 Rails Guides，您可以通过 :data 选项使用自定义数据属性：

<%= form.submit  'Submit Application', data: { confirm: "Are you sure?" } %>

就这些了。

希望对您有所帮助

Answer 3

您的代码中有一个拼写错误。 :)

将“clent_disclaimer_modal”更改为“client_disclaimer_modal”。通过此更新验证所有工作都按预期进行。

Rails: 确认提交的提交表单模式

Rails: Submit form modal for confirming submission

forms

ajax

ruby-on-rails

bootstrap-modal