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

Question

我已经使用 JSON 数据创建了一个表单，但是当我尝试添加eventlisteners到创建的元素时，我无法获取动态生成的表单的值。该表单包含基于 JSON 数据的各种输入类型。任何帮助，将不胜感激。这是我尝试创建的表格。

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>

标签： javascriptjqueryhtml

Answer 1

当我做这样的事情时，我总是使用appendTo()而不是append()：

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

通过创建一个元素，$('<html>')您可以使用新创建的元素的引用来绑定您可能喜欢的任何事件，然后您可以在您的情况下appendTo()使用目标元素（form_wrapper）。