我有一个用PHP代码更新mysqli数据库的表单。代码很好,当我提交表单时数据库更新,这意味着它工作正常。但我希望在提交表单之前收到确认引导模式。为此我使用了以下代码。这里模态打开,但是当点击OK按钮时它不起作用。
<button class="btn btn-danger btn-lg" name="submit" value="submit" type="submit" data-condition="salaryinfo" data-toggle="modal-confirm" data-message="Are you sure?" data-title="Hi you!" data-target="#submit-confirm">Submit</button>
</form>
<!-- Modal -->
<div class="modal fade" id="submit-confirm" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title"></h4>
</div>
<div class="modal-body"></div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary" data-confirm="modal">OK</button>
</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery-1.12.0.min.js"></script>
<script type="text/javascript" src="js/jquery-ui.min.js"></script>
<!-- For modal -->
<script src="js/confirm-bootstrap.js"></script>
<script type="text/javascript">
function salaryinfo(){
return true;
};
$(document).ready(function(){
//modal delete confirm
$('button[data-toggle="modal-confirm"]').click(function(event) {
event.preventDefault();
var self = $(this);
var message = self.data('message');
var title = self.data('title');
var target = $(self.data('target'));
var condition = self.data('condition');
if( target.length == 1) {
target.find('.modal-title').html(title);
target.find('.modal-body').html(message);
var showModal = true;
var fn = window[condition];
if(typeof fn === 'function') {
showModal = fn(condition);
}
if( showModal ) {
target.on('shown.bs.modal', function(e) {
target.find('button[data-confirm="modal"]').click(function(e){
e.preventDefault();
var parentForm = self.closest('form');
console.log(parentForm.html());
if( parentForm.length == 1 ) {
parentForm.submit();
}
});
});
target.modal({ show: true });
};
};
});
});
</script>
对工作模式的任何建议?
答案 0 :(得分:2)
您可以将表单提交绑定到“确定”按钮而不是“提交”按钮。
点击Submit
按钮:打开模式
点击Ok
按钮:提交表单
为表单<form id='my_form'>
分配ID。
为您的Ok
按钮分配ID
<button id='my_ok_button' type="button" class="btn btn-primary" data-confirm="modal">OK</button>
将表单提交绑定到您的Ok
按钮
<script type='text/javascript'>
$(document).on('click', '#my_ok_button', function() {
$('#my_form').submit();
})
</script>
您需要包含jQuery才能使用此脚本。
答案 1 :(得分:1)
您已经在模态打开之前提交表单,因为您的按钮的值为submit:
<button class="btn btn-danger btn-lg" name="submit" value="submit" type="submit" data-condition="salaryinfo" data-toggle="modal-confirm" data-message="Are you sure?" data-title="Hi you!" data-target="#submit-confirm">Submit</button>
所以,只需将一个普通按钮与数据切换到您的模态即可。
然后在模态上设置确认按钮,以获得提交值。
您还需要在<form> </form>