如何让两个事件监听器生效？Vanilla JS表单交互开发需求

Got it, let's tackle these three requirements step by step with plain Vanilla JS—no frameworks needed. Here's a complete implementation that hits all your points, plus clear explanations for each part:

Full Working Code #

<!doctype html>
<html>
<head>
    <title>Form Handling Demo</title>
    <style>
        /* 辅助样式让禁用区域更直观 */
        .disabled-section {
            background-color: #eee;
            opacity: 0.6;
            padding: 10px;
            border-radius: 4px;
        }
    </style>
</head>
<body>
    <form id="myForm">
        <label for="dropdown">选择选项:</label>
        <select id="dropdown">
            <option value="1">选项1</option>
            <option value="2">选项2</option>
            <option value="3">选项3</option>
            <option value="4">选项4</option>
            <option value="5">选项5</option>
        </select>

        <div id="radioSection" class="radio-section">
            <p>单选区域:</p>
            <input type="radio" name="radioOption" value="optA" id="optA">
            <label for="optA">选项A</label>
            <input type="radio" name="radioOption" value="optB" id="optB">
            <label for="optB">选项B</label>
        </div>

        <div>
            <label for="name">姓名:</label>
            <input type="text" id="name" name="name" required>
        </div>
        <div>
            <label for="email">邮箱:</label>
            <input type="email" id="email" name="email" required>
        </div>

        <button type="submit">提交表单</button>
    </form>

    <div id="formOutput" style="margin-top: 30px;"></div>

    <script>
        // 提前获取所有需要操作的DOM元素
        const dropdown = document.getElementById('dropdown');
        const form = document.getElementById('myForm');
        const radioSection = document.getElementById('radioSection');
        const radioButtons = radioSection.querySelectorAll('input[type="radio"]');
        const outputArea = document.getElementById('formOutput');

        // 1. 下拉选项Change事件监听器
        dropdown.addEventListener('change', function() {
            const selectedValue = this.value;
            console.log(`选中了选项: ${selectedValue}`); // 可选调试用

            // 联动处理单选区域状态（对应需求3）
            toggleRadioSection(selectedValue !== '5');
        });

        // 2. 阻止表单提交并展示内容到页面底部
        form.addEventListener('submit', function(e) {
            e.preventDefault(); // 禁止浏览器默认的表单提交行为

            // 收集并格式化表单数据
            const formData = new FormData(this);
            let outputHtml = '<h3>提交的表单内容:</h3><ul>';
            for (const [key, value] of formData.entries()) {
                outputHtml += `<li><strong>${key}:</strong> ${value}</li>`;
            }
            outputHtml += '</ul>';

            // 插入到页面底部的输出区域
            outputArea.innerHTML = outputHtml;
        });

        // 页面加载时初始化单选区域状态
        window.addEventListener('load', function() {
            toggleRadioSection(dropdown.value !== '5');
        });

        // 封装单选区域禁用/启用的逻辑，避免重复代码
        function toggleRadioSection(isDisabled) {
            radioButtons.forEach(radio => {
                radio.disabled = isDisabled;
            });
            if (isDisabled) {
                radioSection.classList.add('disabled-section');
            } else {
                radioSection.classList.remove('disabled-section');
            }
        }
    </script>
</body>
</html>

Breakdown of Each Requirement #

1. Dropdown Change Event Listener

• We bind a change event to the #dropdown element. Every time the user selects a new option, the callback runs.
• The callback triggers the toggleRadioSection helper function to handle the radio area state (tied to requirement 3).

2. Prevent Form Submission & Display Content

• We attach a submit event to the form, then use e.preventDefault() to stop the browser's default behavior (no page refresh or redirect).
• Using the FormData API, we easily collect all form inputs, format them into readable HTML, and inject it into the page via innerHTML in the #formOutput div at the bottom.

3. Disable/Gray Out Radio Section (Except for 5th Option)

• The toggleRadioSection helper function handles all the logic here:
  • If the selected dropdown value isn't 5, we disable all radio buttons and add the .disabled-section class to gray out the area.
  • If the 5th option is selected, we re-enable the radio buttons and remove the grayed-out style.
• We also add a load event listener to initialize the radio section state when the page first loads, so it matches the default dropdown selection.

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