Должен ли я использовать одну форму на странице или создать форму для каждого элемента?

Question

Я хочу отобразить список элементов. Каждый элемент будет иметь значок редактирования и значок удаления рядом с ним.

По понятным причинам я хочу запустить действие удаления с HTTP POST.
С jQuery я бы связывал ссылки для запуска form.submit.

Однако Я не уверен, стоит ли создавать форму рядом с каждым элементом или использовать только одну форму .
Ниже приведены плюсы и минусы двух подходов, как я их вижу.

Форма на единицу:

• легко генерировать;
• не нужно возиться в JS, чтобы установить действие и ввести значение.

Одиночная форма :

• имеет смысл в семантическом смысле;
• требует, чтобы клиент JS установил скрытый ввод;
• требует, чтобы клиент JS установил действие формы (например, id + '/delete/).

Что тут добавить? Какой шаблон предпочтителен в современных приложениях HTML?

Answer 1

Я использовал флажки в прошлом. Это лучше для удобства использования, и каждый отмеченный флажок может передавать свой собственный идентификатор в сценарий обработки формы.

Answer 2

Главный недостаток, который я вижу, имея единую форму, включающую все элементы списка, состоит в том, что вы можете получить огромный POST, если список длинный.В качестве преимущества можно отметить несколько элементов для удаления (например, флажки) и выполнить один запрос на удаление.

Я бы выбрал либо

1. По одной форме для каждогоэлемент списка.Это сделало бы невозможным удаление нескольких элементов, но сохранило бы размеры POST минимальными.
2. Использование одной формы, но без учета всех элементов списка.Например, имея форму «только удаление» с единственным скрытым элементом в ней, в которую вы поместите все идентификаторы, помеченные для удаления с помощью манипуляции JS.

В качестве примечания можно также пропустить формыи выполнять необходимые взаимодействия через AJAX.Это значительно улучшит пользовательский опыт.Примите во внимание, что формы все еще будут необходимы для обеспечения резервных механизмов в случае необходимости.

Answer 3

В итоге я решил пойти с AJAX через jQuery.ajax .

Причина в том, что семантически у меня нет даже форм - у меня есть кнопки.
Следовательно, jQuery - более простое решение, так как позволяет хранить логику в одном месте (в отличие от разбрасывания ее по HTML).и JS).

Я назначил row класс для каждой семантической строки и поместил соответствующие идентификаторы базы данных в HTML5 data атрибут , называемый data-row-id для каждой строки.

<div class="row" data-item-id="{{ product.id }}">
    <!-- ... --->

    <a href="#" class="delete-btn"><img src="/img/delete.png" alt="Delete"></a>
</div>

Тогда у меня есть кое-что в строках

$('.delete-btn').click(function() {
    var row = $(this).closest('.row');
    var id = row.data('item-id');

    $.ajax({
        url: id + '/delete/',
        type: 'POST'
    });

    row.fadeOut().slideUp();
    return false;
}

в моем $() обработчике загрузки.

Это решение прекрасно масштабируется по всей базе кода, потому что вам нужно только установить row class и data-item-id attribute и кнопки будут «просто работать».