Многократное использование формы перед ее отправкой

Я новичок в JavaScript и пытаюсь найти канонический способ сделать следующее.

У меня есть форма с некоторыми флажками и селектором. Допустим, флажки - это стили музыки, а селектор - для имен людей.

Я бы хотел, чтобы пользователь мог выбрать стили музыки для нескольких человек, а затем отправить форму со всеми данными.

Например, пользователь может сначала выбрать "Классика", "Джаз", "Рок" и "Поп" и выбрать "Джо", затем выбрать "Джаз", "Поп", "Страна" и "Электроника" и выбрать "Джейн". Таким образом, должны быть две разные кнопки для "отправить лицо" и "отправить форму".

Я бы хотел:

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

У меня такое ощущение, что использование jquery и JSON идеально подходит для этого, но я не уверен, какую терминологию поиска использовать, чтобы выяснить, как это сделать.

Если это имеет значение, форма будет обработана представлением Django в Python.

Источник

2 ответа

Решение

Вы можете добиться этого, используя AJAX для отправки лица. Ваш рабочий процесс должен идти так:

  1. Пользователь выбирает Джо и соответствующие стили музыки.
  2. Пользователь нажимает кнопку "Отправить человека". В этом событии закодируйте имя человека (Джо) и стили музыки, выбранные в объект JSON, и передайте его в свой серверный сценарий через AJAX (jquery ajax()) запрос.
  3. Сценарий на стороне сервера с выполнением любой необходимой обработки. По окончании будет вызван обработчик успеха ваших вызовов AJAX. На этом этапе вы, вероятно, можете удалить "Джо", чтобы пользователь знал, что отправка прошла успешно, и не отправляет Джо снова.
  4. Вымойте, промойте, повторите для всех других людей в вашей форме.

PS - когда вы передаете информацию в серверную часть через AJAX, вам не нужно кодировать ее как JSON. Вы можете отправить его как стандартный запрос POST. Чтобы кодировать объекты Javascript в JSON, используйте JSON.stringify()

Выше приведен один из способов сделать это, однако он не будет работать так, как вы задали в своем вопросе (продолжайте собирать данные - отправляйте сразу). Чтобы работать так, каждый раз, когда пользователь нажимает "Отправить человека", добавляйте данные в объект Javascript, но не отправляйте его. Представленные данные будут накапливаться в объекте JS.

Наконец, когда пользователь нажимает кнопку "Отправить форму", структурируйте данные и отправьте их.

Источник

Как насчет использования django form-wizard... Может быть, этого достаточно? https://docs.djangoproject.com/en/dev/ref/contrib/formtools/form-wizard/

Источник
Другие вопросы по тегам