Show Twitter Bootstrap modal on form submit

Question

I am trying to show modal on submit of form with some condition such as:

form have two text field, if one of them is filled then modal will be shown to user with some info and If both field are not filled then form will not bo going to submit For this I did this but not getting success..

jsfiddle: jsFidle Link

<div id="modal-3" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-content">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>

        <h3 id="myModalLabel">Modal header</h3>
    </div>

    <div class="modal-body">
        <p>do you want to save partial info</p>
    </div>

    <div class="modal-footer">
        <button class="btn" data-dismiss="modal" aria-hidden="true" id="finishNow">Finish Now</button>
        <button class="btn btn-primary" data-dismiss="modal" id="doItLater">Do It Later</button>
    </div>
    </div>
</div>


    <a href="#modal-3" role="button" class="btn" data-toggle="modal" id="confirmButton">Confirm</a>



<form name="asd" action="asdd" name="formName" id="refrenceSubmit" >
<input type="text" name="name11" id="nameField" value=""/>
<input type="text" name="name22"id="phoneField" value=""/>
<input type="submit" name="name33"value="Submit" />
</form>

js:

$(function(){
            $("#refrenceSubmit").submit(function(){

                var inputFieldsCount=0;
                $(this).find('input[type=text]').each(function(){
                    if($(this).val() != "") inputFieldsCount+=1;
                });

                if(!inputFieldsCount){
                    alert("You must fill in at least one field");
                    return false;
                }else if(inputFieldsCount<2){
                       $('#confirmButton').click()
                       $('#showModelContainer').show()
                       $('#doItLater').click("click",function (e) {
                       $('#refrenceSubmit').submit()
                        }
                     });
                     return false;
                }
            });
        });

EDITED JAVASCRIPT:

$(function(){
            $("#submitAndContinue").click(function(evt){

                var inputFieldsCount=0;
                $('.refrenceSubmit').find('input[type=text]').each(function(){
                    if($(this).val() != "") inputFieldsCount+=1;
                });

                if(!inputFieldsCount){
                    alert("You must fill in at least one field");
                    evt.preventDefault();
                }else if(inputFieldsCount<5){

                   $('#modal-3').modal('show');
                   evt.preventDefault();
                }
                else {
                    $('#modal-3').modal('hide'); //in-case is showing
                }
            });

            $('#doItLater').on("click",function (e) {
              $('#saveAndContinue').val('saveAndContinue');
              $('.refrenceSubmit').submit();
            });
        });

Note that the correct term is `modal`, not `model`. Using "modal" in title might get better responses in future questions since model usually means something completely different. I changed that for you on this question. — kaliatech, Jan 01 '14 at 22:42

score 3 · Accepted Answer · edited May 23 '17 at 12:19

Your original HTML code in jsfiddle was hiding the enclosing container of the modal. Also, there was a syntax error in the JavaScript. Here is a new jsfiddle that fixes those issues and also shows how to trigger the modal, and then manually submit when a button in the modal is clicked.

http://jsfiddle.net/kc8zb/9/

Code:

$(function(){
            $("#refrenceSubmit").submit(function(evt){

                var inputFieldsCount=0;
                $(this).find('input[type=text]').each(function(){
                    if($(this).val() != "") inputFieldsCount+=1;
                });

                if(!inputFieldsCount){
                    alert("You must fill in at least one field");
                    evt.preventDefault();
                }else if(($('#nameField').val()=="")&&
                         ($('#phoneField').val()!="")){

                   $('#modal-3').modal('show');
                   evt.preventDefault();
                }
                else {
                    $('#modal-3').modal('hide'); //in-case is showing
                }


            });

            $('#doItLater').click("click",function (e) {
              $('#nameField').val("not clear what you intended, but this sets value in name field");
              $('#refrenceSubmit').submit();
            });

        });

It's was not clear what you want to do, but this should give you a starting point. If you want to hook in to the modal, you can bind to click events on the modal's buttons, or you can watch for the modal close event.

Also, be aware that returning false to cancel a submit event is deprecated. Instead use preventDefault.

On click of model button(do it later) form is not submitted.I just need that if any field is empty , then asked the user whether he wants to filled entries now(Finish Now) or later(Do it later)..Please see my edited question, i.e I tried to make it simple in else if(inputFieldsCount<2) condition, here 2 is number of input fields on form. — ABC, Jan 02 '14 at 11:33
Based On your suggestions , I achieved what I want.Great Thank to you. — ABC, Jan 02 '14 at 11:57

hackp0int · Answer 2 · 2014-01-01T21:39:04.983

I just changed your code a little bit

code will turn on modal on submit... check it out

$(function(){
     $('form').on('submit', function () {                   
          $('#modal-3').modal('show');
          return false;
     });
 });

Here is the fixing up: I've changed your object a little :)

(function () {
    var confirmSubmitManager = {
        init: function () {
            this.submitButton = null;
            this.confirmButton = null;
            this.modalContainerView = null;
            this.isFormPrestine = false;
            this.form = null;
            this.inputs = [];

            this.cache();
            this.bindEvents();
            return this;
        },
        cache: function() {
            this.submitButton = $("input[type=submit]");
            this.confirmButton = $("#doItLater");
            this.modalContainerView = $("#modal-3");
            this.inputs = $("#refrenceSubmit > input[type=text]");
            this.form = $("#refrenceSubmit");
        },
        bindEvents: function () { // attach event handlers

            this.submitButton.on('click', this.validateSubmit);
            this.confirmButton.on('click', this.confirm);
        },
        validateSubmit : function() {
            var self = confirmSubmitManager;
            var dirtyInputs = 0;

            for (var input in self.inputs) {

                if ($(self.inputs[input]).val() == "") {
                    dirtyInputs++;
                }
            }

            if (dirtyInputs > 0) {
                alert("You must fill in at least one field");
                self.isFormPrestine =  false;

            } else {
                 self.isFormPrestine =  true;
            }                      
            // incase the inputs are pristeen
            self.modalContainerView.modal('show');
            return false;
        },
        confirm: function () {
            var self = confirmSubmitManager;
            if(self.isFormPrestine)
               self.form.submit();
        }
    };
    window.load = confirmSubmitManager.init();
})(jQuery);

1)Actually when I submit form it checks whether any field is empty and shows relevant message.(Working)..2)When I submit form My code display the model, only problem is that it submits form automatically I am not getting chance to click the model's button so that I can submit form. — ABC, Jan 01 '14 at 21:01

Show Twitter Bootstrap modal on form submit

2 Answers2

Linked