jQuery получить значения из текущей формы

Question

Привет всем Я работаю над проектом, и я уверен, что совершил довольно большую ошибку. В основном у меня есть некоторый PHP-код, который извлекает некоторые значения из базы данных, и каждая строка получает свою собственную таблицу. Затем у каждого из них есть кнопка, которая удаляет его, что показывает небольшую раскрывающуюся форму с запросом некоторых деталей вместе с кнопкой отправки. Тем не менее, я почему-то не думал, что будет несколько форм, и каждый из них вводит id, в результате чего несколько элементов имеют один и тот же идентификатор.

Таким образом, в JavaScript запрос AJAX выполняется, когда пользователь отправляет удаление строки, а значения из формы (значения находятся по идентификатору ввода) отправляются как переменные POST в PHP-скрипт. Поскольку я делаю это, запрос AJAX работает только в том случае, если они удаляют первую строку, но не под ней.

Таким образом, этот HTML выводится PHP, чтобы добавить форму выпадающий к каждой строке:

<td class='dropdown'><a class='dropdown-toggle' href='#' data-toggle='dropdown'><button class='btn btn-warning'>Kick</button></a> 
<div class='dropdown-menu' style='padding:15px; width:340px'> 
    <div class='form-group'> 
     <form id='delete-form'> 
      <label for='delete-reason'>Reason: </label> 
      <input class='form-control' id='delete-reason' name='delete-reason'> 
      <input type='hidden' id='delete-id' name='delete-id' value='". $value['Name'] ."''> 
      </div> 
      <br> 
      <input type='submit' id='delete-submit' name='delete-submit' value='Delete ". $value['Name'] ."' class='btn btn-default'> 
     </form> 
    </div> 
</div> 

Затем я использую этот JavaScript, чтобы отправить форму, чтобы отправить данные из формы к PHP-скрипт по запросу AJAX.

$("#delete-form").submit(function(e){ 
e.preventDefault() // stop form from submitting 
var reason = $("#delete-reason").val(); 
var id = $("#delete-id").val() 

$.ajax({ 
    type: 'POST', 
    url: 'php/ajax.php', 
    data: { 
     deletereason: player, 
     deleteid: id 
    }, 
    success: function(response){ 
     $("#delete-result").append(response); 
     $("#delete-result").fadeIn(500); 
    } 
}) 

})

Итак, как я уже сказал, он работает только на первом ряду, потому что на других, он просто получает значения первого найденного ввода с этим идентификатором. И когда я делаю это в любой строке, кроме первой, она добавляет значения как строку запроса, которая ничего не делает, потому что хорошо, это не предполагается.

Однако я действительно не знаю, как это сделать, когда он получит значения из текущей формы, а не других, и именно поэтому я здесь.

Я понимаю, что все это довольно запутанно, и если вам нужно, чтобы я разъяснил что-либо или объяснил больше, я был бы счастлив.

Любые предложения?

Answer 1

Вам необходимо иметь уникальный идентификатор для каждого элемента form и input, а затем выполнить ответ, предоставленный @ArunPJohny. Но если вы не можете иметь уникальный идентификатор для каждого элемента затем следует ниже код

$(".form-group form").submit(function (e) { 
    e.preventDefault() // stop form from submitting 
    var reason = $(this).find("input[name='delete-reason']").val(); 
    var id = $(this).find("input[name='delete-id']").val(); 

    $.ajax({ 
     type: 'POST', 
     url: 'php/ajax.php', 
     data: { 
      deletereason: player, 
      deleteid: id 
     }, 
     success: function (response) { 
      $("#delete-result").append(response); 
      $("#delete-result").fadeIn(500); 
     } 
    }); 
});