从表单字段创建JSON-jQuery

debugcn 发表于 Dev

斯托伊洛夫

我想做的是从html表单创建JSON。然后使用此脚本（Formulator- https://github.com/walpolea/Formulator）对其进行可视化。

我可以使用serializeArray()将值和名称导出到JSON。但是，为了使Formulator正常工作，我必须创建具有如下所示特定结构的JSON。

{
   "custom1":"some value",
   "custom2":"some value",
   "inputs":[
      {
         "label":{
            "content":"Input: ",
            "class":"inputLabel"
         },
         "id":"first_name",
         "name":"first_name",
         "type":"text",
         "size":"50"
      },
      {
         "label":{
            "content":"Select: ",
            "class":"inputLabel"
         },
         "id":"FirstSelect",
         "name":"FirstSelect",
         "type":"select",
         "options":[
            {
               "value":"One"
            },
            {
               "value":"Two"
            }
         ]
      },
      {
         "label":{
            "content":"Checkboxes: ",
            "class":"inputLabel"
         },
         "id":"checkbox",
         "name":"somevalue",
         "type":"checkbox",
         "options":[
            {
               "value":"Dog",
               "name":"pet"
            },
            {
               "value":"Cat",
               "name":"pet"
            },
            {
               "value":"Bird    ",
               "name":"pet"
            }
         ]
      },
      {
         "id":"submit",
         "name":"submit",
         "type":"submit",
         "value":"Submit"
      }
   ]
}

我的问题出在"inputs":[]JSON部分。我不知道该怎么做。同样，在选择元素的情况下，它必须采用所有选项，而不仅仅是选择的选项。复选框也同样有效。

这是演示： https : //jsfiddle.net/largan/avz672s4/71/

$(document).ready(function() {
        $('#submit').on('click', function () {
            $('#result').html('');
                $('#result').append(
                    $('<pre>').text(JSON.stringify(_get_values($('#form')), null, 2))
      )
      event.preventDefault();
                });
            });
function _get_values(form)
        {
            let data = {
      "custom1":"some value",
        "custom2":"some value"
      };
            $(form).find('input, textarea, select').each(function(x, field) {

                    if (field.name) {
                        if (field.name.indexOf('[]') > 0) {
                            if (!$.isArray(data[field.name])) {
                                data[field.name] = new Array();
                                data['type'] = 'select';
                            }
                            for (let i = 0; i < field.selectedOptions.length; i++) {
                                data[field.name].push(field.selectedOptions[i].value);
                            }
                        } else {
                            data[field.name] = field.value;
              data['type'] = 'input';
                        }
                    }
            });
            return data
        }

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Convert form to JSON</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"> </script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"> </script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"> </script>
    <script src="https://code.jquery.com/jquery-1.11.3.js"> </script>
    <script src="https://code.jquery.com/ui/1.11.3/jquery-ui.js"> </script>
</head>
<body>
<div class="container">
  <h2>Form to JSON</h2>
  <p></p>
  <form id="form">
    <div class="form-group">
      <label for="first_name" class="inputLabel">Input:</label>
      <input type="text" name="first_name" id="first_name" class="form-control" size="50">
      <br>
      <label for="select" class="inputLabel">Select:</label>
      <select multiple class="form-control" id="FirstSelect" name="FirstSelect[]" size="2">
        <option>One</option>
        <option>Two</option>
      </select>
      <br>
      <label for="select" class="inputLabel">Select:</label>
      <select multiple class="form-control" id="SecondSelect" name="SecondSelect[]" size="3">
        <option>3</option>
        <option>4</option>
        <option>5</option>
      </select>
      <br>
      <label for="pet" class="inputLabel">Checkboxes:</label>

<div class="form-check-inline">
      <input type="checkbox" id="checkbox[]" name="pet" value="Dog" /> Dog 
      </div>
<div class="form-check-inline">
      <input type="checkbox" id="checkbox[]" name="pet" value="Cat" /> Cat 
      </div>
<div class="form-check-inline">
      <input type="checkbox" id="checkbox[]" name="pet" value="Bird" /> Bird 
      </div>
    </div>
      <button id="submit" name="submit" type="submit"  class="btn btn-primary">Submit</button>

  </form>

<p></p>
  <div class="alert alert-info" id="result" ></div>

</div>

</body>
</html>

我要实现的是单击“提交”后创建所需的JSON。

斯瓦蒂

