根据用户输入自动创建 Javascript 表单

Question

我正在尝试创建一个表单，该表单将根据用户输入生成不同级别的表单。

这方面的一个例子是 "有多少个级别？" -用户输入 3- 将生成三个单独的级别，每个级别具有相同的问题。在这里，将有一个问题问"有多少个对象？"同样的情况将在这里发生，因为将生成多个选项。

表单显示方式的粗略草图

我一直遇到的问题是分配 id，然后能够获取它们，以便稍后可以引用它们以供使用 MySQL。

function generateForm(){
var number = document.getElementById('number_of_levels').value;
var div = document.getElementById('levels');
//  div.innerHTML += " " +number;
var heading = document.createElement("P");
heading.innerHTML = "Level " + number;    
document.getElementById('levels').appendChild(heading);
var objects = document.createElement("P");
objects.innerHTML = "How many objects is the badge comprised of?";        
document.getElementById('levels').appendChild(objects);
var num_objects_input = document.createElement("input");
num_objects_input.type = "number";
num_objects_input.id = "number_objects" +number;
document.getElementById('levels').appendChild(num_objects_input);

//num_objects.onchange = function(){addObject(num_objects.id)};  
//div for the following levels
var ind_levels_div = document.createElement("div");
ind_levels_div.id = "level_" +number;
document.getElementById('levels').appendChild(ind_levels_div);
num_objects_input.onchange = function(){additionalObject()};
}

function additionalObject(){
var number = document.getElementById("number_objects" +number).value;
var objects_number = document.createElement("P");
objects_number.innerHTML = "Object " + number;    
document.getElementById("level_" +number).appendChild(objects_number);
}

我得到的结果是表单不会生成任何 Object 表单元素，但会制作级别。

Answer 1

将所有表单对象存储在一个数组中，然后将数组转换为更易读的格式。

var objectArray = [];
function createObject() {
var obj = document.createElement('div');
objectArray.push(obj);
obj.id = objectArray.length;
number = objectArray.length;
/* put your code here  to append obj to the proper level etc*/
}

现在，当您要将其发送到mysql时，您只需转换数组即可

var sqlArray = JSON.Stringify(objectArray);