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

Question

情景：

我正在构建一个问卷调查应用程序，我对一个调查问卷提出了很多问题。

在添加问题页面上，我默认有一个问题，其他问题可以由jquery生成。

现在，在每个问题下面，一个名为“添加答案”的按钮会为单个问题创建最多4个答案。

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

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

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

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

现在我感到困惑的是，如果用户添加了之字形答案，哪些问题的答案是什么？这意味着首先为问题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

代码

<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"
        ]
    ]
]

Answer 2

<?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的值;