jQuery Bootstrap模态PHP

Question

I have a form with many fields and when I click the submit button, before saving the data in my database, I would like to show a bootstrap modal popup that displays a question to the user. The user can answer "yes" or "no" to the question. In these two cases, the data will be saved in the database. The difference between the "yes" and "no" button is the action.

I get some trouble to manage with this. I know that Ajax and PHP are required but I do not really know how to do the trick.

A hand would be appreciate.

Sorry for my poor english.

Answer 1

You just need to call the modal when the submit is clicked. Then, do the ajax call based on what the user clicked.

SOme like this:

HTML

//Submit Button
<div class="form-group">
    <button id="submit" name="submit" class="btn btn-primary">Submit</button>
</div>

//Modal to ask for confirmation
<div id="confirm" class="modal hide fade">
  <div class="modal-body">
    Are you sure?
  </div>
  <div class="modal-footer">
    <button type="button" data-dismiss="modal" class="btn btn-primary" id="yes">Yes</button>
    <button type="button" data-dismiss="modal" class="btn" id="no">No</button>
  </div>
</div>

Then, you just need to add listeners to each button and do the corresponding action.

Javascript

<script type="text/javascript">

    //If user submits, show modal.
    $("#submit").click(function() {
        showModal();
    });

    //If user selects Yes, do action A.
    $("#yes").click(function() {
        doAjax_A();
    });

    //If user selects No, do action B.
    $("#no").click(function() {
        doAjax_B();
    });

</script>

All thats left is to do your Ajax Call. More on: http://api.jquery.com/jquery.ajax/