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

Question

I am using Rails 3.2 and Bootstrap 3.

I have a form that I would like to have a pop up confirmation for when completed. The pop up should list the user's inputs on the form and ask if they are correct or not. If yes is clicked then the form should be submitted, if no is clicked then the user should be able to edit the form again.

1. When I add a sample bootstrap popup modal in place of the submit button, the pop up is displayed on click but then submits the form instantly and does not let the user click yes or no.

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

Am I going about this the correct way?

What is the best way to do a Bootstrap confirm pop up?

Answer 1

Bootstrap buttons are given the submit type by default. I needed to specify type="button" to stop it from acting like a submit button.

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

And then I did not specify type=button for the "yes" button in the modal so that the "yes" button would act as the submit.

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