javascript - 如何创建基于用户输入的自动表单生成器

Question

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

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

Rough sketch of how the form would be displayed

我一直遇到的问题是分配 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);
}

我得到的结果是表单不会生成任何对象表单元素，但会生成关卡。

Answer 1

对于构建表单，这段代码工作正常。如果你想检索数据，那么你应该添加一个名称属性，你想检索什么数据。

function generateForm() {
  var number = 0;
  number = document.getElementById('number_of_levels').value;
  var div = document.getElementById('levels');
  //  div.innerHTML += " " +number;
  if (number > 0) {
    document.getElementById('levels_btn').setAttribute('disabled', 'disabled');
  }

  for (let index = 0; index < number; index++) {
    var heading = document.createElement("h4");
    heading.innerHTML = "Level " + (index + 1);
    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" + (index + 1);
    document.getElementById('levels').appendChild(num_objects_input);
    var submit = document.createElement("button");
    submit.type = "button";
    submit.innerHTML = 'objects';
    submit.id = "submit" + (index + 1);
    submit.onclick = additionalObject;
    document.getElementById('levels').appendChild(submit);

    var objectdiv = document.createElement("div");
    objectdiv.id = "objects_level" + (index + 1);
    objectdiv.className = 'objects_level';
    document.getElementById('levels').appendChild(objectdiv);

  }

}

function additionalObject() {
  //console.log(Number(this.id.replace("submit", "")));
  var pos = Number(this.id.replace("submit", ""));
  var number = document.getElementById('number_objects' + pos).value;
  for (let index = 0; index < number; index++) {
    var objects_number = document.createElement("p");
    objects_number.innerHTML = "Object " + (index + 1);
    document.getElementById("objects_level" + pos).appendChild(objects_number);

  }

}

.levels {
  padding-left: 20px;
}

.objects_level {
  padding-left: 40px;
}

<h3>Level</h3>
<form action="/" method="get">
  <input type='number' name='number_of_levels' id='number_of_levels' />
  <button type='button' id='levels_btn' onclick='generateForm()' />Levels</button>
  <div id='levels' class='levels'></div>
  <br><br>
  <button type="submit">Submit Form</button>
</form>

您可以阅读文章 https://www.w3schools.com/tags/att_form_action.asp了解操作如何根据检索数据进行工作