Элементы формы, не отправляемые после открытия в модальном режиме

Question

У меня есть HTML-форма, большинство ее элементов видны на странице моего приложения, но некоторые элементы скрыты с помощью модального режима.

Вот упрощенная форма:

<form method="POST">
    <div class="uk-margin">
        <label class="uk-form-label" for="form-stacked-text">Color</label>
        <div class="uk-form-controls">
            <input class="uk-input uk-form-small" name="color" type="text" value="{{ @data[color] }}">
        </div>
    </div>
    <div class="uk-margin">
        <label class="uk-form-label" for="form-stacked-select">Battery</label>
        <div class="uk-form-controls">
            <select name="battery_hasbattery" class="uk-select uk-form-small">
                <option value="0">This device does NOT have a battery</option>
                <check if="{{ @data[battery_hasbattery] == 1 }}">
                    <true><option selected value="1">This device DOES have a battery</option></true>
                    <false><option value="1">This device DOES have a battery</option></false>
                </check>
            </select>
        </div>
    </div>
    <div class="uk-margin">
        <label class="uk-form-label" for="form-stacked-text">More Options</label>
        <div class="uk-form-controls">
            <a href="#additional_options" uk-toggle class="uk-button uk-button-secondary uk-button-small uk-width-1-1">More Template Options</a>
        </div>
    </div>

    <div id="additional_options" uk-modal>
        <div class="uk-modal-dialog uk-modal-body">
            <h2 class="uk-modal-title">Additional Template Options</h2>
            <div class="uk-margin">
                <label class="uk-form-label" for="form-stacked-select">Needs Image</label>
                <div class="uk-form-controls">
                    <select name="need_image" class="uk-select uk-form-small">
                        <option value="0">This device does NOT need an image</option>
                        <check if="{{ @data[need_image] == 1 }}">
                            <true><option selected value="1">This device DOES need an image</option></true>
                            <false><option value="1">This device DOES need an image</option></false>
                        </check>
                    </select>
                </div>
            </div>

            <p class="uk-text-right">
                <button class="uk-button uk-button-default uk-modal-close" type="button">Close Window</button>
            </p>
        </div>
    </div>
</form>

Как видите, в форме есть элемент <a>, открывающий модальный #additional_options. Этот модал также содержится внутри тегов <form>.

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

Но, если я открою модальный, ни один из элементов внутри модального поста на странице обработки.

Когда я проверяю элемент на моем модале, когда он открывается, он автоматически перемещается в конец моего DOM, но мне все еще нужны эти значения для POST при отправке формы.

Очевидно, что эти элементы не приносят особой пользы, если они не выполняют POST после обращения, как я могу сделать эти поля все еще POST, даже если модальный был открыт?

Answer 1

Мне удалось решить эту проблему с помощью атрибута form в элементах формы, которые находятся в модальном режиме.

<select form="data_form" name="need_image" class="uk-select uk-form-small">
    ...
</select>

И присвоение идентификатора моей форме

<form method="POST" id="data_form">

Теперь, независимо от того, где находятся элементы формы на странице, они будут отправлены вместе с моей формой.

Answer 2

Мне кажется, вы знаете, почему это происходит - выдергивая поля из <form/> и помещая их в конец страницы, они больше не являются частью формы, когда вы отправляете ее.

Вы можете хранить поля в форме все время как скрытые поля и дублировать эти поля модальным.

С помощью javascript вы можете синхронизировать поля модального режима (которые не находятся в форме) со скрытыми полями (которые находятся в форме).

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