每个输入字段唯一名称问题

Question

场景：

我正在构建一个问卷应用程序，我对一个问卷有很多问题。

在add-question页面，我默认有一个问题，其他问题可以通过jquery生成。

现在每个问题下方都有一个名为 add answer 的按钮，可为单个问题创建最多 4 个答案。

在同一页面上，我有一个添加另一个问题的按钮

所以我确实成功地为第一个问题生成了答案（文本字段）。

我已经回答了input's name as array 的问题。

当我得到所有请求数据时的输出：

现在我很困惑，如果用户添加 zig zag 答案意味着首先为问题 1 添加答案，然后为问题 3 添加答案，那么问题的值将出现在问题 1 然后是问题 2 和问题 3 等等在：

我想要的： 是如何获得每个问题的答案，然后我可以在服务器端处理它们。

我有以下表格：

<form class="form-horizontal" id="components" role="form" method="POST" action="/questionnaire/{{$questions->id}}/fill">
  <input type="hidden" name="_token" value="{{ csrf_token() }}">
  <div class="full-from">
    <div class="row">
      <div class="col-md-8">
        <div class="form-group">
          <label class="col-md-4 control-label" for="textinput">Question Type</label>  
          <div class="col-md-8">
            <select class="form-control" name="type[]">
              <option>Text</option>
            </select>
          </div>
        </div>
      </div>
    </div>
    <div class="row addChoices">
      <div class="col-md-8">
        <div class="form-group">
          <label class="col-md-4 control-label" for="textinput">Question</label>  
          <div class="col-md-8">
            <input type="text" name="question[]" class="form-control">
          </div>
        </div>
        <div class="form-group">
          <label class="col-md-4 control-label" for="textinput">Answer</label>  
          <div class="col-md-8">
            <input type="text" name="answer[]" class="form-control">
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="add-question-wrapper">
  </div>
  <hr/>
  <div class="add-question">
    <button type="submit" name="submit" class="btn btn-success">Create question</button>
  </div>
</form>

上面 html 的 jQuery 是：

$(document).ready(function() {
  x = 1;
});

$(".add_question_button").click(function(e) {
  e.preventDefault();
  addform();
});

$(document).ready(function() {
  var max_fields = 3;
  var add_button = $(".add_field_button");
  $(document).on("click", ".add_field_button", function(e) {
    var wrapper = $(this).closest("div").prev(".addChoices");
    var _num_choices = $(this).closest("div").prev(".addChoices").find(".singletonChoiceContainer").length;

    if (_num_choices < max_fields) {
      x++;
      wrapper.append('<div class="col-md-8 singletonChoiceContainer"><div class="form-group"><label class="col-md-4 control-label" for="textinput">Answer</label><div class="col-md-8"><input type="text" name="answer[]" class="form-control"></div></div></div><div class="col-md-4 operations"><span><input type="radio" name="correct"> Correct</span>&nbsp;|&nbsp;&nbsp;<span style="color: blue">Delete Choice</span></div>');
    }
  });
  $(wrapper).on("click", ".remove_field", function(e) {
    e.preventDefault();
    $(this).parent('div').remove();
  })
});



$(".add-question-wrapper").on("click", ".remove_field", function(e) { //user click on remove text
  e.preventDefault();
  $(this).parent('div').remove();
  x--;
});

function addform(e) { 
  var max_fields = 3; 
  var wrapper = $(".add-question-wrapper"); 
  var add_button = $(".add_question_button"); 

  if (x < max_fields) { 
    x++; 
    $(wrapper).append('<hr/><div class="row"><div class="col-md-8"><div class="form-group"><label class="col-md-4 control-label" for="textinput">Question Type</label>  <div class="col-md-8"><select class="form-control" name="question_type"><option value="text">Text</option><option value="MultipleSingle">Multiple Choice (Single Option)</option><option value="Multiple">Multiple Choice (Multiple Option)</option></select></div></div></div></div><div class="row addChoices"><div class="col-md-8"><div class="form-group"><label class="col-md-4 control-label" for="textinput">Question</label><div class="col-md-8"><input type="text" name="question[]" id="'+x+'" class="form-control"></div></div></div><div class="col-md-4 operations"><span><input type="radio" name="correct"> Correct</span>&nbsp;| &nbsp;&nbsp;<span style="color: blue">Delete Choice</span></div></div><div id="add-choice"><button type="button" class="btn btn-primary btn-sm add_field_button">Add Choice</button></div>');
  }
}

Answer 1

<?php $i = 1;?>
<input type="text" name="question[{{$i}}]" class="form-control">

<input type="text" name="question[{{$i}}][answer]" class="form-control">

<script>
var i = '<?php echo $i; ?>';
/***/

if (_num_choices < max_fields) {
  x++;
  wrapper.append('<div class="col-md-8 singletonChoiceContainer"><div class="form-group"><label class="col-md-4 control-label" for="textinput">Answer</label><div class="col-md-8"><input type="text" name="answer['+i+']" class="form-control"></div></div></div><div class="col-md-4 operations"><span><input type="radio" name="correct"> Correct</span>&nbsp;|&nbsp;&nbsp;<span style="color: blue">Delete Choice</span></div>');
}


///
if (x < max_fields) { 
    x++; 
    i++; //Increment in value of i when generating question  
    $(wrapper).append('<hr/><div class="row"><div class="col-md-8"><div class="form-group"><label class="col-md-4 control-label" for="textinput">Question Type</label>  <div class="col-md-8"><select class="form-control" name="question_type"><option value="text">Text</option><option value="MultipleSingle">Multiple Choice (Single Option)</option><option value="Multiple">Multiple Choice (Multiple Option)</option></select></div></div></div></div><div class="row addChoices"><div class="col-md-8"><div class="form-group"><label class="col-md-4 control-label" for="textinput">Question</label><div class="col-md-8"><input type="text" name="question['+i+']" id="'+x+'" class="form-control"></div></div></div><div class="col-md-4 operations"><span><input type="radio" name="correct"> Correct</span>&nbsp;| &nbsp;&nbsp;<span style="color: blue">Delete Choice</span></div></div><div id="add-choice"><button type="button" class="btn btn-primary btn-sm add_field_button">Add Choice</button></div>');
}

</script>

当用户添加问题时，需要增加 i 的值；

Answer 2

下面的代码

<input name="question[]"/> <!-- Q1 -->
<input name="question[]"/> <!-- Q2 -->

<input name="answer[question1]" value="Q1 A1"/>
<input name="answer[question1]" value="Q1 A2"/>
<input name="answer[question2] value="Q2 A1"/>

那么你就可以得到

[
    question => [
        "Q1",
        "Q2"
    ],
    answer => [
        "Q1" => [
            "Q1 A1",
            "Q1 A2"
        ],
        "Q2" => [
            "Q2 A1"
        ]
    ]
]