0

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

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

(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", форма перезагружает страницу. Вроде эта функция должна была это исправить, но, видимо, не судьба.
    });
    });
}) 
5
  • 1
    $data['data']; --- почему думаешь, что в Post есть такой ключ? Включи отладку, посмотри, что прилетает в POST 28 авг 2022 в 20:41
  • @АлексейШиманский, потому что, таким способом я всегда принимаю ответ на бэке. При отрисовке страницы, к примеру, товарами, на фронте я отправляю параметр в переменной и её запихиваю в {data: переменная}. И на бэке всегда всё норм принималось. Отладка, всмысле. var_dump первой $data? Если да, то ничего не прилетает, в это и прикол.
    – Awake
    28 авг 2022 в 21:12
  • 1
    попробуй просто на какой-либо странице тестово без всяких форм что-то отправить, в url прописать так /controller-name/action-name, а в data прописать банально {'hello' : 'world'}. и посмотреть что пришло......и что уходит с клиента смотри в инструментах разработчика браузера................... "Отладка, всмысле. var_dump первой $data? " --- можно так, но чаще используют ru.stackoverflow.com/a/701146/191482 ........ 29 авг 2022 в 5:14
  • @АлексейШиманский, благодарю за помощь, ваши советы помогли в нахождении решения). Проблема была, видимо, в том, что jQuery'вский метод .serialize() забирал инфу из input'ов в строке и её не могла определить data на сервере. Заменил его на обычный doc.getElemId().value и всё это отправлял в data на сервер. Всё прекрасно теперь работает.
    – Awake
    29 авг 2022 в 22:46
  • На самом деле я понял в чём ошибка текущей формы и скрипта. Написал в ответе полностью (но то, что я писал про url - остаётся в силе) 30 авг 2022 в 6:38

1 ответ 1

1

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

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


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


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

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

вот так:

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

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

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

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

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

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.