我想在更改时保存表单，并使用 laravel 和 Jquery 创建一个动态表单答案

【问题标题】：I want save form on change and i create a dynamic form using laravel and Jquery我想在更改时保存表单，并使用 laravel 和 Jquery 创建一个动态表单
【发布时间】：2021-10-26 10:19:27
【问题描述】：

当我通过 JQuery 调用它时，我使用 Laravel 在 html 中创建了一个动态表单，它创建的第一个显示未定义的表单 ID，并且在下一个表单中显示它的表单 Id。如何解决这个问题。下面我分享我的代码：

@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}}" id='campignId'>
            <input type="hidden" name="order" value="{{$i}}" id="fileId">
            <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" id="recordingForm_id{{$i}}" 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>][1]
        </div>
    </form>
@endfor
//jquery code
<script type='text/javascript'>
    $(document).ready(function() {
     var recordingForm_id ='';
     var selectVal='';
     var formId ='';
     var campignId='';
     var fileId='';
        $('.recordingForm_id').change(function() {
            var recordingForm_id = $(this).attr('id');
            var selectVal = $("#"+recordingForm_id+" option:selected").val();
            var formId = $('#'+ recordingForm_id).parent().parent().parent().attr('id');
            var campignId = $('#campignId').val(); 
            var fileId = $('#fileId').val();
    
         $('#'+formId).submit();
    
    });
    
});
</script>

【问题讨论】：

你能添加一个浏览器接收的html示例输出和你的jquery代码吗？
以上截图分享
meta.stackoverflow.com/questions/285551/…

标签： html jquery css ajax laravel

【解决方案1】：

试试这个解决方案

将 attr id='campignId' 更改为 class='campignId' 并在更改输入时选择获取父表单并且选择的值不为 null 以提交表单

@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}}" class='campignId'>
            <input type="hidden" name="order" value="{{$i}}" class="fileId">
            <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" id="recordingForm_id{{$i}}" 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 代码

<script type='text/javascript'>
    $(document).ready(function() {
     var selectVal='';
     var formId ='';
        $('.recordingForm_id').change(function() {
            var selectVal = $(this).find(":selected").val();
            var formId = $(this).parents('form').attr('id');

            if(selectVal === ""){
                $('#'+formId).submit();
            }
    
        });
    
     });
</script>

【讨论】：