Как правильно отправить данные с формы на сервер?

Question

Точнее, вопрос даже не в том, как отправить, а почему у меня он не отправляется.

В кратце: есть попап с формой:

(HTML)
<div class="popup__form">
     <form action="" class="form__popup__window" id="form_popup_send" autocomplete="off">
          <input type="text" name="experiment_num" placeholder="Exp. Number" required/>
          <input type="text" name="creature_name" class="creature-name" placeholder="Creature name" required/>
          <input type="text" name="description_expirement" class="about-exp" placeholder="About experiment:" required/>
          <input type="text" name="description_creature" class="about-exp" placeholder="About creature:" required/>
          <input type="number" name="upload" class="upload" placeholder="upload?" min="0" max="1" required/>
          <button class="btn btn-outline-danger" id="form_sub">CREATE</button>
     </form>
<div id="err-cons"></div>
</div>

При вводе всех input'ов, тыкается кнопка "CREATE" и, по-логике, в JS-файле должна происходить магия(ajax) и, с помощью JQuery, забирать всю инфу из input'ов и кидать её на сервак.

JS-файл:

$('#add_doc').click(function() { //Это я делаю для попапа(на кнопку показываться). Не важно
    document.getElementById('popup').className += " visibill";
})
$(document).ready(function() { //То, что волнует.
    $('#form_sub').submit(function() {
        $.ajax({
            type: "POST",
            url: "http://documentation/documentsoneserver",
            data: $('#form_popup_send').serialize()
        }).done(function(response) {
            console.log(response);
        });
        return false;
    });
});
$('.popup__close').click(function() { //Это попап скрывает. Не важно
    document.getElementById('popup').classList.remove("visibill");
})

И вот проблемка в том, что оно не кидается. В siteController я создал переменную, её пытаюсь дампнуть, но она выдаёт NULL.

PHP-файл

public function actionDocumentsoneserver() {
        \Yii::$app->response->format = \yii\web\Response::FORMAT_JSON;
    $data = Yii::$app->request->post();
    $data = $data['data'];

    var_dump($data);
    return;

}

Я знаю, что я не самый внимательный человек, так что если вы захотите покрыть меня 3-х этажным, найдя пропущенную точку с запятой, то я пойму.

P.S: Также отмечу, что я использовал и другую форму отправки AJAX.

Опять JS-файл и другая форма отправки:

let formSub = document.getElementById('form_sub');
formSub.addEventListener('click', function(){
    $.post('/documentsoneserver',
    {data: $('.form__popup__window').serialize()},
    function(result) {
        console.log($('.form__popup__window').serialize());
    $('#form_sub').submit(function (e) {
        e.preventDefault(); //Почему-то по нажатию кнопки "CREATE", форма перезагружает страницу. Вроде эта функция должна была это исправить, но, видимо, не судьба.
    });
    });
}) 

Answer 1

Проблема тут простая и немного не заметная.

На данный момент при клике на кнопку не происходит никакого ajax запроса, а банально происходит сабмит формы и перезагрузка страницы. Причём т.к. в форме не указан метод, то по-умолчанию стоИт метод GET. В итоге логично, что в методе POST на сервере ничего нет.

---

Почему происходит сабмит а не ajax? Об этом в самом низу.

---

Чтобы поправить ошибку нужно в js поправить строки и писать вместо

$('#form_sub').submit(function() {

вот так:

$('#form_popup_send').submit(function() {

т.к. надо указывать айдишник именно формы, т.к. событие submit работает с формой, а сейчас оно висит на кнопке и ничего не происходит.

Можно конечно сделать кнопку с типом button и тогда сделать вот так:

$('#form_sub').click(function() {

и тогда тоже всё сработает.