我想使用Ajax提交具有不同ID名称(form1,form2,form3等)的多个表单,并从我的Laravel控制器接收JSON响应。提交带有id = form1
的表单后,必须显示form2,但是在必须显示form3时失败。它只是接收到名为next_question_id
的JSON响应,无法继续显示Form3的代码。
控制器
public function getStartQuiz($id)
{
session()->forget('next_question_id');
$categoryquiz = JenisQuiz::find($id);
$questions = $categoryquiz->questions()->get();
$first_question_id = $categoryquiz->questions()->min('id');
$last_question_id = $categoryquiz->questions()->max('id');
$duration = $categoryquiz->duration;
if (session('next_question_id')) {
$current_question_id = session('next_question_id');
} else {
$current_question_id = $first_question_id;
session(['next_question_id' => $current_question_id]);
}
return view('user.pages.showquiz',
compact('categoryquiz', 'questions', 'current_question_id', 'first_question_id', 'last_question_id',
'duration'));
}
public function postSaveQuestionResult($id, Request $req)
{
$categoryquiz = JenisQuiz::find($id);
$question = Question::find($req->get('question_id'));
if ($req->get('option') != null) {
$duration = $categoryquiz->duration * 60;
$time_taken = ((int) $req->get('time_taken'.$question->id));
$time_per_question = $duration - $time_taken;
Answer::create([
'user_id' => Auth::user()->id,
'question_id' => $req->get('question_id'),
'jenis_quiz_id' => $id,
'user_answer' => $req->get('option'),
'question' => $question->question,
'option1' => $question->option1,
'option2' => $question->option2,
'option3' => $question->option3,
'option4' => $question->option4,
'time_taken' => $time_per_question
]);
}
$next_question_id = $categoryquiz->questions()->where('id', '>', $req->get('question_id'))->min('id');
if ($next_question_id != null) {
return Response::json(['next_question_id' => $next_question_id]);
}
return redirect()->route('result', [$id]);
}
查看
@foreach ($questions as $question)
<div class="jumbotron" id="jumbotron{{$question->id}}"
{{-- @if($question->id != $current_question_id)
style="display: none;"
@endif --}}
>
<p>Question#{{$question->id}}</p>
<p>{{$question->question}}</p>
{!! Form::open(['action'=>['QuizDataController@postSaveQuestionResult',$categoryquiz->id],'method'=>'post','id'=>'frm'.$question->id,'class'=>'forms']) !!}
<div id="answer-radio{{$question->id}}">
<div class="btn-group" data-toggle="buttons">
<label>
<input type="radio" name="option" value="1">{{$question->option1}}
</label><br>
<label>
<input type="radio" name="option" value="2">{{$question->option2}}
</label><br>
<label>
<input type="radio" name="option" value="3">{{$question->option3}}
</label><br>
<label>
<input type="radio" name="option" value="4">{{$question->option4}}
</label><br>
</div>
</div>
{!!Form::input('hidden','question_id',$question->id)!!}
{!!Form::input('hidden','time_taken'.$question->id,null,['id'=>'time_taken'.$question->id])!!}
{!!Form::token()!!}
@if($question->id == $last_question_id)
{!!Form::submit('Save',['class'=>'btn btn-info'])!!}
@else
{{-- {!!Form::submit('Next',['class'=>'btn btn-info'])!!} --}}
@endif
{!!Form::close()!!}
</div>
@if(($questions->count())>1)
@section('script_form')
$(function() {
$(document).on('submit','forms',function(e){
e.preventDefault();
console.log($(this));
var form = $(this);
var $formAction= form.attr('action');
var $userAnswer = $('input[name=option]:checked',$('#frm{{$question->id}}')).val();
$.post($formAction,$(this).serialize(),function(data){
$('#jumbotron{{$question->id}}').hide();
$('#jumbotron'+data.next_question_id+'').show();
});
});
});
});