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

我试图在提交表格时显示模态，例如：

form有两个文本字段，如果其中一个填充，那么modal将向用户显示一些信息，如果两个字段都没有填写，那么表单将不会提交为此我做了这个但没有成功..

jsfiddle： jsFidle Link

 
 
 × 
Modal header
 
 
 
do you want to save partial info
 
 
 Finish Now Do It Later 
 
 
 Confirm 
     

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

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

目前还不清楚你想做什么，但这应该给你一个起点。 如果要挂接模态，可以绑定模态按钮上的单击事件，或者可以观察模态关闭事件 。

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

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