包含多个';对象';


HTML form containing multiple 'objects'

好吧,我不确定标题的格式是否正确,我会尝试更好地解释自己。

我希望我的网站的用户能够用HTML表单创建一个民意调查。民意调查包含多个问题,每个问题都包含"问题(字符串)"和几个备选答案。因此产生了以下形式的结构:

Question 1
    QuestionString 1
    Alternative 1
    Alternative 2
    Alternative n
Question 2
    QuestionString 2
    Alternative 1
    Alternative 2
    Alternative n
Question N
    QuestionString n
    Alternative 1
    Alternative 2
    Alternative n

我能够动态地将问题的备选输入字段添加到表单中,以及整个问题。

问题是,我想以以下方式评估表单:

for i = 0; i < questions
    //Store question[i].QuestionString in my database
    for j = 0 j < questions[i].alternatives
        // Store questions[i].alternatives[j] in my database

所以基本上我想有一个问题对象的数组,我会说。有可能做到这一点吗?

用多个答案回答多个问题

你可以依靠HTML表单来组织你的多维数据数组,比如:

<form>
  <h2>Question 0</h2>
  <input type="radio" name="answerswers[0][]" value="0"> answer 0<br>
  <input type="radio" name="answerswers[0][]" value="1"> answer 1<br>
  <input type="radio" name="answerswers[0][]" value="2"> answer 2
  <h2>Question 1</h2>
  <input type="radio" name="answerswers[1][]" value="0"> answer 0<br>
  <input type="radio" name="answerswers[1][]" value="1"> answer 1<br>
  <input type="radio" name="answerswers[1][]" value="2"> answer 2
  <h2>Question 2</h2>
  <input type="checkbox" name="answerswers[2][]" value="0"> answer 0<br>
  <input type="checkbox" name="answerswers[2][]" value="1"> answer 1<br>
  <input type="checkbox" name="answerswers[2][]" value="2"> answer 2
  <h2>Question 3</h2>
  <input type="checkbox" name="answerswers[3][]" value="0"> answer 0<br>
  <input type="checkbox" name="answerswers[3][]" value="1"> answer 1<br>
  <input type="checkbox" name="answerswers[3][]" value="2"> answer 2
</form>

当提交此表单时,PHP将在$_REQUEST['answers']中看到一组问题,每个问题都包含一组类似$_REQUEST['answers'][0][0]的答案。

如果这些答案中的任何一个没有被选中,那么它们将从提交的数组中丢失。对于复选框和单选按钮,只发送选中的选项。对于前2个问题中的每一个问题,您将有0-1个可能已检查的单选框,对于最后2个问题中的每个问题,您都将有0-3个可能已选中的复选框

PHP脚本应该在第一个维度中查找数组键,以识别问题编号(name="answerswers[1][]"$_REQUEST['answers'][1]中的1)和第二个维度中的数组值(value="1"$_REQUEST['answers'][0][0] == 1中的1

用单一答案回答多个问题

如果答案总是单选,它们将始终是单选按钮,而不是复选框,所以你可以这样做:

<form>
  <h2>Question 0</h2>
  <input type="radio" name="answerswers[0]" value="0"> answer 0<br>
  <input type="radio" name="answerswers[0]" value="1"> answer 1<br>
  <input type="radio" name="answerswers[0]" value="2"> answer 2
  <h2>Question 1</h2>
  <input type="radio" name="answerswers[1]" value="0"> answer 0<br>
  <input type="radio" name="answerswers[1]" value="1"> answer 1<br>
  <input type="radio" name="answerswers[1]" value="2"> answer 2
  <h2>Question 2</h2>
  <input type="radio" name="answerswers[2]" value="0"> answer 0<br>
  <input type="radio" name="answerswers[2]" value="1"> answer 1<br>
  <input type="radio" name="answerswers[2]" value="2"> answer 2
  <h2>Question 3</h2>
  <input type="radio" name="answerswers[3]" value="0"> answer 0<br>
  <input type="radio" name="answerswers[3]" value="1"> answer 1<br>
  <input type="radio" name="answerswers[3]" value="2"> answer 2
</form>

总是只有一个answers[0],或者如果没有选择答案,则根本没有。必须指定索引才能将单选按钮组合在一起(单击其中一个应取消选中该组中的所有其他选项)。这仅用于显示问题和收集答案。

定义问题和答案以开始调查

对于在民意调查开始时创建问题,我建议在将每个新问题输入及其答案插入DOM之前,将其包装在<div>中,然后可以在该<div>中插入任意数量的[type="text"]输入。就在提交表单之前,您可以循环使用<div>来修改[name]属性,使用循环索引作为问题索引,但保留答案索引为空(自动)

HTML:

<form>
  <div class="question">
    <input type="text" class="question" value="Question 0">
    <input type="text" class="answerswer" value="answerswer0">
    <input type="text" class="answerswer" value="answerswer1">
    <input type="text" class="answerswer" value="answerswer2">
  </div>
  <div class="question">
    <input type="text" class="question" value="Question 1">
    <input type="text" class="answerswer" value="answerswer0">
    <input type="text" class="answerswer" value="answerswer1">
    <input type="text" class="answerswer" value="answerswer2">
  </div>
</form>

jQuery:

$(document).on('submit', 'form', function(){
  $(this).find('div.question').each(function(i,ele){
    $(ele).find('input.question').attr('name', 'questions['+i+']');
    $(ele).find('input.answer').attr('name', 'answers['+i+'][]');
  });
});

纯JavaScript:

var questions = document.querySelectorAll("div.question");
for(var i = 0; i < questions.length; i++){
  questions[i].querySelector('input.question').name = 'questions['+i+']';
  var answers = questions[i].querySelectorAll('input.answer');
  for(var a = 0; a < answers.length; a++){
    answers[a].name = 'answers['+i+'][]';
  }
}

我实际上还没有尝试过那些jQuery和JavaScript片段,但我认为它们应该能在上运行

您可以尝试这样的方法。我使用了Array.push()来帮助编辑问题的顺序,但它应该是一个很好的开始:

function Question(text, answers){
  this.text = text;
  this.answers = answers;
}
var Questions = [];
Questions.push(new Question('How many fingers?', [8,10,11]));
Questions.push(new Question('How many eyes?', [1,2,3]));
Questions.push(new Question('Why is the sky blue?', ['Because angels have blue skin', "Because of chemicals sprayed by the government", "Because of the way light refracts into different colours"]));
console.log(Questions[2].text);
console.log(Questions[2].answers[2]);

遵循本文档了解更多关于在JavaScript中循环一系列整数的信息(您似乎已经理解了其中的逻辑)https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for