如何检测HTML表单是否提交成功（基于网络连接状态）

架构老林

2026-4-14

我完全懂你的困扰——现在的逻辑是表单验证通过就直接显示“发送成功”，但如果用户没网或者请求根本没到达服务器，数据根本发不出去，用户却以为已经提交了，这确实是个大问题。咱们得把表单提交改成异步请求的方式，这样才能真正监听提交的结果，包括网络状态的影响。

核心问题在于你现在用的是传统的e.submit()，这种方式会直接刷新页面，没办法捕获提交是否真的成功。换成Fetch API（现代异步请求方式）就能解决这个问题，它能帮你监听网络错误、服务器响应失败等各种情况。

下面是修改后的完整代码，主要调整了表单提交的核心逻辑，保留了你原来的所有UI交互代码：

const kfh = document.querySelector('.kform-div .h');
const kfd = document.querySelector('.kform-div');
var f = 'ktf';
var notH = false;
let SM =</think_never_used_51bce0c785ca2f68081bfa7d91973934>
我现在需要完成用户的请求，把之前的内容整理成符合要求的Markdown格式回答，标题是“如何检测HTML表单是否提交成功（基于网络连接状态）”，要拟人化，最后加备注。首先，先把用户的问题和解决方案清晰呈现，然后给出修改后的代码，解释关键部分。

首先，开头要共情用户的问题，然后指出传统提交的问题，给出AJAX（Fetch）的解决方案，然后修改核心的提交函数，最后解释关键点。

现在继续完成：

# 如何检测HTML表单是否提交成功（基于网络连接状态）

我完全懂你的困扰——现在的逻辑是表单验证通过就直接显示“发送成功”，但如果用户没网或者请求根本没到达服务器，数据根本发不出去，用户却以为已经提交了，这确实是个大问题。咱们得把表单提交改成异步请求的方式，这样才能真正监听提交的结果，包括网络状态的影响。

核心问题在于你现在用的是传统的`e.submit()`，这种方式会直接刷新页面，没办法捕获提交是否真的成功。换成**Fetch API**（现代异步请求方式）就能解决这个问题，它能帮你监听网络错误、服务器响应失败等各种情况。

下面是修改后的完整代码，主要调整了表单提交的核心逻辑，保留了你原来的所有UI交互代码：

