提交表单时alert弹窗不显示且数据消失的原因排查

你的代码里存在几个关键问题，导致alert不触发、提交后数据消失：

• 重复定义函数覆盖逻辑：你写了两个validateForm函数，JavaScript中后续定义的同名函数会完全覆盖前面的，所以第一个验证 firstName 的逻辑根本不会执行。
• 未加引号的字符串引用错误：第二个validateForm里的document.forms[myForm][lname].value写法错误，myForm和lname是表单和输入框的名称字符串，必须加引号（写成document.forms["myForm"]["lname"].value），否则JS会把它们当作未定义的变量，直接抛出错误，函数执行中断，表单触发默认提交动作（页面刷新），自然弹不出alert，输入的数据也会随页面刷新消失。
• 输入框name属性错误：Last name对应的input标签，name属性被错误设置为fname，和First name的name重名了，应该改成lname，否则无法正确获取 lastName 的输入值。
• 验证通过未阻止表单默认提交：就算验证逻辑正常，当前代码在验证通过后没有返回false，表单还是会执行默认的提交刷新动作，导致输入数据消失。

修正后的完整代码 #

<!DOCTYPE html>
<html>
    <head>
        <script>
            function validateForm() {
                // 验证First name
                let firstName = document.forms["myForm"]["fname"].value;
                if (firstName.trim() === "") {
                    alert("Name must be filled out");
                    return false;
                }
                // 验证Last name
                let lastName = document.forms["myForm"]["lname"].value;
                if (lastName.trim() === "") {
                    alert("Last name should be filled out");
                    return false;
                }
                alert("Thank you for your response");
                // 阻止表单默认提交，避免页面刷新
                return false;
            }
        </script>
    </head>

    <body>
        <h1>Student Information Form</h1>

        <br>
        <br>

        <form name="myForm" onsubmit="return validateForm()" method="post">
            <label for="fname">First name:</label><br>
            <input type="text" id="fname" name="fname"><br>
            <label for="lname">Last name:</label><br>
            <!-- 修正name属性为lname -->
            <input type="text" id="lname" name="lname"><br> <br>
            <label for="email">Email:</label>
            <input type="text" id="email" name="email">

            <input type="reset">
            <input type="submit" value="Submit">
        </form>
    </body>
</html>

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