如何使用JSON从动态生成的表单中获取值

Question

I have created a form using the JSON data, but when I'm trying to add eventlisteners to the created elements, I am unable to get the values of the form generated dynamically. 我使用JSON数据创建了一个表单，但是当我尝试将eventlisteners添加到创建的元素时，我无法获取动态生成的表单的值。 The form contains various input types based on the JSON data. 表单包含基于JSON数据的各种输入类型。 Any help would be appreciated. 任何帮助，将不胜感激。 Here is the form I tried to create. 这是我试图创建的表单。

 var data = { "id": 6, "form_name": "Some form", "is_archived": false, "form_fields": [ { "id": "5cc318416403f", "label": "Name", "options": [ "" ], "required": true, "field_type": "textbox" }, { "id": "5cc318416404a", "label": "Date", "options": [ "" ], "required": false, "field_type": "date" }, { "id": "5cc318416404d", "label": "What steps did you take?", "options": [ "run","jump","walk" ], "required": true, "field_type": "checkbox" }, { "id": "5cc318416404f", "label": "Contact details", "options": [ "" ], "required": false, "field_type": "textbox" }, { "id": "5cc318416406v", "label": "Gender details", "options": [ "Male","Female" ], "required": false, "field_type": "radio" } ], "created_on": "2019-04-26" } var div = $(".wrapper"); var total_fields = Object.keys(data.form_fields).length; div.append("<h1>" + data.form_name + '</h1><hr width="70%">'); var ids = []; for (var i = 0; i < total_fields; i++) { //console.log(data.form_fields[i].options.length); var form_wrapper = jQuery("<div/>", { class: "row" }).appendTo(".wrapper"); //form_wrapper.append("<form>"); form_wrapper.append( '<div class="col-25"><label>' + data.form_fields[i].label + "</label></div>" ); var type = data.form_fields[i].field_type; if (type == "checkbox") { if (data.form_fields[i].options.length > 1) { for (var j = 0; j < data.form_fields[i].options.length; j++) { form_wrapper.append( '<div class="col-75"><input class="floatLabel" name="' + data.form_fields[i].label + '" id = "' + data.form_fields[i].id + '" type = ' + data.form_fields[i].field_type + ">" + data.form_fields[i].options[j] + "</input></div>" ); } } $('#'+data.form_fields[i].id).on('input', function() { // do your stuff console.log("changing"); }); //values.push(); } else if (type == "textarea") { form_wrapper.append( '<div class="col-75"><textarea id="'+data.form_fields[i].id+'" placeholder = "' + data.form_fields[i].label + '"></textarea></div>' ); //values.push($("#"+data.form_fields[i].id).val()); } else if (type == "radio") { var radio_value ; if (data.form_fields[i].options.length > 1) { for (var j = 0; j < data.form_fields[i].options.length; j++) { form_wrapper.append( '<div class="col-75"><input class="floatLabel" value="'+ data.form_fields[i].options[j] +'" name="' + data.form_fields[i].label + '" type = ' + data.form_fields[i].field_type + ">" + data.form_fields[i].options[j] + "</input></div>" ); } } } else { form_wrapper.append( '<div class="col-75"><input class="floatLabel" required="' + data.form_fields[i].required + '" id = "' + data.form_fields[i].id + '" type = ' + data.form_fields[i].field_type + "></div>" ); $('#'+data.form_fields[i].id).on('input', function() { // do your stuff console.log("changing"); }); } ids.push(data.form_fields[i].id); } form_wrapper.append( '<br><input type="submit" id="form_submit" class="sbutton">' ); $('#form_submit').click(function(){ //console.the values. });

 <!DOCTYPE html> <html> <script src="https://code.jquery.com/jquery-3.1.0.js"></script> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>JS Bin</title> </head> <body> <div class="wrapper"> </div> </body> </html>

Answer 1

When I do things like that, I always use appendTo() instead of append() : 当我做这样的事情时，我总是使用appendTo()而不是append() ：

let $field = $('<div class="col-25"><label>' + data.form_fields[i].label + "</label></div>");
$field.on("change", function() { ... });
form_wrapper.append($field);

By creating an element with $('<html>') you have the newly created element's reference to bind it any event you may like, then you can appendTo() the target element( form_wrapper ) in your case. 通过使用$('<html>')创建一个元素，您可以使用新创建的元素引用将任何您喜欢的事件绑定到它，然后您可以在您的情况下appendTo()目标元素（ form_wrapper ）。

如何使用JSON从动态生成的表单中获取值

问题描述

1 个解决方案

解决方案1
0 2019-04-26 16:57:04

如何使用JSON从动态生成的表单中获取值

问题描述

1 个解决方案

解决方案1 0 2019-04-26 16:57:04

解决方案1
0 2019-04-26 16:57:04