Как поправить запрос ajax на сабмит формы?

Question

[Марк]

Привет всем. Пытаюсь сохранять данные в из инпутов в форме через ajax. Уже видел здесь подобное решение, но у меня всё равно не хочет работать почему-то.
Это форма:

<form method="post" action="" name="save">
<input type="text" name="del" value="">
<input type="hidden" name="id" value="<?=$test['id']?>">                            
<input type="text" name="summa" value="">
<input type="text" name="logic" value="">
<button type="submit" name="save">Save</button>
</form>

А это сам ajax:

$(function () {
    $('.save').on('submit', function (e) {
        e.preventDefault();
        $.ajax({
            type: "POST",
            url: "test.php",
            data: $(this).closest('form').serialize(),
            success: function() {
                alert("Данные сохранены");
            }
        });
    });
});

И вот test.php:

if(isset($_POST['save']))
{
$link->set_charset("utf8");
$id = (int)$_POST['id'];
$summa = (int)$_POST['summa'];
$del = (int)$_POST['del'];
$log = strip_tags(trim($_POST['logic']));
$mysql = "UPDATE Users SET logic='$log', sum='$summa', del='$del' WHERE id=$id";
$result = mysqli_query($link, $mysql);

Comments

[Максим]

А в консоли что?

[Марк]

Максим, ничего там. Просто загружается test.php

[Дмитрий]

<form id="form"...

$('#form').on('submit', function (e) {...

Обращение к ид
Попробуйте так

[Марк]

Дмитрий, хм. Ajax отрабатывает, т.е. появляется алерт. В бд ничего не вносится. В консоли в form data всё корректно, но в response headers Content-Length: 0,

[Сергей Сергей]

после e.preventDefault() можно посмотреть на alert( $(this).closest('form').serialize() ), может чё не хватает?

[Марк]

Сергей Сергей,

del=1&id=572&summa=4500&logic=%D1%82%D0%B5%D1%81%D1%82%D0%B8%D0%BA

[Сергей Сергей]

значит isset($_POST['save']) есть false.

далее, можно сделать echo для GET и POST массивов обратно в обработчик ajax, посмотреть.

Answer 1

[irishmann]

Я бы это сделал так:

Клик

форма:

<input type="text" id="del" name="del" value="">
<input type="hidden" id="id" name="id" value="<?=$test['id']?>">                            
<input type="text" id="summa" name="summa" value="">
<input type="text" id="logic" name="logic" value="">
<button id="save" name="save">Save</button>

ajax:

$("#save").click(function(){
       $.ajax({
           type: "POST",
           'dataType': 'json',
           url: "test.php",
            data: {
               id: $('#id').val(),
               summa: $('#summa').val(),
               del: $('#del').val(),
               logic: $('#logic').val(),
           },
           success: function(data) {
               if(data['status'] == 'success'){
                   alert('Данные переданы');
               }
               else{
                   alert('Произошла ошибка!');
               }
           }
       });
    });

обработчик:

$link->set_charset("utf8");
$id = (int)$_POST['id'];
$summa = (int)$_POST['summa'];
$del = (int)$_POST['del'];
$log = strip_tags(trim($_POST['logic']));
$mysql = "UPDATE Users SET logic='$log', sum='$summa', del='$del' WHERE id=$id";

if(!mysqli_query($link, $mysql)){
    $status = 'error';
}
else{
    $status = 'success';
}
echo json_encode(['status' => $status]);

Comments

[Марк]

Не сработало.
В запросе корректно всё, ответа нет

[irishmann]

Марк, Пример посмотрите исходник, у меня все работает

[Марк]

irishmann, не понимаю, почему у меня не возвращается alert :(

[irishmann]

Марк, у вас форма, ajax и обработчик php все на одной странице?

[Марк]

irishmann, нет)
Форма - на одной, ajax - на другой, php - на третьей

[irishmann]

Марк, в devTools вкладка network или сеть , файл обработчика что возвращает и показывает?

[Марк]

irishmann,

[irishmann]

Марк, вкладка preview

[Марк]

irishmann, пустая

[irishmann]

Марк, php код с моего примера не брали?

[Марк]

irishmann, брали.
Я только оставил начало:

<?php

require_once('db.php');

if(isset($_POST['save']))
{
...

И дальше - ваш код

[irishmann]

Марк, в моем примере $_POST['save'] не передается, поэтому я его оттуда убрал, если он вам необходим, то вот ajax

$("#save").click(function(){
       $.ajax({
           type: "POST",
           'dataType': 'json',
           url: "test.php",
            data: {
               id: $('#id').val(),
               summa: $('#summa').val(),
               del: $('#del').val(),
               logic: $('#logic').val(),
               save: true,
           },
           success: function(data) {
               if(data['status'] == 'success'){
                   alert('Данные переданы');
               }
               else{
                   alert('Произошла ошибка!');
               }
           }
       });
    });

[Марк]

irishmann, отлично, заработало)
Спасибо)

[Марк]

irishmann, хм, а может подскажете ещё вот что:
У меня данные в форму выводятся в цикле, и работает этот сейв только с первой итерацией...
Может, нужно как-то сериализировать данные?

[Александр Руссу]

Марк, А еще запрос идёт на tost.php вместо test.php на скрине :)

[Марк]

sandu2d, Это не важно :)
В оригинале сейчас tost.php

Answer 2

[Антон]

В jquery вы вызываете селектор с классом save, у вашей формы класса save нет.
Если на то пошло, то $('form[name="save"]')

Comments

[Марк]

Сейчас данные передаются, вижу в form data в консоли, но в response headers Content-Length: 0, и ничего не сохранилось.

[Александр Руссу]

Марк, Потому-что срабатывает обычный form.submit. У вас action пустой, так-что просто отправляется на ту же страницу и в Form Data появляются данные что отправляются.

Для этого и добавляется e.preventDefault(); чтоб данные вот так не отправлялись.

Наверное.. а вообще, проверьте куда данные отправляются, если request к test.php, то надо искать дальше проблему :)