使用JavaScript展示HTML表单值时页面刷新无结果的问题求助

嘿，我明白你遇到的困扰了——表单一点提交按钮就刷新页面，写好的结果展示代码根本没机会运行，页面自然空空如也。另外你代码片段里的document.getEleme...看起来是拼写失误，应该是document.getElementById，这个小细节也得注意修正。

核心问题其实是HTML表单默认的提交行为会触发页面刷新，浏览器还没等你的JavaScript把结果渲染出来，就已经重新加载了整个页面。下面是具体的解决步骤和完整示例：

步骤1：阻止表单默认提交行为 #

给表单绑定submit事件监听器，调用event.preventDefault()来打断浏览器的默认刷新操作，让JavaScript有机会处理结果展示。

步骤2：完善结果展示逻辑 #

确保能正确获取所有表单字段的值，然后通过DOM操作替换页面内容（或者指定区域的内容）。

完整可运行示例代码 #

<!DOCTYPE html>
<html>
<head>
    <title>表单结果实时展示</title>
</head>
<body>
    <!-- 表单容器 -->
    <div id="formContainer">
        <form id="userInfoForm">
            <label for="fname">名字:</label>
            <input type="text" id="fname" name="fname" required><br><br>
            
            <label for="lname">姓氏:</label>
            <input type="text" id="lname" name="lname" required><br><br>
            
            <label for="gender">性别:</label>
            <select id="gender" name="gender" required>
                <option value="male">男</option>
                <option value="female">女</option>
            </select><br><br>
            
            <label for="birthday">生日:</label>
            <input type="date" id="birthday" name="birthday" required><br><br>
            
            <button type="submit">提交查看结果</button>
        </form>
    </div>

    <script>
        // 获取表单元素
        const form = document.getElementById('userInfoForm');

        // 监听表单提交事件
        form.addEventListener('submit', function(event) {
            // 阻止默认页面刷新行为
            event.preventDefault();
            // 执行结果展示函数
            displayResults();
        });

        function displayResults() {
            // 获取所有表单字段值
            const fname = document.getElementById('fname').value;
            const lname = document.getElementById('lname').value;
            const gender = document.getElementById('gender').value;
            const date = document.getElementById('birthday').value;

            // 二次验证必填字段（可选，配合表单的required属性双重保障）
            if (!fname || !lname || !gender || !date) {
                alert('请填写所有必填项哦！');
                return;
            }

            // 构建结果展示的HTML内容
            const resultContent = `
                <h2>你的提交结果</h2>
                <p><strong>全名:</strong> ${fname} ${lname}</p>
                <p><strong>性别:</strong> ${gender === 'male' ? '男' : '女'}</p>
                <p><strong>生日:</strong> ${date}</p>
                <button onclick="backToForm()">返回重新填写</button>
            `;

            // 替换页面原有内容（这里只替换表单容器，也可以用document.body替换整个页面）
            document.getElementById('formContainer').innerHTML = resultContent;
        }

        // 可选：返回表单页面的函数
        function backToForm() {
            location.reload();
        }
    </script>
</body>
</html>

关键细节提醒 #

• 用表单的submit事件代替按钮的click事件更合理，这样不管是点击按钮还是按回车键提交，都能触发处理逻辑。
• event.preventDefault()是解决页面刷新问题的核心，它让浏览器跳过默认的表单提交刷新流程。
• 如果不想覆盖整个页面内容，可以像示例一样给表单加一个容器，只替换容器内的HTML，保留页面其他元素。

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