Bootstrap Rails确认提交表单上的弹出窗口

Question

我正在使用Rails 3.2和Bootstrap 3。

我有一个表格，希望填写时能弹出确认信息。 弹出窗口应在表单上列出用户的输入，并询问它们是否正确。 如果单击“是”，则应提交表单；如果单击“否”，则用户应能够再次编辑该表单。

1. 当我添加示例引导程序弹出窗口模式代替“提交”按钮时，弹出窗口在单击时显示，但随后立即提交表单，并且不允许用户单击“是”或“否”。

    <%= form_for(@family, :url => families_path(@family), :html => { :method => "put" }, action: "create") do |f| %> <%= label_tag :first_name %> <%= ff.text_field :first_name, placeholder: 'First Name'%> <%= label_tag :last_name %> <%= ff.text_field :last_name, placeholder: 'Last Name'%> 

我要用正确的方法吗？

引导确认弹出的最佳方法是什么？

Answer 1

引导按钮默认为提交类型。 我需要指定type =“ button”来阻止其充当提交按钮。

<button type="button" class="btn btn-success btn-lg btn-tall btn-circle" data-toggle="modal" data-target="#myModal">Submit</button>

然后，我没有为模式中的“是”按钮指定type = button，因此“是”按钮将充当提交。

        <button type="button" class="btn btn-success btn-lg btn-tall btn-circle" data-toggle="modal" data-target="#myModal" style="font-size: 30px">Submit</button>

        <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
          <div class="modal-dialog">
            <div class="modal-content">
              <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="myModalLabel"> Confirmation</h4>
              </div>
              <div class="modal-body">
                  Do you confirm?   
              </div>
              <div class="modal-footer" style="border: none">
                <button type="button" class="btn btn-default" data-dismiss="modal">No</button>
                <button class="btn btn-success">Yes</button>
              </div>
            </div>
          </div>
        </div>