【发布时间】:2016-12-10 13:03:13
【问题描述】:
对不起菜鸟问题。我已阅读 Show Twitter Bootstrap modal on form submit 并从那里复制粘贴了一些代码,但没有帮助。
我正在尝试在我的页面上实现以下行为:
如果填充了“id_field1”和“id_field2”字段,则当用户按下“提交”按钮时,必须提交表单并显示以下模式窗口:
“[添加另一个]或[重定向到其他页面]?”。
必须显示其他简单警报(必须填写“id_field1”和“id_field2”字段)
但是,如果未填充字段,我的代码当前会呈现模式窗口,并且不提交任何内容。
html
<form method="POST">
<input class="form-control" id="id_field1" name="field1" type="text" required="">
<input class="form-control" id="id_field2" name="field2" type="text" required="">
<button type="button" class="btn btn-xl btn-success" data-toggle="modal" data-target="#myModal" id="formsubmit">Add item</button>
</form>
<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog modal-sm">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Item was successfully added</h4>
</div>
<div class="modal-body">
<p>Add another?</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Yes</button>
<a href="some_url" class="btn btn-primary">No</a>
</div>
</div>
</div>
</div>
jQuery
$(function(){
$( "#formsubmit" ).click(function() {
$( "form" ).submit(function(evt){
field1 = $( '#id_field1' ).val();
fiedl2 = $( '#id_field2' ).val();
if((field1 === '') && (field2 === '')){
alert("You must enter tenant's name and phone at least");
evt.preventDefault();
} else {
$( '#myModal' ).modal('show');
}
});
});
});
非常感谢。
【问题讨论】:
标签: jquery html twitter-bootstrap bootstrap-modal