twitter-bootstrap 在表单提交上显示 Twitter Bootstrap 模式
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20872959/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Show Twitter Bootstrap modal on form submit
提问by Abs
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
jsfiddle： jsFiddle 链接
<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:
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:
编辑过的 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();
});
});
回答by kaliatech
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.
您在 jsfiddle 中的原始 HTML 代码隐藏了模态的封闭容器。此外，JavaScript 中存在语法错误。这是一个新的 jsfiddle，它修复了这些问题，还展示了如何触发模态，然后在单击模态中的按钮时手动提交。
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.
另外，请注意，不推荐使用返回 false 来取消提交事件。而是使用preventDefault。
回答by IamStalker
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);
