display bootstrap modal conditionally on form submit

Question

I have been trying to figure this out for two days, but I really do need some help on this problem.

I have a html form that has a submit button with a conditional js confirmation pop up that is working but I want to change the conditional js confirmation pop up with a bootstrap modal to fit in with the rest of my project.

When the form is submitted and the value of a html select list on the form has changed, then the conditional js confirmation pop up will display. The user must click the OK button on the js confirmation pop up for the form submission to proceed.

Or else if the html select list has not changed the js confirmation pop up will not display and the form will submit.

Here is my working form code:

<form id="language_view_form" class="form-horizontal" action="{% url language_view %}" method="post">

Here is my working button code inside the form:

<input id="submit_button" onclick="if(confirmChangeLanguage())showProgressAnimation();else return false;" type="submit" value="Update" />

Here is the working js code:

function confirmChangeLanguage() {
    if ($('#id_language_code').val() != '{{ user.get_profile.language_preference }}') {
        return confirm("Are you sure you want to change the language?");
    } else {
        return true;
    }
}

The above code is working, but I am trying to replace the js confirmation pop up code with a bootstrap modal to fit in with the rest of my project and I have encountered some issues that has really confused me.

Here is the bootstrap modal code that displays the modal confirmation:

$('a[update-confirm]').click(function(ev) {
    var href = $(this).attr('href');
    if (!$('#updateConfirmModal').length) {
        $('body').append('<div id="updateConfirmModal" class="modal modal-confirm-max-width modal-vertical-centered" role="dialog" aria-labelledby="updateConfirmLabel" aria-hidden="true"><div class="modal-header"><button type="button" class="close" data-dismiss="modal" aria-hidden="true">X</button><h4 class="modal-title" id="updateConfirmLabel">{% trans "Confirm Language Change" %}</h4></div><div class="modal-body"></div><div class="modal-footer"><button class="btn" data-dismiss="modal" aria-hidden="true">{% trans "Cancel" %}</button>&nbsp;&nbsp;<a class="btn-u btn-u-blue" id="updateConfirmOK" onclick="showProgressAnimation();">{% trans "Update Langauge View" %}</a></div></div>');
    }
    $('#updateConfirmModal').find('.modal-body').text($(this).attr('update-confirm'));

    $('#updateConfirmOK').attr('href', href);

    $('#updateConfirmModal').modal({show:true});

    return false;
});

Here is the button code to submit the form but no modal is displayed:

<input update-confirm="Are you sure you want to change the language of the website?" class="btn btn-danger" type="submit" value="Submit but NO modal" />

Here is the button code that displays the modal but does not submit the form:

<a class="btn btn-warning" href="#" update-confirm="Are you sure you want to change the language of the website?">Modal but NO submit</a>

I am obviously missing some understanding of what exactly is happening here. The use of an < input for the form submission over a < a hyperlink has me confused.

How do I add in the conditional if statement to the modal code AND submit the form when the user clicks on the OK modal button?

Answer 1

First of all, never add events in markup, especially when using jquery

the solution, would be simple, you just add your event on submit form (use button, for submitting) and just add click action to the OKbutton

JS

$('#language_view_form').on('submit',function(ev) {
    var $form=this;
    ev.preventDefault();
    var href = $(this).attr('href');
    var modal=$('<div class="modal modal-confirm-max-width modal-vertical-centered" role="dialog" aria-labelledby="updateConfirmLabel" aria-hidden="true">');
    modal.append($('<div class="modal-header"><button type="button" class="close" data-dismiss="modal" aria-hidden="true">X</button><h4 class="modal-title" id="updateConfirmLabel">{% trans "Confirm Language Change" %}</h4></div>'));
    modal.append($('<div class="modal-body"></div>'));
    var modalFooter=$('<div class="modal-footer"><button class="btn" data-dismiss="modal" aria-hidden="true">Cancel</button></div>');
    var okButton=$('<button class="btn btn-u btn-u-blue">Update Langauge View</button>');
    modalFooter.append(okButton);

    modal.append(modalFooter);

    $('body').append(modal);
    modal.modal({show:true});
    modal.on('hidden.bs.modal',function(e) {
      modal.remove();
    });
    okButton.click(function() {
      $form.submit(); //or ajax submit here = you choose, in case of ajax use modal.modal('hide'); to hide modal.
    })


});
});

HTML

  <form id="language_view_form" class="form-horizontal" action="/" method="post">
    <input type="text"/>
    <button class="btn btn-warning" href="#" update-confirm="Are you sure you want to change the language of the website?">Submit</button>
  </form>

DEMO

Answer 2

you can use this normal modal html template from bootstrap

<form id="test" action="jsfiddle.net" method="POST">
    <select id="slct" data-original-value="0">
        <option value="0">Select</option>
        <option value="1">Option 1</option>
    </select>
    <button data-condition="test" data-toggle="modal-confirm" data-message="Are you sure?" data-title="Woooooo dude!" data-target="#submit-confirm" type="submit">Submit</button>
</form>

notice that you now can set a data-condition function name which must return true or false to show the modal

function test(){
    return true;
};

you can define your title and message body from the modal through the button element too

data-message and data-title

modal toggle now becomes data-toggle="modal-confirm"

and this js does the trick

$(document).ready(function(){
    //modal condition confirm
    $('button[data-toggle="modal-confirm"]').click(function(event) {
        event.preventDefault();
        var self = $(this);
        var message = self.data('message');
        var title = self.data('title');
        var target = $(self.data('target'));
        var condition = self.data('condition');
        if( target.length == 1) {
            target.find('.modal-title').html(title);
            target.find('.modal-body').html(message);
            var showModal = true;
            var fn = window[condition];
            if(typeof fn === 'function') {
                showModal = fn(condition);
            }
            if( showModal ) {
                target.on('shown.bs.modal', function(e) {
                    target.find('button[data-confirm="modal"]').click(function(e){
                        e.preventDefault();
                        var parentForm = self.closest('form');
                        console.log(parentForm.html());
                        if( parentForm.length == 1 ) {
                            parentForm.submit();
                        }
                    });
                });
                target.modal({ show: true });
            };
        };
    });
});

i made a small example on jsfiddle

http://jsfiddle.net/ZwAsL/2/