Rectangle 27 0

javascript Show Twitter Bootstrap modal on form submit?


$(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();
            });

        });

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

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.

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.

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.

Note
Rectangle 27 0

javascript Show Twitter Bootstrap modal on form submit?


$(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();
            });

        });

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

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.

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.

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.

Note
Rectangle 27 0

javascript Show Twitter Bootstrap modal on form submit?


$(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();
            });

        });

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

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.

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.

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.

Note
Rectangle 27 0

javascript Show Twitter Bootstrap modal on form submit?


$(function(){
     $('form').on('submit', function () {                   
          $('#modal-3').modal('show');
          return false;
     });
 });
(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.

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

Note
Rectangle 27 0

javascript Show Twitter Bootstrap modal on form submit?


$(function(){
     $('form').on('submit', function () {                   
          $('#modal-3').modal('show');
          return false;
     });
 });
(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.

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

Note
Rectangle 27 0

javascript Show Twitter Bootstrap modal on form submit?


$(function(){
     $('form').on('submit', function () {                   
          $('#modal-3').modal('show');
          return false;
     });
 });
(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.

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

Note
Rectangle 27 0

javascript Show Twitter Bootstrap modal on form submit?


$(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();
            });

        });

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

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.

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.

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.

Note
Rectangle 27 0

javascript Show Twitter Bootstrap modal on form submit?


$(function(){
     $('form').on('submit', function () {                   
          $('#modal-3').modal('show');
          return false;
     });
 });
(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.

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

Note