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>