javascript - 发布后不包含动态添加的输入

Question

正如标题所示，我添加了一些动态输入(确切地说是文本区域)。请求中不存在动态输入。

Blade 文件

<div class="row">
            <div class="col-lg-12">
                <div class="panel panel-primary">
                    <div class="panel-heading">
                        <h4 class="panel-title">
                            <i class="livicon" data-name="clock" data-size="16" data-loop="true" data-c="#fff" data-hc="white"></i>
                            Add Quiz 
                        </h4>
                    </div>
                    <div class="panel-body">
                        <div class="row">
                            {!! Form::open(array('url' => URL::to('admin/training/addQuiz'))) !!}
                            <div class="row">
                                <input id="courseID" type="hidden" name="courseID" value="{{ $courseID }}">
                                <div class="col-lg-7">
                                    <label class="col-md-3 control-label" for="title">Quiz Title</label>
                                    <div class="col-md-9">
                                        <input id="title" name="title" type="text" placeholder="Quiz Title" class="form-control" required>
                                        @foreach($errors->get('title') as $message)
                                                                                    {{ $message }}
                                        @endforeach
                                    </div>
                                </div>
                                <div class="col-lg-7">
                                    <label class="col-md-3 control-label" for="title">Quiz Duration (In Minutes)</label>
                                    <div class="col-md-9">
                                        <input id="duration" name="duration" type="number" placeholder="Quiz Duration (In Minutes)" class="form-control" required>
                                        @foreach($errors->get('title') as $message)
                                                                                    {{ $message }}
                                        @endforeach
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                    <div class="row">
                                <a role="button" id="addQuestion">
                                                <h4 class="panel-title">Add more question</h4>
                                </a>
                                <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">

                                    <div class="panel panel-default">
                                        <div class="panel-heading" role="tab" id="headingOne">
                                            <a id="accordionTab" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapse1" aria-expanded="true" aria-controls="collapse1">
                                                <h6> Question 1 </h6>
                                            </a>
                                        </div>
                                        <div id="collapse1" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading1">
                                            <div class="panel-body">
                                                <div class="col-lg-12">
                                                <label class="col-md-3 control-label" for="description">Your Question: </label>
                                                        <textarea style="resize:none;" class="form-control resize_vertical" id="description" name="question[]" placeholder="Please enter your description here..." rows="5" required></textarea>
                                                </div>
                                                <div class="col-lg-12">
                                                <label class="col-md-3 control-label" for="description">A.</label>
                                                <input type="radio" name="q1" value="0"> Answer?
                                                    <div class="col-md-9">
                                                        <textarea style="resize:none;" class="form-control resize_vertical" id="description" name="a[]" placeholder="Please enter your description here..." rows="5" required></textarea>
                                                    </div>
                                                </div>
                                                <div class="col-lg-12">
                                                <label class="col-md-3 control-label" for="description">B.</label>
                                                <input type="radio" name="q1" value="a1"> Answer?
                                                    <div class="col-md-9">
                                                        <textarea style="resize:none;" class="form-control resize_vertical" id="description" name="b[]" placeholder="Please enter your description here..." rows="5" required></textarea>
                                                    </div>
                                                </div>
                                                <div class="col-lg-12">
                                                <label class="col-md-3 control-label" for="description">C.</label>
                                                <input type="radio" name="q1" value="a1"> Answer?
                                                    <div class="col-md-9">
                                                        <textarea style="resize:none;" class="form-control resize_vertical" id="description" name="c[]" placeholder="Please enter your description here..." rows="5" required></textarea>
                                                    </div>
                                                </div>
                                                <div class="col-lg-12">
                                                <label class="col-md-3 control-label" for="description">D.</label>
                                                <input type="radio" name="q1" value="a1"> Answer?
                                                    <div class="col-md-9">
                                                        <textarea style="resize:none;" class="form-control resize_vertical" id="description" name="d[]" placeholder="Please enter your description here..." rows="5" required></textarea>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="addQuestion"></div>
                                </div>
                        </div>

                            {!! Form::submit('Save Quiz', array('class' => 'btn btn-responsive btn-primary btn-sm')) !!}
                            {!! Form::close()!!}
            </div>
        </div>

Javascript

<script>
    $i = 2;
    $("#addQuestion").click(function () {
      $(".addQuestion").append('<div class="panel panel-default"><div class="panel-heading" role="tab" id="headingOne">'
      +'<i class="glyphicon glyphicon-remove clickable"></i><a id="accordionTab" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapse'+$i+'" aria-expanded="true" aria-controls="collapse'+$i+'"><h6>Question '+$i+'</h6></a></div>'
      +'<div id="collapse'+$i+'" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading'+$i+'">'
      +'<div class="panel-body">'
      +'<div class="col-lg-12"><label class="col-md-3 control-label" for="description">Your Question: </label><textarea style="resize:none;" class="form-control resize_vertical" id="description" name="question[] placeholder="Please enter your description here..." rows="5" required></textarea></div>'
      +'<div class="col-lg-12"><label class="col-md-3 control-label" for="description">A.</label><input type="radio" name="q'+$i+'" value="a'+$i+'"> Answer?<div class="col-md-9"><textarea style="resize:none;" class="form-control resize_vertical" id="description" name="a[] placeholder="Please enter your description here..." rows="5" required></textarea></div></div>'
      +'<div class="col-lg-12"><label class="col-md-3 control-label" for="description">B.</label><input type="radio" name="q'+$i+'" value="b'+$i+'"> Answer?<div class="col-md-9"><textarea style="resize:none;" class="form-control resize_vertical" id="description" name="b[] placeholder="Please enter your description here..." rows="5" required></textarea></div></div>'
      +'<div class="col-lg-12"><label class="col-md-3 control-label" for="description">C.</label><input type="radio" name="q'+$i+'" value="c'+$i+'"> Answer?<div class="col-md-9"><textarea style="resize:none;" class="form-control resize_vertical" id="description" name="c[] placeholder="Please enter your description here..." rows="5" required></textarea></div></div>'
      +'<div class="col-lg-12"><label class="col-md-3 control-label" for="description">D.</label><input type="radio" name="q'+$i+'" value="d'+$i+'"> Answer?<div class="col-md-9"><textarea style="resize:none;" class="form-control resize_vertical" id="description" name="d[] placeholder="Please enter your description here..." rows="5" required></textarea></div></div>'
      +'</div></div></div>');
      $i++;
    });
    $(document).on('click', '.glyphicon-remove', function () {
        $(this).parents('.panel').get(0).remove();
        --$i;
    });
    </script>

该请求只能看到问题1。我在互联网上没有看到任何解决方案。我可能会忽略或遗漏一些东西。

Answer 1

所以，这很奇怪，因为表单结束标记过早地结束，而 div addQuestion 不包含在内，而只是 问题 1。我所做的就是移动 DIV 并繁荣!我现在可以在提交后看到它，而不仅仅是问题 1