Как логически организовать отправку формы-калькулятора?

Question

[Mesuti]

Привет!
Сверстал такую конструкцию.

Строка заказа состоит из такой верстки

<div class="row">
        <div class="wrapper">
            <div class="active">Выберите пол</div>
            <div>Мужской</div>
            <div>Женский</div>
        </div>
        <input type="text" placeholder="ФИО">
        <input type="text" placeholder="Кол-во">
        <p>Цена руб.</p>
    </div>

Комментарии:
- При нажатии Добавить появляется еще одна строка в верстке, а при нажатии на Х происходит удаление строки из верстки.
- Пол сделан из div, на jQuery это все выдвигается типа выпадающий список select.
- Цена рассчитывается Кол-во * стоимость и показывается в простом теге

Вопросы:
1) Как отправлять цену каждой строки заказа, если она в теге p ? Рядом ставить скрытый input и делать связь?
2) Как отправлять выбранный выпадающий div? Рядом ставить скрытый input и делать связь?
3) Как правильно организовать отправку такой динамической формы?
Есть идея = При нажатии Заказать, каждая строка объединяется в одну, Создается маленькая форма и все списком отправляется через нее. Насколько это правильно?

Объясните, пожалуйста, как обычно отправляют такие формы? Как все скомпоновать и в каком виде отправлять?

Comments

[Pavel Pikat]

Если вы уже используете скрипты на сайте, напр. jQuery, то и оправляйте данные ajax-ом, там даже с формами парится не надо. Сделайте скриптик который все данные соберет в объект и отправит на сервер.

Оффтопик - пол выпадающим списком это конечно зло злейшее. Не советую делать dropdown для списков с количеством элементов меньше 6. Лучше сделайте радио-кнопки с какими-нибудь красивыми стилями.

[Mesuti]

Pavel Pikat, спасибо! Очень дельный совет

Answer 1

[Immortal_pony]

1) Как отправлять цену каждой строки заказа, если она в теге p ? Рядом ставить скрытый input и делать связь?

Записывать цену в input type='hidden'

2) Как отправлять выбранный выпадающий div? Рядом ставить скрытый input и делать связь?

Да. Для справки: bootstrap-select или select2 это сделают за вас сами.

3) Как правильно организовать отправку такой динамической формы?

Форму завернуть в тэг form. При событии "submit" само событие выполнить не давать, а проводить сбор данных, валидацию и отправку на сервер через AJAX

Comments

[Mesuti]

Спасибо!

[Mesuti]

нормально ли будет при клике отправить, делать
1. Соединить input из калькулятора в текстовые строки
2. Подставить эти строки в заранее заготовленый отдельный маленький блок form.
3. Отправить.

Будет и такое решение костылем? =)

Чтобы десяток input не отправлять кучей

Answer 2

[irishmann]

Name[]