启用onsubmit禁用表单字段后，表单提交无数据问题求助

HTML表单默认不会提交处于disabled状态的元素，所以你在onsubmit回调里直接禁用所有字段，会导致这些字段的数据无法被发送到服务器。

方案1：用readonly替代disabled（推荐输入类元素） #

readonly状态的元素会保留提交数据，同时用户无法修改。注意readonly仅对输入类元素（如text、password等）生效，提交按钮可以单独禁用：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form id="myForm" method="post" onsubmit="handleSubmit(event)">
    <input type="text" name="username" required>
    <input type="submit" value="Submit">
</form>

<script>
    function handleSubmit(event) {
        const formElm = document.getElementById("myForm");
        const formElements = formElm.elements;
        for (let i = 0; i < formElements.length; i++) {
            const elm = formElements[i];
            // 输入类元素设为readonly，按钮直接禁用
            if (elm.tagName === 'INPUT' && !['submit', 'button'].includes(elm.type)) {
                elm.readOnly = true;
            } else {
                elm.disabled = true;
            }
        }
        return true;
    }
</script>

</body>
</html>

方案2：延迟禁用元素（确保表单先提交数据） #

用setTimeout把禁用操作延迟到表单提交请求发起之后执行，这样提交时元素仍处于可用状态，数据能正常发送：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form id="myForm" method="post" onsubmit="handleSubmit(event)">
    <input type="text" name="username" required>
    <input type="submit" value="Submit">
</form>

<script>
    function handleSubmit(event) {
        const formElm = document.getElementById("myForm");
        const formElements = formElm.elements;
        // 延迟10ms执行禁用，确保表单提交请求已发出
        setTimeout(() => {
            for (let i = 0; i < formElements.length; i++) {
                formElements[i].disabled = true;
            }
        }, 10);
        return true;
    }
</script>

</body>
</html>

方案3：视觉模拟禁用+阻止交互 #

通过CSS让元素看起来是禁用状态，同时用JS阻止用户修改输入，元素本身保持可用以提交数据：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .form-disabled {
            background-color: #eee;
            color: #999;
            cursor: not-allowed;
            border-color: #ccc;
        }
    </style>
</head>
<body>
<form id="myForm" method="post" onsubmit="handleSubmit(event)">
    <input type="text" name="username" required>
    <input type="submit" value="Submit">
</form>

<script>
    function handleSubmit(event) {
        const formElm = document.getElementById("myForm");
        const formElements = formElm.elements;
        for (let i = 0; i < formElements.length; i++) {
            const elm = formElements[i];
            elm.classList.add('form-disabled');
            // 针对输入框阻止修改
            if (elm.tagName === 'INPUT' && elm.type !== 'submit') {
                elm.addEventListener('input', e => e.preventDefault());
                elm.addEventListener('keydown', e => e.preventDefault());
                elm.addEventListener('paste', e => e.preventDefault());
            } else {
                elm.disabled = true; // 按钮直接禁用
            }
        }
        return true;
    }
</script>

</body>
</html>

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