CODEWITHSUNDEEP
jquerymodal-dialogtwitter-bootstrap-3
Pierce McGeough
Pierce McGeough

Reputation: 3086

Use Bootstrap Modal to confirm action

I have a form which I wish to submit but once the user clicks the submit button it will show a twitter bootstrap modal which will either let the form continue on to be processed or canceled back to the form page. Is it possible to turn the regular javascript confirm into the bootstrap modal?

<form action="http://localhost.testing/modal-processing.php" class="form-horizontal" role="form" method="GET">
    <label>Landlord<span class="mandatory">*</span></label>
    <select class="form-control input-sm chosen chzn-select" tabindex="1" data-placeholder="Choose a landlord" data-rule-required="true" name="landlord_id" id="landlord_id">
        <option value=""></option>
        <option value="31" >Liam Lawlor</option>
        <option value="34" >Damian Lavelle</option>
        <option value="35" >Mick Lally</option>
        <option value="36" >Joanne Lavelle</option>
        <option value="37" >Liam Lacey</option>
        <option value="38" >Laura Luney</option>
        <option value="39" >Lenihan Enterprises</option>
    </select>

    <!-- modal caller -->
    <a href="#modal-dialog" class="modal-toggle" data-toggle="modal" data-href="http://localhost.testing/modal-processing.php" data-modal-type="confirm" data-modal-title="Delete Property" data-modal-text="Are you sure you want to delete {$property.address_string}?" data-modal-confirm-url="{$base_url}residential-lettings/properties/do-delete/property/{$property.id}"><i class="icon-trash"></i> Modal Submit</a>

    <!-- proper submit -->
    <input type="submit">
</form>

Upvotes: 6

Views: 20529

Answers (2)

Pop-A-Stash
Pop-A-Stash

Reputation: 6652

Adding a click listener to you modal button is correct:

$('#myModalButton').click(function(){
  //submit form
  // $('#myForm').submit(); // not working for me
  // $('#myForm')[0].submit(); //works, but is ugly
  $('#myForm').trigger('submit');  //works great
});

As far as I can tell, $('form') returns an array. Even $('form#myForm') returns and array.

So,

$('form')[0].submit();

should work.

$('#myForm').trigger('submit');

Is the only way I could make it work.

Upvotes: 0

Carol Skelly
Carol Skelly

Reputation: 362290

You can use the Bootstrap modal as a confirm by enabling a link/button (ie:'btnYes') in the modal that is used to trigger form submission via jQuery...

$('#btnYes').click(function() {
    // handle form processing here  
    $('form').submit(); 
});

Here is a working demo: http://bootply.com/88094

Upvotes: 10

Related Questions