[英]Bootstrap - Form not submitting inside a modal
我有一个表单,该表单位于不提交我的PHP操作的模式中。 当我采用模态之外的形式时,它可以按我的要求很好地进行提交,但是一旦在模态中,提交就变得没有响应,这是我正在使用的代码:
div class="modal fade bd-example-modal-lg" tabindex="-1" role="dialog"
aria-labelledby="myLargeModalLabel" aria-hidden="true" id="myLargeModalLabel">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Add A New Appointment</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form id="submit_form">
<div class="row">
<div class="col">
<label>Name</label>
<input type="text" name="fname" id="fname" class="form-control" />
</div>
<div class="col">
<label>Date</label>
<input type="date" name="datepicker" id="datepicker" class="form-control" />
</div>
</div>
<div class="form-group">
<label class="CustomLabel">Appointment Information</label>
<textarea name="notes" id="notes" class="form-control"></textarea>
</div>
<input type="button" name="submit" id="submit" class="btn btn-info" value="Add Appointment" />
<span id="error_message" class="text-danger"></span>
<span id="success_message" class="text-success"></span>
</form>
Javascript:
$(document).ready(function(){
$('#submit').click(function(){
var name = $('#fname').val();
var message = $('#notes').val();
if(name == '' || message == '')
{
$('#error_message').html("All Fields are required");
}
else
{
$('#error_message').html('');
$.ajax({
url:"insert.php",
method:"POST",
data:{fname:name, notes:message},
success:function(data){
$("form").trigger("reset");
$('#success_message').fadeIn().html(data);
setTimeout(function(){
$('#success_message').fadeOut("Slow");
}, 2000);
}
});
}
});
});
参见代码的工作小提琴
<form id="submit_form">
<div class="row">
<div class="col">
<label>Name</label>
<input type="text" name="fname" id="fname" class="form-control" />
</div>
<div class="col">
<label>Date</label>
<input type="date" name="datepicker" id="datepicker" class="form-control" />
</div>
</div>
<div class="form-group">
<label class="CustomLabel">Appointment Information</label>
<textarea name="notes" id="notes" class="form-control"></textarea>
</div>
<input type="button" name="submit" id="submit" class="btn btn-info" value="Add Appointment" />
<span id="error_message" class="text-danger"></span>
<span id="success_message" class="text-success"></span>
</form>
JS代码
$(document).ready(function() {
$('#submit').click(function() {
var name = $('#fname').val();
var message = $('#notes').val();
if (name == '' || message == '') {
$('#error_message').html("All Fields are required");
} else {
$('#error_message').html('');
$.ajax({
url: "insert.php",
method: "POST",
data: {
fname: name,
notes: message
},
success: function(data) {
$("form").trigger("reset");
$('#success_message').fadeIn().html(data);
setTimeout(function() {
$('#success_message').fadeOut("Slow");
}, 2000);
}
});
}
});
});
我没有看到任何问题,除了未加载jquery参考。 您可以在浏览器的开发者控制台中看到此内容
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.