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

Posted 2023-03-05

【中文标题】我想在更改时保存表单，并使用 laravel 和 Jquery 创建一个动态表单

【英文标题】：I want save form on change and i create a dynamic form using laravel and 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.***.com/questions/285551/…

【参考方案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>