提交按钮点击后如何显示表格表单的输入内容？

Hey there! I totally get how frustrating it can be to spend hours searching for a solution that feels like it should be straightforward. Let's get your form working so it shows the submitted content right on the page without reloading.

The main issue here is that by default, HTML forms will refresh the page (or navigate to a new URL) when submitted. We need to use JavaScript to intercept that submission, grab the input values, and display them dynamically. Here's a complete, working version of your code with explanations:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>Salsa</title>
    <style>
        /* 简单美化一下表格和结果区域 */
        table {
            border-collapse: collapse;
            margin: 20px 0;
            width: 50%;
        }
        table td, table th {
            border: 1px solid #ddd;
            padding: 10px;
            text-align: left;
        }
        #submissionResult {
            margin-top: 30px;
            padding: 15px;
            border: 1px solid #2c3e50;
            border-radius: 6px;
            width: 50%;
            display: none; /* 默认隐藏结果区域 */
        }
        button[type="submit"] {
            padding: 8px 16px;
            background-color: #3498db;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <!-- 给表单添加ID，方便JavaScript获取 -->
    <form id="salsaForm">
        <table>
            <tr>
                <th>姓名</th>
                <td><input type="text" name="name" id="name" required></td>
            </tr>
            <tr>
                <th>邮箱地址</th>
                <td><input type="email" name="email" id="email" required></td>
            </tr>
            <tr>
                <th>Salsa学习时长</th>
                <td><input type="number" name="experience" id="experience" min="0" placeholder="月数"></td>
            </tr>
            <tr>
                <th>最喜欢的Salsa类型</th>
                <td>
                    <input type="radio" name="salsaType" id="cuban" value="古巴Salsa" checked>
                    <label for="cuban">古巴Salsa</label>
                    <input type="radio" name="salsaType" id="la" value="洛杉矶Salsa">
                    <label for="la">洛杉矶Salsa</label>
                </td>
            </tr>
            <tr>
                <td colspan="2" align="center">
                    <button type="submit">提交我的信息</button>
                </td>
            </tr>
        </table>
    </form>

    <!-- 用来展示提交结果的容器 -->
    <div id="submissionResult">
        <h3>你提交的信息：</h3>
        <div id="resultContent"></div>
    </div>

    <script>
        // 获取页面元素
        const form = document.getElementById('salsaForm');
        const resultContainer = document.getElementById('submissionResult');
        const resultContent = document.getElementById('resultContent');

        // 监听表单提交事件
        form.addEventListener('submit', function(event) {
            // 阻止表单默认的提交行为（关键！避免页面刷新）
            event.preventDefault();

            // 逐个获取表单输入的值
            const name = document.getElementById('name').value;
            const email = document.getElementById('email').value;
            const experience = document.getElementById('experience').value || '未填写';
            const salsaType = document.querySelector('input[name="salsaType"]:checked').value;

            // 构建要显示的内容
            let resultHTML = `
                <p><strong>姓名：</strong>${name}</p>
                <p><strong>邮箱：</strong>${email}</p>
                <p><strong>学习时长：</strong>${experience}个月</p>
                <p><strong>喜欢的Salsa类型：</strong>${salsaType}</p>
            `;

            // 将内容插入结果容器，并显示容器
            resultContent.innerHTML = resultHTML;
            resultContainer.style.display = 'block';
        });
    </script>
</body>
</html>

关键要点解释： #

• 阻止默认提交：event.preventDefault() 是核心步骤，它让浏览器放弃默认的页面刷新行为，这样我们就能在当前页面处理数据。
• 获取输入值：通过元素的id获取文本框、数字框的值；对于单选框，用querySelector选中被勾选的选项。
• 动态显示结果：我们提前创建了一个隐藏的结果容器，提交后把拼接好的HTML内容插入进去，再把容器显示出来。

If you have more fields in your original form, just repeat the pattern: add an id to the field, grab its value in JavaScript, and add it to the resultHTML string.

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