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);
}

我得到的结果是该表单不会生成任何Object表单元素，但会生成Levels。

Answer 1

对于构建表单，此代码可以正常工作。如果要检索数据，则应在name属性中添加要检索的数据。

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，以了解如何根据动作从数据中检索数据

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

1 个答案: