最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - Show Twitter Bootstrap modal on form submit - Stack Overflow

programmeradmin3浏览0评论

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

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();
            });
        });
Share Improve this question edited Jan 2, 2014 at 17:36 ABC asked Jan 1, 2014 at 20:32 ABCABC 4,37310 gold badges47 silver badges78 bronze badges 1
  • 2 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 pletely different. I changed that for you on this question. – kaliatech Commented Jan 1, 2014 at 22:42
Add a ment  | 

2 Answers 2

Reset to default 3

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/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.

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);
发布评论

评论列表(0)

  1. 暂无评论