时间戳

首页 > 解决方案 > 动态表单创建和添加输入字段

javascript - 动态表单创建和添加输入字段

问题描述

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

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

a) 约翰亚当斯

b) 托马斯·杰斐逊

c) 乔治华盛顿

添加答案

创建另一个问题

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

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

a) 约翰亚当斯

b) 托马斯·杰斐逊

c) 乔治华盛顿

d) 一些总统

添加答案

创建另一个问题

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

非常感谢您的参与。

标签： javascriptc#asp.netajaxforms

解决方案

如果您可以指定是否使用像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 标签或您用来将其显示为答案的任何其他标签。希望这可以帮助！

推荐阅读