您首先需要检查输入是否在json数组中，然后使用创建新的JSON对象，{}并使用与其他值相同的值向该JSON对象添加值yourjsonname["value"]="something"。现在，要遍历所有内容，checkboxes您需要使用一些循环，然后使用$(this).val()将该值推送到json上，该json是在select-box相同的操作之前创建的。

演示代码：

$(document).ready(function() {
  $('#submit').on('click', function() {
    $('#result').html('');
    $('#result').append(
      $('<pre>').text(JSON.stringify(_get_values($('#form')), null, 2))
    )
    event.preventDefault();
  });
});

function _get_values(form) {
  let dataa = {
    "custom1": "some value",
    "custom2": "some value"
  };
  //create input json array
  dataa['input'] = new Array();

  $(form).find('input, textarea, select').each(function(x, field) {

    if (field.id) {
      if (field.id.indexOf('[]') > -1) {
        //check if the input exist inside json array
        var existss = $(dataa.input)
          .filter(function(i, n) {
            return n.id === field.id;
          });
        //if not exist
        if (typeof existss[0] == 'undefined') {
          var label = {}; //for label
          var data = {}; //for other data
          data['type'] = field.type;
          data['name'] = field.name;
          data['id'] = field.id;
          data["options"] = new Array();
          if (field.type == "select-multiple") {

            ///add value for label and option
            label["content"] = $(this).prev("label").attr("for")
            label["class"] = $(this).prev("label").attr("class")
            for (let i = 0; i < field.length; i++) {
              var option_inside = {}; //create json object
              option_inside["value"] = field[i].value;
              data["options"].push(option_inside) //push in main array
            }
          }
          if (field.type == "checkbox") {
            //add value for checkeboxs and labl
            label["content"] = $(this).closest("div").prev("label").attr("for")
            label["class"] = $(this).closest("div").prev("label").attr("class")

            $("input[name=" + field.name + "]").each(function() {
              var option_inside = {}; //create json objct
              option_inside["value"] = $(this).val();
              option_inside["name"] = field.name;
              data["options"].push(option_inside) //push option in main array(options)
            })

          }
          data["label"] = label //add label created
          dataa['input'].push(data) //finally push created json to main json array

        }

      } else {
        //add value and label 
        var label = {};
        label["content"] = $(this).prev("label").attr("for")
        label["class"] = $(this).prev("label").attr("class")
        var data = {}
        data["label"] = label
        data[field.name] = field.name;
        data['type'] = 'input';
        data['id'] = field.id;
        data['size'] = field.size;
        dataa['input'].push(data)
      }
    }
  });
  return dataa
}

<!DOCTYPE html>
<html lang="en">

<head>
  <title>Convert form to JSON</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
  </script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js">
  </script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js">
  </script>
  <script src="https://code.jquery.com/jquery-1.11.3.js">
  </script>
  <script src="https://code.jquery.com/ui/1.11.3/jquery-ui.js">
  </script>
</head>

<body>
  <div class="container">
    <h2>Form to JSON</h2>
    <p></p>
    <form id="form">
      <div class="form-group">
        <label for="first_name" class="inputLabel">Input:</label>
        <input type="text" name="first_name" id="first_name" class="form-control" size="50">
        <br>
        <label for="select" class="inputLabel">Select:</label>
        <select multiple class="form-control" id="FirstSelect[]" name="FirstSelect[]" size="2">
          <option>One</option>
          <option>Two</option>
        </select>
        <br>
        <label for="select" class="inputLabel">Select:</label>
        <select multiple class="form-control" id="SecondSelect[]" name="SecondSelect[]" size="3">
          <option>3</option>
          <option>4</option>
          <option>5</option>
        </select>
        <br>

        <label for="pet" class="inputLabel">Checkboxes:</label>

        <div class="form-check-inline">
          <input type="checkbox" id="checkbox[]" name="pet" value="Dog" /> Dog
        </div>
        <div class="form-check-inline">
          <input type="checkbox" id="checkbox[]" name="pet" value="Cat" /> Cat
        </div>
        <div class="form-check-inline">
          <input type="checkbox" id="checkbox[]" name="pet" value="Bird" /> Bird
        </div>
      </div>
      <button id="submit" name="submit" type="button" class="btn btn-primary">Submit</button>

    </form>

    <p></p>
    <div class="alert alert-info" id="result"></div>

  </div>

</body>

</html>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。