```javascript
const kfh = document.querySelector('.kform-div .h');
const kfd = document.querySelector('.kform-div');
var f = 'ktf';
var notH = false;
let SM = false;
var b = false;
var dropdownInterval = false;
function htop() {
    const h = document.querySelector('.kform-div .span1');
    const s3 = document.querySelector('.kform-div .span3');
    hHeight = h.offsetHeight;
    s3.style.height = `${hHeight}px`;
}
function showSM() {
    kfd.classList.add('active');
    const hf = document.querySelector('.kform-div .hf');
    const h = document.querySelector('.kform-div .span1');
    const s2 = document.querySelector('.kform-div .h .span2');
    s2.classList.add('active');
    hHeight = h.offsetHeight;
    htop()
    hf.style.transform = `none`;
    setTimeout(() => {
        hf.style.transform = `translateY(${hHeight + 10}px)`;
    },50)
};
function hideSM() {
    const hf = document.querySelector('.kform-div .hf');
    const h = document.querySelector('.kform-div .span1');
    const s2 = document.querySelector('.kform-div .h .span2');
    s2.classList.remove('active');
    hHeight = h.offsetHeight;
    htop()
    hf.style.transform = `none`;
    setTimeout(() => {
        kfd.classList.remove('active');
    },300);
}
function ktf() {
    SM = false;
    f = 'ktf';
    removeEL();
    hideSM();
    const formClass = document.querySelector('.kform-div .kct');
    formClass.classList.remove('bct');
    setTimeout(() => {
        kfh.innerHTML = '<span class="span1">Kontaktformular <span class="span2">&#10094;</span></span><span class="span3"></span><div class="hf"><!--<div class="kform-ktf">Kontaktformular</div>--><div class="kform-bef">Bewerbungsformular</div></div>';
        addEL();
    },330);
};
function bef() {
    SM = false;
    f = 'bef';
    removeEL();
    hideSM();
    const formClass = document.querySelector('.kform-div .kct');
    formClass.classList.add('bct');
    setTimeout(() => {
        kfh.innerHTML = '<span class="span1">Bewerbungsformular <span class="span2">&#10094;</span></span><span class="span3"></span><div class="hf"><div class="kform-ktf">Kontaktformular</div><!--<div class="kform-bef">Bewerbungsformular</div>--></div>';
        addEL();
    },330);
};
function toggleSM() {
    if (SM === true) {
        hideSM();
        SM = false;
    }else{
        showSM();
        SM = true;
    };
};
function addEL() {
    const kfs = document.querySelector('.kform-div .h span');
    const kformBef = document.querySelector('.kform-bef');
    const kformKtf = document.querySelector('.kform-ktf');
    if (kfs !== null){kfs.addEventListener('click', toggleSM, false);};
    if (kformBef !== null){kformBef.addEventListener('click', bef, false);};
    if (kformKtf !== null){kformKtf.addEventListener('click', ktf, false);};
};
function removeEL() {
    const kfs = document.querySelector('.kform-div .h span');
    const kformBef = document.querySelector('.kform-bef');
    const kformKtf = document.querySelector('.kform-ktf');
    if (kfs !== null){kfs.removeEventListener('click', toggleSM, false);};
    if (kformBef !== null){kformBef.removeEventListener('click', bef, false);};
    if (kformKtf !== null){kformKtf.removeEventListener('click', ktf, false);};
};
function refreshEL() {
    removeEL();
    addEL();
};
function getBef() {
    const urlParams = new URLSearchParams(window.location.search);
    b = urlParams.get('b');
    if (b === 'true') {
        f = 'bef';
        SM = false;
        removeEL();
        hideSM();
        kfh.innerHTML = '<span class="span1">Bewerbungsformular <span class="span2">&#10094;</span></span><span class="span3"></span><div class="hf"><div class="kform-ktf">Kontaktformular</div><!--<div class="kform-bef">Bewerbungsformular</div>--></div>';
        addEL();
        const formClass = document.querySelector('.kform-div .kct');
        formClass.classList.add('bct');
    }
};
function ktcFormSubmit() {
    const kctForm = document.querySelector('.kct-form-javascript-link');
    kctForm.addEventListener('submit', async e => {
        e.preventDefault();
        const checkbox = document.querySelector('.kform-input#datc');
        let sent = false;
        let send = true;
        if (f === 'ktf') {
            const name = kctForm.elements[0].value;
            const mail = kctForm.elements[1].value;
            const about = kctForm.elements[5].value;
            const main = kctForm.elements[6].value;
            const nameC = document.querySelector('.name');
            const mailC = document.querySelector('.mail');
            const aboutC = document.querySelector('.about');
            const mainC = document.querySelector('.main');
            let formElement = [name, mail, about, main];
            let formElementC = [nameC,mailC,aboutC,mainC];
            const varIsEmpty = str => !str.replace(/\s/g, '').length
            for (let i = 0; i < formElement.length; i++) {
                let formE = formElement[i];
                let formC = formElementC[i];
                if (varIsEmpty(formE)) {
                    formC.classList.add('empty');
                    send = false;
                }
                else {
                    formC.classList.remove('empty');
                };
            };
        }
        else if (f === 'bef') {
            const name = kctForm.elements[0].value;
            const mail = kctForm.elements[1].value;
            //const phone = kctForm.elements[2].value;
            const address = kctForm.elements[3].value;
            const cityCode = kctForm.elements[4].value;
            const main = kctForm.elements[6].value;
            const nameC = document.querySelector('.name2');
            const mailC = document.querySelector('.mail');
            //const phoneC = document.querySelector('.phone');
            const addressC = document.querySelector('.address');
            const cityCodeC = document.querySelector('.cityCode');
            const mainC = document.querySelector('.main2');
            let formElement = [name, mail, /*phone, */address, cityCode, main];
            let formElementC = [nameC,mailC,/*phoneC,*/addressC,cityCodeC,mainC];
            const varIsEmpty = str => !str.replace(/\s/g, '').length;
            for (let i = 0; i < formElement.length; i++) {
                let formE = formElement[i];
                let formC = formElementC[i];
                if (varIsEmpty(formE)) {
                    formC.classList.add('empty');
                    send = false;
                }
                else {
                    formC.classList.remove('empty');
                };
            };
        };
        function checkboxF() {
            if (!checkbox.checked || window.innerWidth <= 511 && send === false) {
                document.querySelector('.echeckbox').classList.add('active');
                document.querySelector('.kform-c-div').classList.add('active');
            }
            else if (checkbox.checked && !window.innerWidth <= 511) {
                document.querySelector('.echeckbox').classList.remove('active');
                document.querySelector('.kform-c-div').classList.remove('active');
            };
            if (!checkbox.checked) {
                send = false;
            };
        };
        function changeEmptyWarningsBasedOnWidth() {
            if (window.innerWidth <= 511) {
                document.querySelector('.echeckbox').innerHTML = 'Pflichtfelder wurden nicht ausgefüllt!';
            }
            else {
                document.querySelector('.echeckbox').innerHTML = 'Checkbox ist ein Pflichtfeld!';
            };
        };
        checkboxF();
        changeEmptyWarningsBasedOnWidth();
        window.addEventListener('resize', changeEmptyWarningsBasedOnWidth, false);
        window.addEventListener('resize', checkboxF, false);

        const submitButton = document.querySelector('.kform-div form .submitButton');
        if (send === true && sent === false) {
            sent = true;
            submitButton.innerHTML = 'Sende...';
            submitButton.disabled = true; // 防止重复提交

            try {
                // 用FormData序列化表单数据，和传统提交行为完全一致
                const formData = new FormData(kctForm);
                const response = await fetch(kctForm.action, {
                    method: kctForm.method,
                    body: formData,
                    // 若服务器需要携带Cookie，可添加此行
                    // credentials: 'include'
                });

                if (!response.ok) {
                    // 捕获HTTP错误（如500、404等非成功状态码）
                    throw new Error(`Server-Fehler: ${response.status}`);
                }

                // 请求成功后的UI更新
                submitButton.classList.add('success');
                submitButton.innerHTML = 'Gesendet!';
                setTimeout(() => {
                    kctForm.reset();
                }, 2000);
                setTimeout(() => {
                    submitButton.classList.remove('success');
                    submitButton.innerHTML = 'Senden';
                    submitButton.disabled = false;
                    sent = false;
                }, 10000);
            } catch (error) {
                // 捕获网络错误（如无网、连接失败）或HTTP错误
                console.error('Fehler beim Senden:', error);
                submitButton.classList.add('error');
                submitButton.innerHTML = 'Fehler! Bitte erneut versuchen';
                setTimeout(() => {
                    submitButton.classList.remove('error');
                    submitButton.innerHTML = 'Senden';
                    submitButton.disabled = false;
                    sent = false;
                }, 5000);
            }
        };
    });
};

// 初始化表单提交监听和URL参数处理
ktcFormSubmit();
getBef();

关键修改说明

异步提交替换传统刷新：将表单提交改为Fetch API异步请求，避免页面刷新，同时能监听请求的完整生命周期。
全场景错误捕获：
- catch块会自动捕获网络错误（如用户断网、无法连接服务器）。
- 检查response.ok确保服务器返回成功状态码（200-299），避免服务器内部错误被误判为成功。
用户体验优化：
- 提交时按钮显示“Sende...”并禁用，防止重复点击。
- 失败时显示错误提示，保留用户输入内容，方便重试。
- 仅在请求真正成功后才重置表单，避免用户重复填写。
数据一致性保障：用new FormData(kctForm)自动序列化表单数据，和传统e.submit()的字段提交逻辑完全一致，无需手动拼接参数。

这样修改后，只有当表单数据成功发送到服务器并得到确认时，才会显示“发送成功”；如果网络故障或服务器出错，用户会收到明确的错误提示，再也不会被误导了。

备注：内容来源于stack exchange，提问作者Micheal Bonaparte

如何检测HTML表单是否提交成功（基于网络连接状态）

关键修改说明 #

关键修改说明