如何使用 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

我建議您看一下模式到表單的庫（例如，此處的如何從json模式創建表單中描述的庫）。

使用此類庫有很多好處，其中一些是靈活的布局功能以及驗證掛鈎。

而且，您的編輯器僅需使用JSON結構，從中渲染表單並不是您的主要頭疼。

Answer 3

我使用 JQuery、HTML 和 Bootstrap 做到了這一點

該表單被構建為盡可能動態，並且還對我進行了修改

有一個腳本可以通過ajax提交表單

 function d(object) { const id = $(object).data('check'); $('#' + id).remove(); } //picks and submits form inputs $(document).ready(function() { $('form.myForm').on('submit', function() { var that = $(this), url = that.attr('action'), type = that.attr('method'), data = {}; that.find('[name]').each(function(index, value) { var that = $(this), name = that.attr('name'), value = that.val(); data[name] = value; }); $.ajax({ url: url, type: type, data: data, success: function(response) { } }); return false; }); }); $(function() { //here i will populate the appendi field if the user selects file //the user should select the file type $('#type').on('change', function() { let type = $("#type option:selected").val(); var add; if (type === 'file') { //here i will append the new option in the appendi part add = "<label for=\\"\\">What type of file?</label>"; add += "<select name=\\"image_type\\" id=\\"\\" class=\\"form-control\\">"; add += "<option value=\\"all\\">All</option>"; add += "<option value=\\"image\\">Image</option>"; add += "<option value=\\"document\\">Document</option>"; add += "</select>"; $('#appendi').html(add); } if (type === 'radio' || type === 'checkbox') { //here i will append the new option in the appendi part add = "<label for=\\"\\">Enter the names of the option separated by a comma (,)</label>"; add += "<textarea col=\\"\\" class=\\"form-control\\" row=\\"\\" name=\\"options\\" required></textarea>"; $('#appendi').html(add); } if (type === 'paragraph' || type === 'text') { $('#appendi').empty(); } }) }) $(document).ready(function() { $('form.myInput').on('submit', function() { var that = $(this), data = {}; that.find('[name]').each(function(index, value) { var that = $(this), name = that.attr('name'), value = that.val(); data[name] = value; }); addBody(data); return false; }); }); function addBody(data) { //first thing first is to generate an outer shell let id_tag = "shell_" + generateId(8); let shell1_open = "<div class='form-group' " + "id = '" + id_tag + "'>"; shell1_open += "<button type='button' onclick='d(this)' id=\\"delete\\" data-check='" + id_tag + "'><i class=\\"fa-minus-square\\">remove</i></button>" let shell1_close = "</div>"; let shell2, label, shell2_close; if (data.type === 'text' || data.type === 'date' || data.type === 'file' || data.type === 'email') { shell2 = "<input type='"; shell2 += data.type + "'"; shell2_close = ">"; } if (data.type === 'paragraph') { shell2 = "<textarea"; shell2_close = "></textarea>"; } if (data.type === 'radio') { let myArr = data.options.split(","); shell2 = ''; let name = 'input_' + generateId(5) + '_' + data.name.replace(/\\s+/g, ''); for (let i = 0; i < myArr.length; i++) { shell2 += "<input type='radio'"; shell2 += "value ='" + myArr[i] + "'"; shell2 += "name ='" + name + "'"; //add a class to it shell2 += " class = 'form-control'"; if (data.required === 'yes') { shell2 += " required"; } shell2 += ">" + myArr[i]; } shell2_close = ""; } if (data.type === 'checkbox') { let myArr = data.options.split(","); shell2 = ''; for (let i = 0; i < myArr.length; i++) { shell2 += "<input type='checkbox'"; shell2 += "value ='" + myArr[i] + "'"; shell2 += " name='" + 'input_' + generateId(5) + '_' + data.name.replace(/\\s+/g, '') + "'"; //add a class to it shell2 += " class = 'form-control'"; if (data.required === 'yes') { shell2 += " required"; } shell2 += ">" + myArr[i]; } shell2_close = ""; } if (data.image_type) { if (data.image_type === 'all') { shell2 += " accept"; } if (data.image_type === 'image') { shell2 += " accept='.jpeg, .png'"; } if (data.image_type === 'document') { shell2 += " accept='.pdf, .xls, .docx'"; } } if (data.type !== 'radio' && data.type !== 'checkbox') { if (data.required === 'yes') { shell2 += " required"; } /** * after thinking i decided to map the name the user chose to the placeholder/label * and squash the name to get the input name, so to remove whitespaces * also i'll append input_ to all input names */ shell2 += " name='" + 'input_' + generateId(5) + '_' + data.name.replace(/\\s+/g, '') + "'"; //add a class to it shell2 += " class = 'form-control'"; //add placeholder shell2 += " placeholder = '" + data.name + '\\''; } $('#main-form-body').append(shell1_open + shell2 + shell2_close + shell1_close) //console.log(shell1_open + shell2 + shell2_close +shell1_close); } function dec2hex(dec) { return dec.toString(16).padStart(2, "0") } // generateId :: Integer -> String function generateId(len) { var arr = new Uint8Array((len || 40) / 2) window.crypto.getRandomValues(arr) return Array.from(arr, dec2hex).join('') }

 <html> <head> <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css"> <script src="//ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script> </head> <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal"> Add input </button> <form action="" method="post" class="myForm"> <div id="main-form-body"> </div> <button type='submit'>Submit</button> </form> <!-- The Modal --> <div class="modal" id="myModal"> <div class="modal-dialog"> <div class="modal-content"> <!-- Modal Header --> <div class="modal-header"> <h4 class="modal-title">Add form input</h4> <button type="button" class="close" data-dismiss="modal">&times;</button> </div> <form action="" method="get" class="myInput"> <!-- Modal body --> <div class="modal-body"> <div class="form-group"> <label for="">What should this be called?</label> <input type="text" name="name" class="form-control"> </div> <div class="form-group"> <label for="">What type of data will it hold?</label> <select name="type" id="type" class="form-control"> <option value="text">Text</option> <option value="paragraph">Paragraph</option> <option value="file">File</option> <option value="radio">Radio</option> <option value="checkbox">Checkbox</option> <option value="date">Date</option> </select> </div> <div class="form-group" id="appendi"> </div> <div class="form-group"> <label>Should it be a required field?</label> <select name="required" id="" class="form-control"> <option value="yes">yes</option> <option value="no">no</option> </select> </div> </div> <!-- Modal footer --> <div class="modal-footer"> <button type="submit" class="btn btn-primary">Add</button> <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button> </div> </form> </div> </div> </div> </html>

Answer 4

在此處輸入圖像描述您可以使用此表單生成器.. 它在 github 中可用

https://github.com/vimal33329/Formbuilder

直播 url 鏈接https://vimal33329.github.io/Formbuilder/

if you already familiar with github use git clone below code https://github.com/vimal33329/Formbuilder.git

或者點擊下面的鏈接下載源文件...

https://github.com/vimal33329/Formbuilder/archive/refs/heads/main.zip

Answer 5

帶有報告的表單創建表單、構建表單、啟用或禁用表單提交、動態選項創建、在報告頁面中查看表單報告、拖放 position 更改...

https://vimal-form.herokuapp.com

在此處輸入圖像描述

在此處輸入圖像描述

在此處輸入圖像描述

在此處輸入圖像描述