我使用 MVC 框架 CodeIgniter
、FullCalendar
、Bootstrap
和 Jquery
来创建网站。
日历具有可单击事件,可打开包含表单的模式对话框。
该表单似乎有效,因为正确调用了 Controller 方法并更新了数据库,但我想避免网站在提交表单后转到另一个页面或重新加载。
我尝试过几种方法:
e.preventDefault();
return false;
还有更多...
这里是有关模式对话框和表单的 HTML:
<div class="modal-body">
<form id="myForm" action="<?=base_url()?>index.php/activite/planning_people" method="post">
<input type="hidden" id="date" name="date"/>
<input type="hidden" id="id" name="id"/>
<?php foreach ($people as $person) : ?>
<div class="checkbox">
<label><input type="checkbox" value="<?=$person['number']?>" name="people[]"><?= $person['firstname']." ".$person['lastname'] ?></label>
</div>
<?php endforeach; ?>
</div>
<div class="modal-footer">
<input class="btn btn-lg" type="submit" id="submitButton" value="Validate">
</form>
</div>
<div class="container">
<div id="bootstrapModalFullCalendar"></div>
</div>
这里是 eventClick
事件的 javascritpt:
eventClick: function(event) {
var inputs = document.getElementsByTagName('input');
$('#modalTitle').html(event.title+" "+moment(event.start).format('LL'));
$('#id').val(event.id.split(" ")[0]);
$('#date').val(event.id.split(" ")[1]);
$('#fullCalModal').modal();
}
});
$('#submitButton').submit(function(e) {
e.preventDefault();
$.ajax({
url: "<?=base_url("index.php/activity/planning_people")?>",
type: "POST",
data: $("myForm").serializeArray(),
success: function(data){
alert(data);
},
});
return false;
});
此外,不会显示成功警报。
Controller 重定向到空白页面:
public function planning_people() {
$people = $this->input->post("people[]");
$id = $this->input->post("id");
$date = $this->input->post("date");
$this->EZ_query->delete_planning($id, $date);
if ($people != null) {
foreach ($encadrants as $key => $no) {
$this->EZ_query->add_planning($id, $date, $no);
}
}
}
我的问题已经解决了很多次,并且我检查了很多同一问题的 stackoverflow 页面,但没有成功。请帮忙!
谢谢
最佳答案
第一:您需要使用提交
表单而不是提交按钮
$('#myForm').submit(function(e) {
而不是
$('#submitButton').submit(function(e) {
第二:您忘记了 myForm
id 之前的 #
符号
data: $(this).serializeArray(), // or data: $("#myForm").serializeArray(),
而不是
data: $("myForm").serializeArray(),
关于javascript - 表单提交后阻止 JS 重新加载页面,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44144791/