在表单提交后停止JS重新加载页面

Question

I'm using an MVC framework CodeIgniter, FullCalendar, Bootstrap and Jquery to create a website.

The calendar has clickable events which open a modal dialog containing a form.
The form seems to work, as the controller method is rightfully called and the database updated, but I want to avoid the website going to another page or reloading after submitting the form.
I've tried several methods:

e.preventDefault();
return false; 

and more...

here is the HTML concerning the modal dialog and the form:

            <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>

here is the javascritpt for the eventClick event:

    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;
});

Also, the success alert is not shown.

The controller redirects to a blank page:

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);
        }
    }
}

My problem has been resolved a great many times, and I've checked a lot of stackoverflow pages of the same problem without success. Please help !
Thanks

Answer 1

1st: You need to use submit to the form not to the submit button

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

instead of

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

2nd: You forgot the # sign before myForm id

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

instead of

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