Question

我使用laravel 5保存此表单但无法跟踪选择和问题。这是问题形式。 *您可以为表单添加多个问题，并为问题添加多个选项。在提交表单时，如何跟踪哪个选项属于哪个问题以及哪个选项正确。*

<div class="col-md-10 ">
            <form class="form-horizontal" id="questionair_form" action="{{route('questionair.store')}}" method="POST" >
                {{csrf_field()}}
                <div id="step_1">
                    <h2>Create</h2>
                    <div class="form-group">
                        <label class="control-label col-sm-4" for="name">Questionair Name:</label>
                        <div class="col-sm-5">
                            <input type="text" class="form-control" name="name" id="name" placeholder="Enter Questionair name">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="control-label col-sm-4" for="duration">Duration:</label>
                        <div class="col-sm-3">
                            <input type="text" class="form-control" name="duration" id="duration" placeholder="Enter Duration">
                        </div>
                        <div class="col-sm-2">
                            <select class="form-control" name="type">
                                <option value="m">Minutes</option>
                                <option value="hr" >Hours</option>
                            </select>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="control-label col-sm-4" for="pwd">Can Resume:</label>
                        <div class="col-sm-5">
                            <label class="radio-inline">
                                <input type="radio" name="resumeable" value="1">Yes
                            </label>
                            <label class="radio-inline">
                                <input type="radio" name="resumeable" value="0">No
                            </label>
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-sm-offset-4 col-sm-10">
                            <button  type="button" class="step_1 btn btn-default">Save</button>
                        </div>
                    </div>
                </div>
                <div id="step_2" style="display: none">
                    <h2>Add Questions</h2>
                    <div id="xyz">
                        <div class="questions">
                            <div class="form-group">
                                <label class="control-label col-sm-4" for="email">Question Type:</label>
                                <div class="col-sm-5">
                                    <select  class="question_type form-control" name="question_type[]" >
                                        <option value="text" > Text </option>
                                        <option value="mcso" >Multiple Choice (Single Option)</option>
                                        <option value="mcmo" >Multiple Choice (Multiple Option)</option>
                                    </select>
                                </div>
                            </div>
                            <div class="group">
                                <div class="form-group">
                                    <label class="control-label col-sm-4" for="question">Question:</label>
                                    <div class="col-sm-5">
                                        <input type="text" class="form-control"  name="question[]" placeholder="Enter Question">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="control-label col-sm-4" for="pwd">Answer:</label>
                                    <div class="col-sm-5">
                                        <input type="text" class="form-control"  name="answer[]" placeholder="Enter Answer">
                                    </div>
                                </div>
                            </div>
                            <hr>
                        </div>
                    </div>
                    <div class="col-sm-4">
                        <p><a  id="add" style="text-decoration: underline" href="#">Add Question</a></p>
                    </div>
                    <div class="row">
                        <div class="col-xs-12">
                            <div class="text-left">
                                <button type="submit" class="pull-left btn btn-default">Save Questions</button>
                            </div>
                        </div>
                    </div>

                </div>

            </form>
        </div>

用于更改问题类型的Java脚本。

            $(document).on('change' , '.question_type',function(e){
            question_number++;
            var $this = $(this);
            var type = $(this).val();

            switch(type){
                case 'text':
                    var html =
                        '<div class="form-group">'+
                            '<label class="control-label col-sm-4" for="question">Question:</label>'+
                            '<div class="col-sm-5">'+
                                '<input type="text" class="form-control"  name="question'+question_number+'[]" placeholder="Enter Question">'+
                            '</div>'+
                        '</div>'+
                        '<div class="form-group">'+
                            '<label class="control-label col-sm-4" for="pwd">Answer:</label>'+
                            '<div class="col-sm-5">'+
                                '<input type="text" class="form-control" name="choice'+question_number+'[]" placeholder="Enter Answer">'+
                            '</div>'+
                        '</div>';
                    $this.closest('.form-group').next('.group').empty().append(html);
                    break;
                case 'mcso':
                    var html =
                        '<div class="form-group">'+
                            '<label class="control-label col-sm-4" for="question">Question</label>'+
                            '<div class="col-sm-5">'+
                                '<input type="text" class="form-control"  name="question'+question_number+'[]" placeholder="Enter Question">'+
                            '</div>'+
                        '</div>';
                        for(var i=1; i <= 3; i++){
                           html += '<div class="form-group ">'+
                                '<label class="control-label col-sm-4" for="choice">Choice '+ i +'</label>'+
                                    '<div class="col-sm-5">'+
                                        '<input type="text" class="form-control"  name="choice'+question_number+'[]" placeholder="Enter Choice">'+
                                    '</div>'+
                                '<label class="col-sm-1 radio-inline"><input type="radio" name="mcso" value="">Correct?</label>'+
                                '<a style="margin-top:6px;text-decoration: underline" class="col-sm-2 delete_choice" href="#">Delete Choice</a>'+
                                '</div>';
                        }
                    html +=  '<a style="text-decoration: underline" class="col-lg-offset-4 add_choice" href="#">Add Choice</a>';
                    $this.closest('.form-group').next('.group').empty().append(html);
                break;
                case 'mcmo':
                    var html =
                        '<div class="form-group">'+
                            '<label class="control-label col-sm-4" for="question">Question</label>'+
                            '<div class="col-sm-5">'+
                                '<input type="text" class="form-control" id="question" name="question'+question_number+'[]" placeholder="Enter Question">'+
                            '</div>'+
                        '</div>';
                        for(var i = 1; i <= 3; i++){
                            html += '<div class="form-group">'+
                                    '<label class="control-label col-sm-4" for="choice">Choice '+ i +'</label>'+
                                        '<div class="col-sm-5">'+
                                            '<input type="text" class="form-control"  name="choice'+question_number+'[]" placeholder="Enter Choice">'+
                                        '</div>'+
                                    '<label class="col-sm-1 checkbox-inline"><input type="checkbox" name="mcmo" value="">Correct?</label>'+
                                    '<a style="margin-top:6px;text-decoration: underline" class="col-sm-2 delete_choice" href="#">Delete Choice</a>'+
                                '</div>';
                        }
                    html +=  '<a style="text-decoration: underline" class="col-lg-offset-4 add_choice" href="#">Add Choice</a>';
                    $this.closest('.form-group').next('.group').empty().append(html);
                break;
            }

        });

Laravel 5多种选择

0 个答案: