Submit multiple forms created by foreach loop with one button - html

Question

In my blade template, I use a foreach to create one form per iteration. Currently, each form has a submit button, but I want to use one submit button to submit all the form, because now I cannot submit all forms at the same time. How can I fix this?
#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

Answer 1

There can be only one post submit per request. One of the easiest solution is to perfom multiple requests using ajax:
<script>
submitForms = function() {
$("form").each(function(){
$.ajax({
method:'POST',
url:'* route to CriteriaMarksController#store *',
data: $(this).serialize(),
success: function(r){
//...
}
});
});
}
</script>
Or you can make one big form:
{!! 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() !!}
This will form associative array selfmark in post with id => value pairs

Answer 2

Not sure how to do it with the Form facade.
What you have now is:
<input name="criteria_id" value="{{ $task_criteria->id }}" />
<input name="selfmark" value="{{ $task_criteria->id }}" />
But what you need to have is:
<input name="criteria_id[]" value="{{ $task_criteria->id }}" />
<input name="selfmark[]" />
Note the [] in the input names.