我正在开发一个包含动态生成的输入字段和单选按钮的网页。由于每个ID到单选按钮和输入字段也是动态生成的。
该网站旨在成为学校考试申请。网站的这一部分是教师可以创建测试的地方，每个问题有四个选项，其中一个是正确的。每个测试都要发送给许多不同的人。当然，测试应用程序可用于创建具有许多不同标题的测试。将测试保存到数据库时，必须可以从这些测试中收集所有数据。
1-如何收集输入字段的数据？ 2-如何显示所选的单选按钮和“配对”输入字段 3-如何维护不同值之间的关系？ 4-如何将数据保存到MySQL数据库？
标题，问题，答案以及哪些是正确的方法。因此，不同test-id的生成相当复杂，并遵循一定的模式：
所有测试题目都有ID：“theTitle”
每个问题都有一个具有此特定模式的ID：
theTitle + "Q" + name
Q为“问题”
name是一个数值：第一个问题是第一个，依此类推。 示例： JavaQ1
四个单选按钮的每个ID都有这种模式：
theTitle + "Q" + name + "O" + "1"
O for Option “1”可以是1到4。 示例 JavaQ5O4
与单选按钮配对的for输入字段的每个ID都具有以下格式：
theTitle + "Q" + name + "input" + "1"
示例： JavaQ4input4
每个单选按钮还有一个名称，以区别于其他组的单选按钮。这些名称遵循以下模式：
theTitle + "rb" + name
用于无线电显示器
示例： Java10rb4
JavaScript： JsFiddle: Here you can see the application in action！
$("body").on('click', '#radioAddQuestion', function () {
name++;
$(".dynamicform").append(createQuestion(name));
});
$(".dynamicform").append(createQuestion(name));
function createQuestion(name){
var dynamic=`<span class="module">
<legend class="col-form-legend col-sm-10"></legend>
<div class="input-group input-group">
<label id="wQuestionLabel" class="form-control-label" style="width: 540px;" for="wQuestion">Question:</label>
</div>
<div class="form-group row">
<div class="input-group input-group">
<!-- The Question Inputfield that needs ID-->
<input type="text" class="form-control" aria-label="" id="${theTitle + "Q" + name}" style="width: 540px;">
</div>
</div>
<div class="form-group row">
<div class="input-group input-group">
<label id="questionOptions" class="form-control-label" style="width: 540px;"
for="wQuestion">Enter
avaible options:</label>
</div>
</div>
<!-- The radiobuttons and option inputfields that needs ID's-->
<div class="form-group row">
<div class="input-group input-group">
<span class="input-group-addon">
<input type="radio" value="1" name="${theTitle +"rb"+name}" id="${theTitle + "Q" + name + "O" + "1"}" aria-label="">
</span>
<input type="text" id="${theTitle + "Q" + name + "input" + "1"}" class="form-control" aria-label="" style="width: 540px;">
</div>
</div>
<div class="form-group row">
<div class="input-group input-group">
<span class="input-group-addon">
<input type="radio" value="2" name="${theTitle +"rb"+name}" id="${theTitle + "Q" + name + "O" + "2"}" aria-label="">
</span>
<input type="text" id="${theTitle + "Q" + name + "input" + "2"}" class="form-control" aria-label="" style="width: 540px;">
</div>
</div>
<div class="form-group row">
<div class="input-group input-group">
<span class="input-group-addon">
<input type="radio" value="3" name="${theTitle +"rb"+name}" id="${theTitle + "Q" + name + "O" + "3"}" aria-label="">
</span>
<input type="text" id="${theTitle + "Q" + name + "input" + "3"}" class="form-control" aria-label="" style="width: 540px;">
</div>
</div>
<div class="form-group row">
<div class="input-group input-group">
<span class="input-group-addon">
<input type="radio" value="4" name="${theTitle +"rb"+name}" id="${theTitle + "Q" + name + "O" + "4"}" aria-label="">
</span>
<input type="text" id="${theTitle + "Q" + name + "input" + "4"}" class="form-control" aria-label="" style="width: 540px;">
</div>
</div>
</span>
`;
return dynamic;
答案 0 :(得分：0)
您还需要为每个单选按钮添加一个值。
现在你的代码看起来像这样：
<input type="radio" name="onlinerg1" id="onlineQ1O1" aria-label="">
还应包括Value=1到Value=4，以便您可以在每个选项之间进行区分，并在正确的顺序中保存选项文本。
答案 1 :(得分：0)
我会以不同的方式做到这一点。
当您提交表单时，附加到表单输入的id属性并不重要，重要的是name属性，因为它是与其相应值一起提交的。
当您需要检索值时，如何命名输入可能会使您在服务器端受益。在PHP中，当您使用array notation提交输入时，您可以像我们要做的那样将它们检索为数组或多维数组。
为每个输入e.q.提供一个共同的name属性。 qs。通过附加[index][field]来关联它们。例如，qs[0][question]是第一个问题的文字，qs[0][alt][0]是第一个问题的第一个问题，qs[2][answer]是第三个问题的答案。
<强> JS
// use document.ready not window.onload
$(function() {
var name = 0; // start questions with index 0
$("body").on('click', '#radioAddQuestion', function () {
$(".dynamicform").append(createQuestion(name++)); // shorter
});
$(".dynamicform").append(createQuestion(name++));
function createQuestion(name){
// replace id with name attributes
var dynamic=`<span class="module">
<legend class="col-form-legend col-sm-10"></legend>
<div class="input-group input-group">
<label id="wQuestionLabel" class="form-control-label" style="width: 540px;" for="wQuestion">Question:</label>
</div>
<div class="form-group row">
<div class="input-group input-group">
<input type="text" class="form-control" aria-label="" name="${"qs[" + name + "][question]"}" style="width: 540px;">
</div>
</div>
<div class="form-group row">
<div class="input-group input-group">
<label id="questionOptions" class="form-control-label" style="width: 540px;"
for="wQuestion">Enter
avaible options:</label>
</div>
</div>
<!-- The radiobuttons and option inputfields that needs ID's-->
<div class="form-group row">
<div class="input-group input-group">
<span class="input-group-addon">
<input type="radio" value="0" name="${"qs[" + name + "][answer]"}" aria-label="">
</span>
<input type="text" name="${"qs[" + name + "][alt][0]"}" class="form-control" aria-label="" style="width: 540px;">
</div>
</div>
<div class="form-group row">
<div class="input-group input-group">
<span class="input-group-addon">
<input type="radio" value="1" name="${"qs[" + name + "][answer]"}" aria-label="">
</span>
<input type="text" name="${"qs[" + name + "][alt][1]"}" class="form-control" aria-label="" style="width: 540px;">
</div>
</div>
<div class="form-group row">
<div class="input-group input-group">
<span class="input-group-addon">
<input type="radio" value="2" name="${"qs[" + name + "][answer]"}" aria-label="">
</span>
<input type="text" name="${"qs[" + name + "][alt][2]"}" class="form-control" aria-label="" style="width: 540px;">
</div>
</div>
<div class="form-group row">
<div class="input-group input-group">
<span class="input-group-addon">
<input type="radio" value="3" name="${"qs[" + name + "][answer]"}" aria-label="">
</span>
<input type="text" name="${"qs[" + name + "][alt][3]"}" class="form-control" aria-label="" style="width: 540px;">
</div>
</div>
</span>
`;
return dynamic;
}
});
PHP（示例）
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
$qs = !empty($_POST['qs']) ? $_POST['qs'] : [];
// loop through questions
foreach ($qs as $i => $q) {
$question = $q['question'];
$alts = $q['alt'];
// radio buttons do not get submitted if they are not selected
$answer = isset($q['answer']) ? $q['answer'] : null;
printf('Question %d: %s<br>', $i + 1, $question);
// loop through question's alternatives
foreach ($alts as $j => $alt) {
printf('Alternative %d: %s<br>', $j + 1, $alt);
}
if (isset($alts[$answer])) {
printf('Answer: %s<br>', $alts[$answer]);
}
}
//echo '<pre>' . print_r($_POST, true) . '</pre>';
}
答案 2 :(得分：0)
这就是我能够从动态输入字段和单选按钮保存数据的方法。我使用两个for循环来首先访问不同的id。然后将它们的值保存到可以保存到数据库中的不同变量中：
$("#saveTest").click(function () {
for (var i = 1; i <= name; i++) {
var questionId = theTitle + "Q" + name;
//The Question
var question = $("#" + questionId).val();
for (var j = 1; j <= 4; j++) {
// The IDs of the radio-buttons and the inputfields:
var radioBtnID = theTitle + "Q" + [i] + "O" + [j];
var inputTextId = theTitle + "Q" + [i] + "input" + [j];
// Text from all the different input-fields
var inputText = $("#" + inputTextId).val();
// The right alternative (that is selected with radio-button)
if($("#"+ radioBtnID).is(':checked')) {
console.log("The right answer: " +inputText+ " Right answer: " + inputTextId);
}
}
}
});