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

Question

我正在使用 Rails 3.2 和 Bootstrap 3。

我有一份表格，希望在完成后弹出确认窗口。弹出窗口应列出用户在表单上的输入，并询问它们是否正确。如果单击"is"，则应提交表单，如果单击“否”，则用户应该能够再次编辑表单。

1. 当我添加示例 Bootstrap 弹出模式来代替提交按钮时，单击时会显示弹出窗口，但会立即提交表单，并且不允许用户单击"is"或“否”。

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

我的处理方式正确吗？

弹出 Bootstrap 确认窗口的最佳方法是什么？

Answer 1

Bootstrap 按钮默认指定提交类型。我需要指定 type="button"以阻止它充当提交按钮。

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

然后我没有为模式中的“yes”按钮指定 type=button，以便“yes”按钮充当提交。

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