如何阻止表单提交直至所有动态生成的下拉框完成选择？

问题分析 #

你遇到的核心问题是HTML中重复使用了同一个ID——在HTML规范里，id属性必须是页面唯一的，所以$('#inputDropdown')只会匹配第一个下拉框，后面的选项都不会被检测到。另外原代码里不管验证结果都调用了e.preventDefault()，这会导致即使所有选项都填好也无法提交表单。

解决方案 #

第一步：修正HTML（PHP生成部分）

先把重复的id="inputDropdown"去掉，改用class来标识这些需要验证的下拉框，比如给它们统一加一个inputDropdown类：

// PHP生成代码示例（修改后）
<?php
// 假设你从数据库循环生成下拉框
$rows = // 你的数据库查询结果行数
for($i=1; $i<=$rows; $i++){
    echo '<select name="dropdown_'.$i.'" class="form-control inputDropdown">
            <option value="No Response" selected>Blank - Please Select A Option</option>
            <option value="No">No</option>
            <option value="Full">Yes</option>
          </select>';
}
?>

这样生成的HTML里，所有下拉框都有inputDropdown类，没有重复ID，符合HTML规范。

第二步：修改jQuery脚本

现在用class选择器选中所有下拉框，遍历检查每个的值，只有当所有下拉框都不为"No Response"时才允许表单提交：

$(document).ready(function () {
    $("#update-form").submit(function (e) {
        // 标记是否有未完成的下拉框
        let hasEmptyOption = false;
        // 遍历所有需要验证的下拉框
        $('.inputDropdown').each(function(){
            if($(this).val() === 'No Response'){
                hasEmptyOption = true;
                return false; // 跳出each循环，不用继续检查
            }
        });
        if(hasEmptyOption){
            alert('Please complete all the boxes');
            e.preventDefault(); // 只有验证不通过时才阻止提交
        }
        // 验证通过的话，表单会正常提交
    });

    // 如果需要在下拉框改变时自动尝试提交表单（可选）
    $('.inputDropdown').change(function () {
        $("#update-form").submit();
    });
});

关键说明 #

1. 用class替代重复ID：class可以重复使用，适合批量选择同类型元素，而ID必须唯一，这是HTML的基础规范，一定要遵守。
2. 遍历验证所有下拉框：通过$('.inputDropdown').each()逐个检查每个下拉框的值，只要有一个未选择有效选项，就阻止提交并提示。
3. 正确控制提交行为：只有在验证不通过时才调用e.preventDefault()，避免了原代码不管结果都阻止提交的问题。

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