Question

主要目标：我想创建一个动态表单构建工具，允许用户选择某些选项，这些选项在选择后可以启用后续输入。

我所描述的一个例子：

文字输入：输入章节名称。
- 选择添加问题
  - 选择问题类型（多项选择，复选框等）
  - 输入问题。
- 选择添加新问题。如果是这样，请重复问题。步骤。
选择添加新章节。如果是这样，请重复添加问题。选项。
从上面提交整个内容，并导出（最终目标是按照这些guidelines进行解析/准备以供使用格式（但这要晚得多）。

到目前为止我所做的例子：JS Fiddle 注意：示例不完整。停下来是因为我意识到我正在构建一个混乱，并假设有一个更简单/更好的方法来做到这一点。

提前感谢您提供的任何帮助 - 我希望我很清楚！关

警告：我对编程/等方面比较陌生。也就是说，我觉得我已经搜索了很多，而且似乎没有太多关于这个问题（难点主要是问题的嵌套性质，在章节内）。

JS小提琴代码：

<title>Dynamically build FT survey</title>

<script language="javascript">

function addChap(name) {

    var element = document.createElement("li");
    element.innerHTML = name;

    var foo = document.getElementById("currentChapList");

    //Append the element in page (in span).
    foo.appendChild(element);

    // Update drop down select lists
    updateSelect();
}

function delChap() {

    var foo = document.getElementById("currentChapList");
    var allChildNodes = foo.childNodes;
    var lastElem = allChildNodes.length - 1;

    foo.removeChild(allChildNodes[lastElem]);

    // Update drop down select lists
    updateSelect();

}

function updateSelect() {

    // First delete everything in the Chapter selection list
    var currentChaps = document.getElementById("chapOptions");
    var newFoo = document.getElementById("currentChapList");

    for (i = 0; i < currentChaps.children.length; i++) { 
        currentChaps.remove(currentChaps.children[i]);
    }

    // Then re-add the remaining components from Chapter list
    for (i = 0; i < newFoo.children.length; i++) { 
        nfCont = newFoo.children[i].innerHTML;
        nfElem = document.createElement("option");
        nfElem.innerHTML = nfCont;
        currentChaps.appendChild(nfElem);
    }
}

function addAns() { 

    //Create an input type dynamically.
    var element = document.createElement("input");
    var foo = document.getElementById("lastAns");

    foo.appendChild(element);

}

function addQues() {
    var allQues = document.getElementById("questionSubSect");
    var newQues = document.createElement("div");
    newQues.innerHTML = allQues.innerHTML;

    //Append the element in page (in span).
    allQues.appendChild(newQues);
}

</script>
</head>

<body>

<b>Current Chapter Index</b>
<br>
<ol id="currentChapList">
</ol>
<input type="text" style="width:400px" value="Enter Chapter Name" id="newChapName"/><br>
<input type="button" value="Add Chapter" onclick="addChap(newChapName.value)"/>
<input type="button" value="Delete Last Chapter" onclick="delChap()"/>
<br>

<br>
<b>Dynamically add element in form.</b>
<br>
Select the element and hit Add to add it in form.
<br>

<br>
<b>Chapter Builder</b>
<br>

<form>
Chapter Select:
<select id="chapOptions"></select>
<br>

<div id="questionSubSect">
<br>
Question ID:
<input type="text" style="width:400px" value="Enter Question"/>
<br>

Question:
<input type="text" style="width:400px" value="Enter Question"/>
<br>

Question Type:
<select name="element">
    <option value="text">Checkbox</option>
    <option value="text">Multiple Choice</option>
    <option value="text">Open Text</option>
    <option value="number">Open Number</option>
    <option value="text">Ordered List</option>
    <option value="image">Picture</option>
    <option value="text">True or False</option>
</select>
<br>

Other open answer option:
<select name="element">
    <option value="text">False</option>
    <option value="text">True</option>
</select>
<br>

<br>
<span id="lastAns"></span>
<br>
<input type="button" value="Add Answer Option" onclick="addAns()"/>
<br>

<br>
</div>
<span id="lastQues"></span> 

<input type="button" value="Add New Question" onclick="addQues()"/>

</form>

</body>

Answer 1

我对动态表单做了一些调查。这里有一些优秀的开源解决方案。他们通常是这样做的：

在后端将表单结构描述为 JSON。
然后使用以下库之一在前端呈现 JSON 以形成表单。

jsonform/jsonform
React JSONSchema Form（反应）(demo)

动态表单生成器

1 个答案: