在表单提交上显示 Twitter Bootstrap 模式

Posted 2023-05-08

【中文标题】在表单提交上显示 Twitter Bootstrap 模式

【英文标题】：Show Twitter Bootstrap modal on form submit

【发布时间】：2014-01-19 07:28:19

【问题描述】：

我正在尝试在提交表单时显示模态，例如：

表单有两个文本字段，如果其中一个已填写，则模式将向用户显示一些信息，如果两个字段均未填写，则表单将不会提交 为此，我这样做了，但没有成功..

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

编辑的 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();
            );
        );

【问题讨论】：

请注意，正确的术语是modal，而不是model。在标题中使用“模态”可能会在未来的问题中得到更好的回答，因为模型通常意味着完全不同的东西。我在这个问题上为你改变了。

【参考方案1】：

您在 jsfiddle 中的原始 html 代码隐藏了模态框的封闭容器。此外，javascript 中存在语法错误。这是一个新的 jsfiddle，它修复了这些问题，还展示了如何触发模态，然后在单击模态中的按钮时手动提交。

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

代码：

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

        );

目前尚不清楚您要做什么，但这应该可以为您提供一个起点。如果你想钩入模态，你可以绑定到模态按钮上的点击事件，或者你可以关注modal close event。

另外，请注意，不推荐使用返回 false 来取消提交事件。而是使用preventDefault。

【讨论】：

点击模型按钮（稍后再做）表单没有提交。我只需要如果任何字段为空，然后询问用户他是否想现在填写条目（现在完成）或稍后（稍后再做）..请看我编辑的问题，即我试图在 else if(inputFieldsCount

根据您的建议，我实现了我想要的。非常感谢您。

【参考方案2】：

我只是稍微修改了你的代码

代码将在提交时打开模式...检查一下

$(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）实际上，当我提交表单时，它会检查是否有任何字段为空并显示相关消息。（工作）..2）当我提交表单时我的代码显示模型，唯一的问题是它提交自动表单我没有机会点击模型的按钮，以便我可以提交表单。