通过JS函数启用的表单按钮执行PHP后恢复禁用状态问题咨询

问题根因 #

你的判断完全正确，问题就是表单默认提交触发了页面重载：

• 点击第一个submit按钮时，onclick绑定的enableButton2()确实会先执行，临时把第二个按钮改为启用状态，但submit按钮的默认行为会立刻触发表单提交，整个页面会重新加载。
• 页面刷新后回到初始渲染状态，第二个按钮的代码默认带有disabled属性，之前JS修改的状态全部失效，自然就回到了禁用状态。

可选解决方案 #

方案1：AJAX提交表单（无刷新，更推荐） #

修改第一个按钮的类型为普通按钮，用AJAX提交表单数据，避免页面重载，所有前端状态都会保留：

<!-- 修改第一个按钮type为button，替换原有点击事件 -->
<input id="saveForm" class="button_text" type="button" name="submit" value="Submit" onclick="submitForm()"/>
   
<input id="saveFile" class="button_text" type="submit" name="download" value="Download" disabled/>

<script>
function submitForm() {
    // 替换成你自己的表单选择器
    const form = document.querySelector('form');
    const formData = new FormData(form);
    // 提交到原PHP处理地址
    fetch(form.action, {
        method: 'POST',
        body: formData
    }).then(response => {
        if (response.ok) {
            // 提交成功后启用第二个按钮
            document.getElementById("saveFile").disabled = false;
            // 可自行添加提交成功的提示逻辑
        }
    })
}
</script>

方案2：PHP动态控制按钮状态（无前端改动成本） #

如果不想调整提交逻辑，可以在PHP渲染页面时，根据提交状态动态控制第二个按钮的disabled属性：

<input id="saveFile" class="button_text" type="submit" name="download" value="Download" 
<?php 
// 已提交过第一个按钮则不输出disabled属性
if (!isset($_POST['submit'])) echo 'disabled';
?>
/>

这种方案页面仍然会刷新，但刷新后PHP会根据提交状态输出对应属性，第二个按钮不会回到禁用状态。

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