Как правильно отправить данные с формы на сервер?
Точнее, вопрос даже не в том, как отправить, а почему у меня он не отправляется.
В кратце: есть попап с формой:
(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", форма перезагружает страницу. Вроде эта функция должна была это исправить, но, видимо, не судьба.
});
});
})
Ответы (1 шт):
Проблема тут простая и немного не заметная.
На данный момент при клике на кнопку не происходит никакого ajax запроса, а банально происходит сабмит формы и перезагрузка страницы. Причём т.к. в форме не указан метод, то по-умолчанию стоИт метод GET. В итоге логично, что в методе POST на сервере ничего нет.
Почему происходит сабмит а не ajax? Об этом в самом низу.
Чтобы поправить ошибку нужно в js поправить строки и писать вместо
$('#form_sub').submit(function() {
вот так:
$('#form_popup_send').submit(function() {
т.к. надо указывать айдишник именно формы, т.к. событие submit работает с формой, а сейчас оно висит на кнопке и ничего не происходит.
Можно конечно сделать кнопку с типом button и тогда сделать вот так:
$('#form_sub').click(function() {
и тогда тоже всё сработает.