如何使用jquery构建动态表单构建器

Question

我想用jquery开发一个动态表单构建器，用户可以在其中构建自己的表单并更改表单名称，输入类型，大小等。我知道有一些很酷的拖放在线表单构建器但是我想开发一个非常好的简单的表单构建器。

我已经开始开发这个，我正面临一些问题。

当用户点击标签（输入字段）时，它会使用带编辑和删除按钮的jquery动态创建输入字段。

下面的代码是在div中附加输入字段，现在为空。

$(document).ready(function() {
  $(".text").click(function(){
    $("#textInput").append('<input class="form-control"  type="text">' + '<input class="btn btn-default" type="button" value="Edit" id="editbtn"><input class="btn btn-default"  type="button" value="Delete" >'             ).show().css('display', 'block')});
});


    

.items {
  border: 1px solid lightgray; 
  display: none;  
  padding: 0 10px 10px 10px;
  }

<div class="items" id="textInput">
  <h3>Your Form</h3>
  <hr>    
</div>

单击文本输入时，我想显示一个表格或模式，用户可以将更改保存到输入字段，首先编辑按钮不起作用，其次是如何编辑和保存对输入字段的更改（过程如何工作） ）。

这就是我想要实现的目标

Answer 1

我一直在研究动态表单构建器，并从一些优秀的开源解决方案中借鉴了一些想法。

他们是这样做的：

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

jsonform/jsonform

源代码：jsonform/jsonform

示例：

rjsf-team/react-jsonschema-form

源代码：https://github.com/rjsf-team/react-jsonschema-form

Answer 2

我建议您查看架构到表单的库（例如，此处How to Create a form from a json-schema?中描述的一些库）。

使用此类库有许多好处，其中一些是灵活的布局功能，以及验证挂钩。

此外，您的编辑器必须仅使用JSON结构，并且从中呈现表单不是您的主要头痛。