1
Я работаю над модальной формой bootstrap bootbox, использующей jquery formvalidation. Мне нужно поместить кнопку отправки внутри modal-footer, а при отправке оно должно проверить с помощью formvalidation плагина и сделать Ajax submit.Отправить форму FormValidation на загрузочном поле
Ниже приведен мой код при нажатии кнопки submit1 он работает должным образом, как мне нужно, но кнопка находится внутри модального тела. когда я отправлю форму с помощью submit2 кнопка, которая находится на модальном нижнем колонтитуле, закрывает модальность, ничего не делая.
Либо кнопку Submit1 должны быть внутри модально-сноска или Submit2 кнопку сделать проверку. Нужна ваша помощь.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Test</title>
<link rel="stylesheet" href="../library/bootstrap/css/bootstrap.min.css"/>
</head>
<body>
<button id="btnClick">Click Me</button>
<!-- reservation Dialog -->
<form id="reservation" method="post" class="form-horizontal" style="display:none;">
<div class="form-group">
<label class="col-xs-3 control-label">Title</label>
<div class="col-xs-7">
<input type="text" class="form-control" id="title" name="title"/>
</div>
</div>
<div class="form-group">
<label class="col-xs-3 control-label">Name</label>
<div class="col-xs-7">
<input type="text" class="form-control" id="name" name="name"/>
</div>
</div>
<div class="form-group">
<button id="Submit1" type="submit" class="btn btn-info">Submit1</button>
</div>
</form>
<script src="../library/jquery/jquery-2.1.4.min.js"></script>
<script src="../library/bootstrap/js/bootstrap.min.js"></script>
<script src="../library/formvalidation/formValidation.min.js"></script>
<script src="../library/formvalidation/formValidation.bootstrap.min.js"></script>
<script src="../library/bootBox/bootbox.min.js"></script>
<script >
$(document).ready(function(){
var reservation = $('#reservation');
$('#btnClick').on('click',function(){
bootbox.dialog({
title: 'Edit Reservation',
message: reservation,
size: 'large',
show: false,
buttons: {
Submit2: {
label: "Submit2",
className: "btn-success",
callback: function(e) {
e.preventDefault();
console.log('Submit Clicked');
}
}
}
}).on('shown.bs.modal',function() {
reservation
.show() // Show the login form
.formValidation('resetForm', true); // Reset form
}).on('hide.bs.modal',function (e) {
reservation.hide().appendTo('body');
}).modal('show').find("div.modal-dialog").css('width','900px');
reservation.show();
});
reservation.formValidation({
framework: 'bootstrap',
icon: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
fields: {
title: {
validators: {
notEmpty: {
message: 'The title is required'
}
}
}, name: {
validators: {
notEmpty: {
message: 'Please select type'
}
}
}
}
}).on('success.form.fv', function (e) {
e.preventDefault(); // Prevent form submission
var $form = $(e.target);
// Use Ajax to submit form data
console.log("ajax submit");
});
});
</script>
</body>
</html>