WordPress插件表单：点击按钮无需提交复制分区的实现方法咨询

核心问题在于PHP是服务器端渲染，前端JS无法直接复用后端生成的动态内容。我们可以提前把PHP生成的下拉选项预渲染好，再通过JS克隆模板来实现动态添加表单分区，同时保留and/or逻辑标记，且无需每次点击都提交表单。

实现步骤与代码示例 #

1. 优化PHP逻辑，预生成下拉选项HTML

先通过PHP获取所有用户元数据并生成对应的option字符串，同时将初始表单行做成可复用的模板：

<form method="post" action="">
    <!-- 预存表单行模板，包含PHP生成的用户元数据选项 -->
    <script type="text/template" id="form-row-template">
        <section class="form-row">
            <select class="select" name="user_meta-list[]">
                <?php
                // 优化用户获取方式，避免ID不连续问题
                $users = get_users();
                $user_data_select = [];
                foreach ($users as $user) {
                    $user_meta = get_user_meta($user->ID);
                    foreach (array_keys($user_meta) as $meta_key) {
                        if (!in_array($meta_key, $user_data_select)) {
                            $user_data_select[] = $meta_key;
                        }
                    }
                }
                // 生成安全转义的option HTML
                foreach ($user_data_select as $value) {
                    echo '<option value="' . esc_attr($value) . '">' . esc_html($value) . '</option>';
                }
                ?>
            </select>
            <select class="select" name="comparison[]">
                <option value="is gelijk aan">is gelijk aan</option>
                <option value="is niet gelijk aan">is niet gelijk aan</option>
            </select>
            <input class="input-field" type="text" name="specification[]" placeholder="Specificatie">
            <button type="button" class="button remove-row">Verwijder</button>
        </section>
    </script>

    <!-- 初始表单行 -->
    <section class="form-row">
        <select class="select" name="user_meta-list[]">
            <?php
            // 复用上面的用户元数据option生成逻辑
            foreach ($user_data_select as $value) {
                echo '<option value="' . esc_attr($value) . '">' . esc_html($value) . '</option>';
            }
            ?>
        </select>
        <select class="select" name="comparison[]">
            <option value="is gelijk aan">is gelijk aan</option>
            <option value="is niet gelijk aan">is niet gelijk aan</option>
        </select>
        <input class="input-field" type="text" name="specification[]" placeholder="Specificatie">
    </section>

    <!-- 控制按钮区 -->
    <div class="form-controls">
        <input id="and-button" class="button" type="button" value="and">
        <input id="or-button" class="button" type="button" value="or">
        <input type="submit" class="button" value="Verzend">
    </div>
</form>

2. 用JS实现动态添加/移除表单行

通过克隆预定义的模板，给新添加的行标记and/or逻辑类型，同时支持移除行功能：

document.addEventListener('DOMContentLoaded', function() {
    const form = document.querySelector('form');
    const template = document.getElementById('form-row-template').innerHTML;
    const andBtn = document.getElementById('and-button');
    const orBtn = document.getElementById('or-button');

    // 通用添加表单行函数
    function addRow(logicType) {
        const newRow = document.createElement('section');
        newRow.innerHTML = template;
        // 标记该行的逻辑关系，供后端处理使用
        newRow.dataset.logic = logicType;
        // 将新行插入到控制按钮前
        form.insertBefore(newRow, document.querySelector('.form-controls'));

        // 绑定移除按钮事件
        newRow.querySelector('.remove-row').addEventListener('click', () => newRow.remove());
    }

    // And按钮点击事件
    andBtn.addEventListener('click', () => addRow('and'));
    // Or按钮点击事件
    orBtn.addEventListener('click', () => addRow('or'));
});

关键细节说明 #

• 表单name属性：所有输入项的name使用数组格式（如user_meta-list[]），后端提交时可直接通过$_POST['user_meta-list']获取所有行的对应值。
• 逻辑标记：通过data-logic属性记录每一行的and/or关系，后端处理时可遍历表单行读取该属性，构建条件组合逻辑。
• 安全处理：使用esc_attr()和esc_html()转义输出内容，避免XSS安全风险。
• 用户元数据获取优化：改用get_users()遍历所有用户，避免原代码中用户ID不连续导致的遗漏问题。

后端接收数据示例 #

提交表单后，可通过以下方式获取所有表单行的数据：

if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    $metaKeys = $_POST['user_meta-list'] ?? [];
    $comparisons = $_POST['comparison'] ?? [];
    $specifications = $_POST['specification'] ?? [];
    $logics = [];

    // 读取所有行的逻辑标记
    foreach (document.querySelectorAll('.form-row') as $row) {
        $logics[] = $row->dataset->logic ?? '';
    }

    // 此处可根据数据构建查询条件或业务逻辑
}

内容的提问来源于stack exchange，提问作者lennart99v