提交表单后，阻止JS重新加载页面

Question

我正在使用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;
});

此外，不会显示成功警报。

控制器将重定向到空白页：

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页面，但均未成功。 请帮忙 ！
谢谢

Answer 1

1：您需要使用“ submit到表单”而不是“ submit button

$('#myForm').submit(function(e) {

代替

$('#submitButton').submit(function(e) {

2nd：您忘记了myForm id之前的#号

data: $(this).serializeArray(), // or data: $("#myForm").serializeArray(),

代替

data: $("myForm").serializeArray(),