如何用JavaScript实现表单字段填值后启用保存按钮并触发提示？

没问题，我帮你搞定这个需求！下面是完整的可运行代码，完美实现你要的功能：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单示例</title>
</head>
<body>
    <form id="myForm">
        <div>
            <label>文本字段1:</label>
            <input type="text" id="text1" placeholder="请输入内容">
        </div>
        <div>
            <label>文本字段2:</label>
            <input type="text" id="text2" placeholder="请输入内容">
        </div>
        <div>
            <label>选择框:</label>
            <select id="selectBox">
                <option value="">请选择</option>
                <option value="option1">选项1</option>
                <option value="option2">选项2</option>
                <option value="option3">选项3</option>
            </select>
        </div>
        <button type="button" id="saveBtn" disabled>保存</button>
    </form>

    <script>
        // 获取表单元素和按钮
        const text1 = document.getElementById('text1');
        const text2 = document.getElementById('text2');
        const selectBox = document.getElementById('selectBox');
        const saveBtn = document.getElementById('saveBtn');

        // 检查所有字段是否都有值的函数
        function checkFields() {
            const text1Filled = text1.value.trim() !== '';
            const text2Filled = text2.value.trim() !== '';
            const selectFilled = selectBox.value !== '';
            
            // 所有字段都填好就启用按钮，否则禁用
            saveBtn.disabled = !(text1Filled && text2Filled && selectFilled);
        }

        // 给每个输入元素绑定事件，实时检查
        text1.addEventListener('input', checkFields);
        text2.addEventListener('input', checkFields);
        selectBox.addEventListener('change', checkFields);

        // 保存按钮点击事件
        saveBtn.addEventListener('click', function() {
            alert('表单已保存！');
        });
    </script>
</body>
</html>

• 一开始把保存按钮设为disabled状态，这是HTML原生属性，确保页面加载时按钮就是禁用的
• 写了一个checkFields函数，专门判断所有必填字段是否都有有效内容：文本字段会去掉前后空格再判断是否非空，避免用户只输入空格的情况；选择框要确保选了非默认的空选项
• 给文本框绑定input事件（用户输入时实时触发），选择框绑定change事件（切换选项时触发），每次触发就调用检查函数，动态更新按钮的禁用/启用状态
• 按钮激活后，点击会弹出你要的提示框

这个代码直接复制就能运行，你可以根据自己的需求调整字段的ID、提示文字或者表单样式~

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