html - 在模式中打开后表单元素未提交

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/> 中拉出来并将它们放在页面末尾，当您提交表单时它们就不再是表单的一部分。

您可以始终将表单中的字段保留为隐藏字段，并使用模式复制这些字段。

使用 JavaScript，您可以将模态字段(不在表单中)与隐藏字段(在表单中)同步。

如果你没有使用框架，你可以使用纯js来完成，但是很多js框架提供了表单值建模抽象。