Laravel+jQuery动态表单onchange提交首个表单ID为undefined如何修复

你遇到的问题是由不可靠的父元素查找方式和重复ID冲突两个核心原因导致的，修复方案如下：

问题根因 #

• 多层parent()查找表单的方式过于脆弱：只要HTML结构层级有细微差异（比如第一个表单渲染时多了/少了一层嵌套标签），就会找不到对应的form元素，返回undefined
• 全局重复ID冲突：循环生成的60个表单里，两个隐藏字段都用了相同的idcampignId、fileId，HTML规范要求页面ID唯一，后续取值时会出现取值错误
• 变量重复声明：全局作用域和change回调内重复声明相同变量，存在变量污染风险

修复后的代码 #

Blade模板部分 #

可以去掉隐藏字段的重复ID，不需要靠ID取值，靠name属性查找更可靠：

@for($i =1;$i<=60; $i++) 
    <form action="{{ route('assign-files') }}" method="POST" id="formfile{{$i}}">
        @csrf
        <div class="form-group row">
            <input type="hidden" name="campaign_id" value="{{$campaignObj->campaign_id}}">
            <input type="hidden" name="order" value="{{$i}}">
            <label for="inputEmail3" class="col-2 col-form-label">Day {{$i}}</label>
            <div class="col-6">
                <select class="form-select recordingForm_id" aria-label="Default select example" name="campaign_type_id">
                    <option selected>Select</option>
                    @foreach($recordingObj as $recording)
                    @if(checkFileOnCompain($campaignObj->campaign_id, $recording->id, $i))
                    <option value="{{$recording->id}}" selected>{{$recording->file_name}}</option>
                    @else
                    <option value="{{$recording->id}}">{{$recording->file_name}}</option>
                    @endif
                    @endforeach
                </select>
            </div>
        </div>
    </form>
@endfor

jQuery代码部分 #

用closest()直接查找当前下拉框所属的表单，避免多层parent查找失效，同时用表单上下文查找内部字段，避免ID冲突：

$(document).ready(function() {
    $('.recordingForm_id').change(function() {
        // 直接找当前下拉框所属的最近form元素，不会受层级影响
        const $form = $(this).closest('form');
        // 直接在当前表单内查找字段，不会拿到其他表单的 values
        const selectVal = $(this).val();
        const campignId = $form.find('input[name="campaign_id"]').val();
        const fileId = $form.find('input[name="order"]').val();
        
        // 直接提交表单，不需要再通过ID查找
        $form.submit();
    });
});

额外优化说明 #

• 去掉了不必要的表单ID、下拉框ID依赖，后续调整HTML结构也不会影响提交逻辑
• 移除了重复的变量声明，避免作用域污染
• 不需要靠层级查找元素，逻辑稳定性大幅提升

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