多按钮表单中如何阻止单个按钮触发Unpoly模态框

问题背景 #

我渲染了一组带复选框的项目，搭配多个操作按钮（删除、编辑等），点击按钮会对选中项执行对应操作。需求是除删除按钮外，其余按钮点击都要打开模态框，但使用Unpoly时遇到了障碍：

• 尝试在删除按钮上添加up-disable或up-target="none"，但Unpoly未识别（或表单属性优先级更高）
• 移除表单上的up-*属性，转而添加到需要开模态框的按钮上，结果所有模态框都无法打开

现有代码示例 #

<button
    type="submit"
    form="selection_form"
    formaction="/delete"
    up-disable
>
</button>
<button
    type="submit"
    form="selection_form"
    formaction="/edit"
>
</button>
... 更多按钮 ...
<form
    up-submit
    up-layer="new"
    up-size="large"
    up-target="#multiple-selection-form-action"
    method="post"
    id="selection_form"
>
... 带复选框的项目列表 ...
</form>

可行解决方案 #

方案1：给目标按钮添加up-follow="false" #

Unpoly的up-follow="false"属性可以直接禁用当前元素的Unpoly增强行为，让按钮触发原生表单提交，完全绕过模态框逻辑。修改删除按钮代码：

<button
    type="submit"
    form="selection_form"
    formaction="/delete"
    up-follow="false"
>
    删除
</button>

这个属性会覆盖表单层面的up-submit设置，确保该按钮走原生提交流程。

方案2：通过事件拦截控制行为 #

如果方案1不生效，可以监听Unpoly的up:submit事件，在回调中判断提交来源，阻止特定按钮的模态框行为：

document.addEventListener('up:submit', function(event) {
    // 匹配删除按钮的formaction
    if (event.submitter?.formaction === '/delete') {
        event.preventDefault(); // 阻止Unpoly的模态框逻辑
        event.submitter.form.submit(); // 手动触发原生表单提交
    }
});

此方法通过精准拦截特定提交行为，实现需求。

方案3：拆分表单（备选方案） #

如果上述方法存在兼容性问题，可以将不需要模态框的操作单独拆分出一个表单，通过JS同步主表单的选中状态：

<!-- 单独的删除表单 -->
<form method="post" action="/delete" id="delete_form">
    <input type="hidden" name="selected_ids" id="selected_ids">
    <button type="submit">删除</button>
</form>

<!-- 原主表单，保留Unpoly属性用于模态框操作 -->
<form
    up-submit
    up-layer="new"
    up-size="large"
    up-target="#multiple-selection-form-action"
    method="post"
    id="selection_form"
>
... 带复选框的项目列表 ...
</form>

<script>
// 同步选中项到删除表单的隐藏域
document.querySelectorAll('#selection_form input[type="checkbox"]').forEach(checkbox => {
    checkbox.addEventListener('change', function() {
        const selectedIds = Array.from(document.querySelectorAll('#selection_form input[type="checkbox"]:checked'))
            .map(cb => cb.value)
            .join(',');
        document.getElementById('selected_ids').value = selectedIds;
    });
});
</script>

这种方式逻辑更清晰，避免了属性冲突问题。

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