一键提交foreach循环创建的多个表单答案

【问题标题】：Submit multiple forms created by foreach loop with one button一键提交foreach循环创建的多个表单
【发布时间】：2019-03-18 03:59:00
【问题描述】：

在我的刀片模板中，我使用 foreach 每次迭代创建一个表单。目前，每个表单都有一个提交按钮，但我想使用一个提交按钮来提交所有表单，因为现在我无法同时提交所有表单。我该如何解决这个问题？

@if(count($task_criterias) > 0)
    @foreach($task_criterias as $task_criteria)
        <td class="card">
            <div>Description:{{$task_criteria->criteriadescription}}</div>
            <div>Maximum Mark:{{$task_criteria->maximummark}}</div>

            {!! Form::open([
                'action' => 'CriteriaMarksController@store',
                'method' => 'POST',
                'name' => "form"
            ]) !!}

            <div class="form-group" hidden >
                {{ Form::label('criteria_id', 'criteria_id') }}
                {{ Form::text('criteria_id', $task_criteria->id, ['class'=>'form-control']) }}
            </div>

            <div>
                {{ Form::label('selfmark','Mark ') }}
                {{ Form::number('selfmark', '',['placeholder'=>'', 'class' => 'col-lg-3 control-label']) }}
            </div>

            {!! Form::close() !!}
        </td>
    @endforeach

    <input type="button" class="btn btn-info " value="Submit" onclick="submitForms()" />

    <script>
        submitForms = function() {
            $("form").each(function(){
                $.ajax({
                    method:'POST',
                    url:'/criteria_marks/post',
                    data: $(this).serialize(),
                    success: function(r){
                        //...
                    }
                });
             });
         }
     </script>
@endif

【问题讨论】：

标签： html laravel forms foreach

【解决方案1】：

不确定如何使用 Form 外观。

你现在拥有的是：

<input name="criteria_id" value="{{ $task_criteria->id }}" />
<input name="selfmark" value="{{ $task_criteria->id }}" />

但你需要的是：

<input name="criteria_id[]" value="{{ $task_criteria->id }}" />
<input name="selfmark[]" />

注意输入名称中的[]。

【讨论】：

【解决方案2】：

每个请求只能提交一个帖子。最简单的解决方案之一是使用 ajax 执行多个请求：

<script>
submitForms = function() {
  $("form").each(function(){
        $.ajax({
            method:'POST',
            url:'* route to CriteriaMarksController@store *',
            data: $(this).serialize(),
            success: function(r){
                //...
            }
        });
    });
}
</script>

或者你可以制作一个大表格：

{!! Form::open([
            'action' => 'CriteriaMarksController@store',
            'method' => 'POST',
            'name' => "form"
     ]) !!}
@foreach($task_criterias as $key => $task_criteria)
    <td class="card">
      <div>Description:{{$task_criteria->criteriadescription}}</div>
      <div>Maximum Mark:{{$task_criteria->maximummark}}</div>

     <div>
       {{ Form::label('selfmark','Mark ') }}
       {{ Form::number('selfmark['.$task_criteria->id.']', '',
         ['placeholder'=>'', 'class' => 'col-lg-3 control-label']) }}
     </div>

   </td>
 @endforeach 
 <input type="submit" class="btn btn-info " value="Submit"  /> 
{!! Form::close() !!}

这将在帖子中使用 id => 值对形成关联数组 selfmark

【讨论】：

ajax 功能非常棒。但 HTML 表单一不起作用。