动态表单创建和添加输入字段答案

【问题标题】：Dynamic form creation and adding input fields动态表单创建和添加输入字段
【发布时间】：2020-02-29 17:53:41
【问题描述】：

我目前正在开发一个在线测验创建系统的项目，该系统应该具有让用户创建自己的测验、问题和可能的答案，然后将它们发送给其他用户以便他们解决测验的功能。我使用 c# 作为后端。我面临的问题是在测验中动态创建问题和可能的答案。我不知道如何创建动态表单，以便用户可以创建问题并添加可能的答案。我希望用户能够创建这样的问题：

问题一：美国第一任总统是谁？

a) 约翰·亚当斯

b)托马斯·杰斐逊

c) 乔治·华盛顿

添加答案

创建另一个问题

如果用户决定再添加一个可能的答案，他会按“添加答案”。当他按下“创建另一个问题”时，它应该创建一个空表单来输入他的问题并添加可能的答案。

问题一：美国第一任总统是谁？

a) 约翰·亚当斯

b) 托马斯·杰斐逊

c) 乔治·华盛顿

d) 某位总统

添加答案

创建另一个问题

有没有人做过类似的事情？我已经搜索了一段时间，但找不到我需要的东西。我不是在寻找一个完整的代码解决方案，只是一些帮助，以便我可以继续我的项目。

非常感谢您的宝贵时间。

【问题讨论】：

标签： javascript c# asp.net ajax forms

【解决方案1】：

如果您可以指定是否使用像 Angular 这样的任何 js 框架，这将更容易提供示例，但由于不是这样，我在 vanilla js 中创建了相同的函数，这将有助于添加动态字段功能。

function addAnswerFields(){

   //Get reference of container and append Text in it
   var container = document.getElementById("container");
   container.appendChild(document.createTextNode("Answer "));

   //Get reference of container and append Input field in it
   var input = document.createElement("input");
   input.type = "text";
   container.appendChild(input);

   // Add Br tag to move input fields on next line
   container.appendChild(document.createElement("br"));
}

当用户点击创建另一个问题时，会弹出一个字段供他输入答案。此外，建议您可以在该字段的右侧添加一个按钮。单击按钮后，字段将替换为 P 标签或您用来将其显示为答案的任何其他标签。希望这会有所帮助！

【讨论】：