Отправьте только одну из множества форм (одно и то же имя, разные идентификаторы), используя Ajax

Question

У меня есть список недавно загруженных файлов, которые имеют редактируемые данные. Каждый элемент списка обернут в форму с его кнопкой отправки. Я хочу отредактировать эти входные данные и отправить определенную форму (которая сохраняет изменения в БД), используя Ajax и сериализованную форму.

Проблема в том, что ajax не является успешным с его методом POST, и я не могу понять, почему. В минимизированном примере HTML есть только 2 формы, содержащие один скрытый ввод. На самом деле, форм может быть гораздо больше, и каждая из них имеет много типов ввода текста, выбирает, ...

В JS я получаю id из <form> элемента после нажатия на кнопку отправки. Затем отправляется form с id, он должен сериализовать форму и отправить ее в PHP. Но после того, как я нажму кнопку «Отправить», консольные отчеты «не удалось», потому что Ajax не был успешным. Когда я комментирую строку e.preventDefault();, форма отправляется noramlly и $ id отображается правильно благодаря эхо.

Мне не удалось решить ее самостоятельно, и я не нашел здесь решения, поэтому я прошу здесь о вашей помощи. Я верю, что это не сложная проблема, и я просто не знаю, что я делаю :) Спасибо.

Редактировать: Я обновил JS - избавился от события нажатия, отредактировал функцию успеха и добавил error: в $.ajax. Это не показывает ошибки. Теперь он должен регистрировать $id в консоли, но он регистрирует только пустую строку (поэтому ничего).

<form name="save-image" id="save-image-74" action="./inc/upload-proc.php" method="POST">
  <input type="hidden" name="save-image-id" value="74">
  <input type="submit" name="save-image" value="Save">'
</form>

<form name="save-image" id="save-image-75" action="./inc/upload-proc.php" method="POST">
  <input type="hidden" name="save-image-id" value="75">
  <input type="submit" name="save-image" value="Save">'
</form>

Javascript + jQuery:

// Send SAVE IMAGE form with Ajax
$("form[name*='save-image']").submit(function(e) {
  var form = $(this);
  var url = form.attr('action');
  e.preventDefault();
  console.log(form);
  $.ajax({
         type: "POST",
         url: url,
         data: form.serialize(), // serializes the form's elements.
         error: function(xhr, status, error) {
           var err = eval("(" + xhr.responseText + ")");
           alert(err.Message);
         },
         success:function(data){
           console.log(data);
        }
       });
  });

загрузка-proc.php:

if (isset($_POST['save-image'])) {
  $id = $_POST['save-image-id'];
  // There will be updates in database, not important.
  echo $id;
}

Answer 1

Хорошо, я обнаружил, в чем проблема. Я уверен, что это очевидно для вас, но для меня это ново. Я думал, что .serialize () отправляет саму форму имени для upload-proc.php, но он, вероятно, только отправляет свои входные данные. Поэтому вместо if (isset($_POST['save-image'])) { ... } я должен использовать имя скрытого ввода, поэтому правильный upload-proc.php:

if (isset($_POST['save-image-id'])) {
  $id = $_POST['save-image-id'];
  // There will be updates in database, not important.
  echo $id;
}