Question

I’m using Twitter’s Bootstrap modal functionality. When someone clicks submit on my form, I’m testing to see if they have checked any of the available options:

$('form').submit(function(event) {
        var $target = $('.column').find(':checkbox');                                                        
        if( !$target.is(':checked') ){ // if none of the sub-options are checked
            event.preventDefault();
            $('#my-modal').modal({
                show: 'true',
                backdrop: 'true',
                keyboard: 'true'
            });
        }                                       
    });

… and showing the modal window if they haven’t. I’d then like the ‘primary’ button on the modal to continue with the form submit, and the secondary button to simply close the modal window.

I’m sure this should be fairly trivial to accomplish, but my current knowledge of jQuery is only at the copy/paste level, and the documentation doesn’t give an example of how to do this.

I’ve set up a jsFiddle of what I have here – thanks.

EDIT – I’ve added below some code (it feels a bit hacky) that will close the modal window when the secondary button is clicked. Still not sure how to give the form the go ahead when the primary button is clicked:

$('#my-modal .secondary').click(function() {
    $('#my-modal').modal({
        show: 'false'
    });
});

The question now comes down to: ‘is there a simple way to tell the form “okay, carry on” once the primary button is clicked?’

Answer 1

Well, the problem is that right now Bootstrap does not have any proper callbacks for their action buttons. Therefore, you have to do this in a roundabout way and create your own. Hope this helps!

Here’s a JS fiddle showing it work: http://jsfiddle.net/iwasrobbed/rYLWz/3/

And here is the code:

HTML File

<form>
<ul class="inputs-list">
    <li>
      <label>
        <input type="checkbox" name="optionsCheckboxes" value="option1" />
        <span>Option 1</span>
      </label>
    </li>
    <li>
      <label>
        <input type="checkbox" name="optionsCheckboxes" value="option2" />
        <span>Option 2</span>
      </label>
    </li>
</ul>
<div class="actions">
    <a href="#" class="save-button btn large primary">Save changes &raquo;</a>

    <!-- Hide the real submit button /-->
    <input type="submit" class="hidden">
</div>
</form>

<div id="my-modal" class="modal hide fade">
    <div class="modal-header">
        <a href="#" class="close">&times;</a>
        <h3>Are you sure?</h3>
    </div>
    <div class="modal-body">
        <p>You haven&rsquo;t selected any options.</p>
    </div>
    <div class="modal-footer">
        <a href="#" class="okay-button btn primary">Okay &raquo;</a>
        <a href="#" class="go-back-button btn secondary">Go back</a>
    </div>
</div> <!-- /modal -->

JS File

$(document).ready(function() {

    // Verify if checkboxes were checked.
    // If they weren't, show a modal
    $('a.save-button').click(function() {
        if ($("input:checked").length === 0) {

            $('#my-modal').modal({
                show: 'true',
                backdrop: 'true',
                keyboard: 'true'
            });
        } else {
            $('form').submit(); 
        }

        // prevent click jump
        return false;
    });

    // Let's attach a listener on form submission
    $('form').submit(function() {
        alert('We submitted the form!');
    });

    // Hide modal if "Go back" is pressed
    $('#my-modal .go-back-button').click(function() {
        $('#my-modal').modal('hide');
        alert('We went back to the form');
    });

    // Hide modal if "Okay" is pressed
    $('#my-modal .okay-button').click(function() {
        $('#my-modal').modal('hide');
        $('form').submit();
    });

});

I added a little CSS as well:

ul.inputs-list li {
    margin-left: 10px;
}
.hidden {
    display: none   
}