PHP/HTML表单OnSubmit禁用Submit按钮未达预期效果问题排查

问题 #

我正在学习PHP/HTML，编写了如下测试代码：

form.php

<form autocomplete="off" action="form_result.php" enctype="multipart/form-data" method="POST">
    Company Name:<br>
    <input type="text" name="company" required><br>
    <input type="file" name="files[]" multiple class="my-image-field"><br><br>
    <input id="test" name="upload" type="submit" value="Upload" />
</form>

form_result.php

<?php
if(isset($_POST['upload'])){
    echo "isset $_POST upload = true";
}else{
    echo "isset $_POST upload = false";
}
?>

原代码运行正常，form_result.php页面显示“isset $_POST upload = true”。为防止表单重复提交，我修改了form.php，添加onsubmit事件禁用Submit按钮：

<form autocomplete="off" action="form_result.php" enctype="multipart/form-data" method="POST" 
onsubmit="document.getElementById('test').disabled = true">
    Company Name:<br>
    <input type="text" name="company" required><br>
    <input type="file" name="files[]" multiple class="my-image-field"><br><br>
<input id="test" name="upload" type="submit" value="Upload" />
</form>

预期按钮变灰且form_result.php仍显示“isset $_POST upload = true”，但实际页面显示“isset $_POST upload = false”。请问我忽略了什么？

原因与解决方法 #

原因 #

浏览器会忽略已禁用的表单控件，不会将它们的名称和值提交到服务器。你在onsubmit事件中直接禁用了带有name="upload"的提交按钮，导致这个参数没有被包含在POST请求里，所以后端判断isset($_POST['upload'])时返回false。

解决方法 #

有两种可靠的处理方式：

方法1：延迟禁用按钮

用setTimeout让禁用操作延迟执行，确保表单提交请求已经发出后再禁用按钮，这样按钮的参数能正常被提交：

<form autocomplete="off" action="form_result.php" enctype="multipart/form-data" method="POST" 
onsubmit="setTimeout(() => document.getElementById('test').disabled = true, 100)">
    Company Name:<br>
    <input type="text" name="company" required><br>
    <input type="file" name="files[]" multiple class="my-image-field"><br><br>
    <input id="test" name="upload" type="submit" value="Upload" />
</form>

方法2：添加隐藏字段标记提交动作

在表单中新增一个隐藏的input字段来标识提交动作，即使提交按钮被禁用，这个隐藏字段的值依然会被提交到服务器：

<form autocomplete="off" action="form_result.php" enctype="multipart/form-data" method="POST" 
onsubmit="document.getElementById('test').disabled = true">
    Company Name:<br>
    <input type="text" name="company" required><br>
    <input type="file" name="files[]" multiple class="my-image-field"><br><br>
    <input type="hidden" name="upload" value="1">
    <input id="test" type="submit" value="Upload" />
</form>

后端的判断逻辑无需修改，依然可以通过isset($_POST['upload'])来验证表单是否提交。

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