Много одинаковых входных данных -> форма для одного запроса / много форм для многих запросов?

#javascript #html #forms #semantic-markup

#javascript #HTML #формы #семантическая разметка

Вопрос:

Я работаю над <form> тем, что имеет несколько групп <input> с одинаковыми атрибутами name='product-code' и name='amount' (из-за структуры). Для лучшего понимания пример: форма, в которой вы можете выбрать цвет и количество одного конкретного товара для добавления в корзину, но я хочу отправить код товара из каталога (потому что каждый цвет этого товара является другим товаром в каталоге) вместо отправки названий цветов. И я пытаюсь понять, как это должно быть сделано семантически правильно и сериализовано. Должна ли это быть одна форма и один post-запрос или много форм и много post-запросов? Каково ваше мнение?

 <form>
  <div>
    <input type="text" name="product-code" value="ST912600">
    <input type="number" name="amount" value="2">
  </div>
  <div>
    <input type="text" name="product-code" value="ST821806">
    <input type="number" name="amount" value="0">
  </div>
  <div>
    <input type="text" name="product-code" value="ST467165">
    <input type="number" name="amount" value="1">
  </div>
  <div>
    <input type="text" name="product-code" value="ST348499">
    <input type="number" name="amount" value="1">
  </div>
  <div>
    <input type="text" name="product-code" value="ST545081">
    <input type="number" name="amount" value="0">
  </div>
  <div>
    <input type="text" name="product-code" value="ST430287">
    <input type="number" name="amount" value="0">
  </div>
  <div>
    <input type="text" name="product-code" value="ST988144">
    <input type="number" name="amount" value="4">
  </div>
  <button type="submit">Send</button>
</form>

Я ожидаю, что сервер проанализирует запрос с несколькими данными в виде массива

1. Вам не следует использовать одно и то же имя для нескольких входных данных, попробуйте использовать суффикс, например число, и повторите его в вашем JS перед отправкой в API.

2. @DannyG можете ли вы добавить краткий пример вашего предложения?

Ответ №1:

Вы не можете использовать одно и то же имя в form теге. Визуализируйте свою форму как связанный массив.

 name => value
name2 => value2

Итак, если вы отправляете форму с тем же именем, вы создаете конфликт.

Но вы можете использовать простую форму, изменить name атрибут по своему усмотрению и установить класс с именем product-code, например. preventDefault с помощью JS на вашей кнопке отправки и используйте getElementsByClassName и получите его значение и т.д. Сохраните в массиве и создайте цикл для отправки по одному с formElt.submit() функцией.

Или создайте много форм в HTML.

1. Да, я пробовал это ( product-code2 , amount2 , product-code3 , amount3 , ,,). Но я думаю, что это плохая практика отправлять этот тип данных, закодированных в URL. А что, если у меня есть входные данные для 999 продуктов? product-code999 ? А как тогда насчет длины кода синтаксического анализатора на стороне сервера?

2. Вам не нужно использовать инкрементный список, такой как product1, 2, 3 и т.д.

3. О, я неправильно понял после прочтения этого предложения. Я перечитал, и теперь я вижу смысл. Тем не менее, я хочу больше мнений или точек зрения по этому вопросу

4. О, извините! Этот комментарий не является полной версией! Я нажимаю enter, чтобы ускорить lol, и я забываю редактировать через 5 минут…

5. Я хочу сказать, что: вы можете использовать цикл для всех дочерних ваших форм и отправлять одну за другой с помощью AJAX. Или вы можете использовать несколько форм, но я думаю, что первое решение — лучшая практика.