JavaScript Fetch() 无法区分表单更新与删除功能如何解决？

问题根因 #

传统表单同步提交时，触发提交的按钮的name和value会自动被加入请求参数；但用fetch手动构造FormData时，不会自动包含触发提交的按钮的参数，所以PHP侧无法通过isset($_POST['delete'])/isset($_POST['upload'])区分操作类型。

解决步骤 #

1. 修改JavaScript代码，主动添加触发按钮的参数 #

利用提交事件的submitter属性获取触发提交的按钮，把它的键值对手动加入FormData：

var forms = document.querySelectorAll('form');

forms.forEach(item => {
    item.addEventListener("submit", function (evt) {
        evt.preventDefault();
        const formData = new FormData(this);
        // 新增：获取触发提交的按钮，添加到FormData
        const submitBtn = evt.submitter;
        if (submitBtn && submitBtn.name) {
            formData.append(submitBtn.name, submitBtn.value);
        }

        fetch("upload-details.php", {
            method: 'post',
            body: formData
        }).then(function(response){
            return response.text();
        }).then(function() {
            // 优化：请求成功后再移除表单，避免请求失败时表单丢失
            item.remove();
        }).catch(function (error){
            console.error(error);
        })
    })
})

2. 修正PHP判断逻辑与按钮参数匹配 #

注意你当前代码的两处不匹配：

• HTML中删除按钮的name="delete"，但PHP删除逻辑判断的是isset($_POST['upload-details-delete'])
• 更新提交按钮的name="upload"，你原计划的判断条件是isset($_POST['update'])

统一调整PHP逻辑即可：

// 更新逻辑：对应提交按钮name="upload"
if(isset($_POST['upload'])) {
    // 原有更新代码不变
    $image_title = $_POST['image-title'];
    $image_tags = $_POST['image-tags'];
    $image_id = $_POST['image-id'];
    // ... 剩余更新逻辑
}

// 删除逻辑：对应删除按钮name="delete"
if(isset($_POST['delete'])) {
    // 原有删除代码不变
    $image_id = $_POST['image-id'];
    // ... 剩余删除逻辑
}

可选优化：给删除按钮加type属性 #

避免部分浏览器把无type的<button>默认识别为提交按钮之外的类型，明确设置为submit：

<button type="submit" name="delete">Delete</button>

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