动态Ajax表单提交多个表单

时间:2019-06-24 15:11:22

标签: json ajax laravel

我想使用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();  

        });

    });
});   





});

0 个答案:

没有答案