Как можно реализовать такой функционал с формой?

Question

[Можно просто Евгений]

К примеру , у меня есть одна общая (резервационная) форма и в форме инпуты , табы -> в таб-контенте -> селекты . Mне надо сделать так чтоб при submit данные брались только с активного таба , но при этом учесть что если переключаться между ними, селекты всегда были заполнены как до переключения ...

Господа , какие-то идеи ?

Answer 1

[wscms]

В каждом табе своя форма и сабмитим только текущую?

Comments

[Можно просто Евгений]

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

Answer 2

[panterr92]

активный таб определяешь отдельным стилем, например .active
и при клике на submit собираешь контент по стилю active и то что ниже.

Answer 3

[Евгений Вольф]

Вариант А:
1. В каждый таб воткнуть свою (отдельную) форму, что бы передавалась именно она, и как следствие, свой отдельный сабмит
2. Передавать данные AJAX'ом, что бы страница не обновлялась
3. После отправки, - сбрасывать отправленную форму (по необходимости)

Вариант Б:
1. Создать одну большую общую форму
2. Добавить в нее скрытое поле, в котором будет сохранятся значение активного таба
3. Каким-то образом связать поля с активным табом, например с помощью префикса имени поля или имен полей в формате tab1[field1]
4. В скрипте принимающем и/или генерирующим форму, выставлять соотв. значения, полученные из формы ранее

Comments

[Можно просто Евгений]

у меня щас как раз одна большая (резервационная) форма , хоть и сделать вариант Б, то значения внутри табов все ровно отправляется , хоть задай селектам disabled ....

[Можно просто Евгений]

а вариант "А" не подойдет , "формы в форме" ....

[Евгений Вольф]

а вариант "А" не подойдет , "формы в форме" ....

Зачем Вам формы в форме? Каждая форма может быть расположена отдельно, внутри таба, если нет каких-то серьёзных ошибок в вёрстке.

у меня щас как раз одна большая (резервационная) форма , хоть и сделать вариант Б, то значения внутри табов все ровно отправляется , хоть задай селектам disabled ....

Их можно фильтровать на основании значения скрытого поля, про которое я писал выше :)

[Можно просто Евгений]

а вариант "А" не подойдет , "формы в форме" ....

Зачем Вам формы в форме? Каждая форма может быть расположена отдельно, внутри таба, если нет каких-то серьёзных ошибок в вёрстке.

я имел ввиду как получится, если делать вариант А :)

а про вариант Б то:

[Можно просто Евгений]

<form>

    <input type="text'>
    <input type="text'>
    <input type="text'>

    <tab-content>
        <select></select>
        <select></select>
        <select></select>
   </tab-content>

    <tab-content>
        <select></select>
        <select></select>
        <select></select>
    </tab-content>

    <button type="submit"></button>
</form>

[Евгений Вольф]

я имел ввиду как получится, если делать вариант А :)

Совершенно не обязательно должно получиться именно так в варианте А, как пример (на основе вашего кода):

<tab-content>
    <form>
        <select></select>
        <submit />
    </form>
</tab-content>

<tab-content>
    <form>
        <select></select>
        <submit />
    </form>
</tab-content>

[Можно просто Евгений]

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

[Евгений Вольф]

Можно просто Евгений, в этом случае, думаю "вариант Б" Ваш выбор :)