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框架提供了表单值建模抽象。

Answer 2

我能够通过使用模式中表单元素上的form属性来解决此问题。

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

并为我的表单分配一个ID

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

现在，无论表单元素在页面上的何处，它们都将与我的表单一起提交。

以模式打开后表单元素未提交

2 个答案: