Несколько форм на одной странице отправляют только один ajax

Question

У меня есть страница, которая динамически создает формы из строк в БД.Каждая строка таблицы содержит форму с кнопкой отправки для удаления записи из БД.Я не могу понять, как выбрать текущую форму для отправки.Все они имеют разные идентификаторы, но как сценарий узнает, на какую форму нажимает пользователь?

<form name="myForm" id="1">
<input type="hidden" name="id" value="1">
<input type="hidden" name="table" value="sales">                          
<button name="command" type="submit" class="btn btn-danger" title="Delete">
<i class="fe fe-trash-2"></i></button>
</form>

<form name="myForm" id="2">
<input type="hidden" name="id" value="2">
<input type="hidden" name="table" value="sales">                          
<button name="command" type="submit" class="btn btn-danger" title="Delete">
<i class="fe fe-trash-2"></i></button>
</form>

$('input[type="submit"]').click(function(){
    var thisForm = this.form;

        $.ajax({
            url: "delete_do.php",
            method: "POST",
            data: $(thisForm).serialize(),

        });

});

Answer 1

Пожалуйста, проверьте фрагмент ниже. Обратите внимание, что, поскольку есть поля с именами id, form.id или this.id не будут давать значение id формы. Отсюда $('form').attr('id').

$(function() {
  $('form[name="myForm"]').on('submit', function(e) {
    e.preventDefault();
    //form ID ** cannot use form.id or this.id 
    //because you've named a field id .. name="id" **
    var formID = $(this).attr('id');
    console.log( formID );
    //form Data
    console.log( $(this).serialize() ); //or
    console.log( $(this).serializeArray() );
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form name="myForm" id="1">
<input type="hidden" name="id" value="1">
<input type="hidden" name="table" value="sales">                          
<button name="command" type="submit" class="btn btn-danger" title="Delete">
<i class="fe fe-trash-2"></i></button>
</form>

<form name="myForm" id="2">
<input type="hidden" name="id" value="2">
<input type="hidden" name="table" value="sales">                          
<button name="command" type="submit" class="btn btn-danger" title="Delete">
<i class="fe fe-trash-2"></i></button>
</form>