如何使用jQuery/JavaScript在表单提交上创建数据结构？_Javascript_Jquery_Html_Forms_Mongodb

如何使用jQuery/JavaScript在表单提交上创建数据结构？

javascript jquery html forms mongodb

如何使用jQuery/JavaScript在表单提交上创建数据结构？,javascript,jquery,html,forms,mongodb,Javascript,Jquery,Html,Forms,Mongodb,我试图获取表单输入值，并将它们放入一个对象数组中，然后发送到MongoDB。我正在努力解决的部分是如何在对象中获取数组（请参见下面代码中的注释） HTML: 下面是我目前使用的JavaScript和jQuery，我需要帮助的部分如下： var allInputs = []; //object constructor to put each "main input" and its "sub-inputs" into and object function input(mainInput, sub

我试图获取表单输入值，并将它们放入一个对象数组中，然后发送到MongoDB。我正在努力解决的部分是如何在对象中获取数组（请参见下面代码中的注释）

HTML:

下面是我目前使用的JavaScript和jQuery，我需要帮助的部分如下：

var allInputs = [];
//object constructor to put each "main input" and its "sub-inputs" into and object
function input(mainInput, subInputs){
  this.mainInput = mainInput;
  this.subInputs = subInputs;
};

$("button").click(function(event){
  //prevent form submit so data can be compiled:
  event.preventDefault();
  $("div h3").each(function(){
    var a = new input()
    a.mainInput = $(this).val();
    a.subInputs = "???"; //this is the part I am need help with. 
                         //It should be an array of the main input's sub-inputs.
    allInputs.push(a);
  });

  //check that all inputs are in array:
  alert(allInputs);

});

注意：我在这里使用H3s和H4s只是因为我发现使用jQuery更容易遍历，但是如果有更好或更简单的方法，请告诉我

代码笔链接：

提前感谢您的指导，非常感谢。

对于任何重复的html模块，您都可以通过在公共元素上使用公共类来简化。您基本上是使用标记名来为您创建类，但是这些标记的默认css/Behvior会限制这些类

<div class="data-row">
  Main Input: <input class="main" type="text">
  Sub-input 1:<input class="sub" type="text">
  Sub-input 2:<input class="sub" type="text">
  Sub-input 3:<input class="sub" type="text">
</div>

与任何重复的html模块一样，您可以通过在公共元素上使用公共类来简化。您基本上是使用标记名来为您创建类，但是这些标记的默认css/Behvior会限制这些类

<div class="data-row">
  Main Input: <input class="main" type="text">
  Sub-input 1:<input class="sub" type="text">
  Sub-input 2:<input class="sub" type="text">
  Sub-input 3:<input class="sub" type="text">
</div>

以下是使用您在问题中提到的方法的解决方案：

首先在html中添加一些类选择器，特别是在主输入中添加

main

，在子输入中添加

sub

然后从输入字段收集数据，使用1个主循环从主输入获取数据，然后使用嵌套循环从子输入获取数据。将此数据推送到一些变量，以便我们以后可以引用它

在主循环结束之前，我们调用

Input

constructor并传入存储在变量中的数据

这里有一个例子

代码如下：

function Input(mainInput, subInput){
  this.mainInput = mainInput;
  this.subInput = subInput;
}    

$("button").click(function(event){
  event.preventDefault();
  //Array of Input objects
  var inputArray = [];

  $(".main").each(function(){    
    var input = $('input', this).val();
    //Array of SubInput objects
    var arrayOfSubInputs = [];

    $(this).siblings().each(function() {
      var subInput = $(this).find('input').val();
      arrayOfSubInputs.push( subInput );      
    });
    //Now that our data is stored, we can call the constructors

    var input = new Input(input, arrayOfSubInputs);

    //Push the Input objects to the input array
    inputArray.push(input);
  });
    $('.results').empty();
  //Loop on each array index and append it to results as json
    $('.results').append(JSON.stringify(inputArray));
});

body {
  display: flex;
}
aside {
  max-width: 35%;
  margin: 15px;
  display: flex;
  flex-direction: column;
}

code {
  display: block;
  overflow: hidden;
  max-width: 100%;
}
form {
  display: inline-block;
}
div {
  display: inline-block;
  padding: 20px;
  margin: 3px;
  border: 1px solid #e0e0e0;
}
button {
  height: 30px;
  display: flex;
  margin: auto;
}
input {
  display: flex;
}

HTML

<form>
  <div>
    <h3  class="main">Main Input:<input type="textbox"></h3>
    <h4  class="sub">Sub-input 1:<input type="textbox"></h4>
    <h4  class="sub">Sub-input 2:<input type="textbox"></h4>
    <h4 class="sub">Sub-input 3:<input type="textbox"></h4>
  </div>
     <div>
    <h3  class="main">Main Input:<input type="textbox"></h3>
    <h4  class="sub">Sub-input 1:<input type="textbox"></h4>
    <h4  class="sub">Sub-input 2:<input type="textbox"></h4>
    <h4 class="sub">Sub-input 3:<input type="textbox"></h4>
  </div>
    <div>
    <h3  class="main">Main Input:<input type="textbox"></h3>
    <h4  class="sub">Sub-input 1:<input type="textbox"></h4>
    <h4  class="sub">Sub-input 2:<input type="textbox"></h4>
    <h4 class="sub">Sub-input 3:<input type="textbox"></h4>
  </div>
  <hr>
  <button type="submit">Submit</button>
</form>
<aside><h3>Results:</h3>
  <code class="results"></code>
</aside>