前端在javascript中获取表单字段作为数组答案

【问题标题】：Frontend get form fields as array in javascript前端在javascript中获取表单字段作为数组
【发布时间】：2020-07-23 03:57:44
【问题描述】：

我有几个同名输入的 html 表单，我想从 javascripts 作为数组的字段中获取所有值。

<form id="myForm">
    <table class="table"> 
        <thead>
            <tr>
                <th>Val 1</th>
                <th>Val 2</th>
                <th>Val 3</th>
                <th>Val 4</th>
                <th>Val 5</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td><input type="text" name="val_1" value="someVal"></td>
                <td><input type="text" name="val_2" value="someVal"></td>
                <td><input type="text" name="val_3" value="someVal"></td>
                <td><input type="text" name="val_4" value="someVal"></td>
                <td>
                    <select name="val_5">
                        <option value="1">One</option>
                        <option value="2">Tow</option>
                    </select>
                </td>
            </tr>
        </tbody>
    <table>
</form>

表单表有 20 多个具有相同字段的 tr，我尝试使用 jquery serialize 和 serializeArray.. 但返回值不像我想要的那样。

我希望结果返回为：

[
0: {val: "value", val:"value"},
1: {val: "value", val:"value"}
and ......
]

更新： 是的，我可以将名称 attr 更改为从 1 开始循环到 100 例如： val_1 start val_100 end 或者如果有人有其他想法请分享，我不希望通过 PHP / jquery ajax 处理返回值 .. 但我想要结果返回为：

[
  0: {val_0: "text:, val_1: "text", val_2: "text", val_3: "text", val_4: "text"},
1: {val_5: "text:, val_6: "text", val_7: "text", val_8: "text", val_9: "text"},
2: {val_10: "text:, val_11: "text", val_12: "text", val_13: "text", val_14: "text"},
3: {val_15: "text:, val_16: "text", val_17: "text", val_18: "text", val_19: "text"},

and so on ....
]

通过这种方式，我可以在没有后端进程的情况下将结果处理到数据库

【问题讨论】：

如果您尝试将表单发送到后端服务，您可以使用FormData
你想要的结果不实用；数组的每个元素，每个对象都应该有唯一的键，而不是全部是val。
多个输入具有相同的name attributes?
@KarlL 是的，我的意思是名字 attr
你的在哪里尝试并尝试实现这一点？你应该总是展示一个，这不是代码编写服务！

标签： javascript jquery node.js

【解决方案1】：

如果您要为此表单的每一行查找 name/value 对象：

[
  {
    "val_1": "someVal0",
    "val_2": "someVal0",
    "val_3": "someVal0",
    "val_4": "someVal0",
    "val_5": "1"
  }, ....
]

你可以这样做：

var values = $('.table tbody > tr').map(function() {
    var obj = {};
    $(this).find(':input').each(function() {
        obj[this.name] = this.value;
    });
    return obj;
}).get();

console.log( values );

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="myForm">
    <table class="table"> 
        <thead>
            <tr>
                <th>Val 1</th>
                <th>Val 2</th>
                <th>Val 3</th>
                <th>Val 4</th>
                <th>Val 5</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td><input type="text" name="val_1" value="someVal0"></td>
                <td><input type="text" name="val_2" value="someVal0"></td>
                <td><input type="text" name="val_3" value="someVal0"></td>
                <td><input type="text" name="val_4" value="someVal0"></td>
                <td>
                    <select name="val_5">
                        <option value="1">One</option>
                        <option value="2">Tow</option>
                    </select>
                </td>
            </tr>
            <tr>
                <td><input type="text" name="val_1" value="someVal1"></td>
                <td><input type="text" name="val_2" value="someVal1"></td>
                <td><input type="text" name="val_3" value="someVal1"></td>
                <td><input type="text" name="val_4" value="someVal1"></td>
                <td>
                    <select name="val_5">
                        <option value="1">One</option>
                        <option value="2">Tow</option>
                    </select>
                </td>
            </tr>
            <tr>
                <td><input type="text" name="val_1" value="someVal2"></td>
                <td><input type="text" name="val_2" value="someVal2"></td>
                <td><input type="text" name="val_3" value="someVal2"></td>
                <td><input type="text" name="val_4" value="someVal2"></td>
                <td>
                    <select name="val_5">
                        <option value="1">One</option>
                        <option value="2">Tow</option>
                    </select>
                </td>
            </tr>
        </tbody>
    <table>
</form>

【讨论】：

谢谢你它正在工作我想要的，但我接受第一个答案。 :)
很好@ash，很高兴你找到了一个可行的解决方案。现在您已经选择了正确的答案，请随意为您认为有用的所有个答案投票。

【解决方案2】：

更新后

更新您的问题后，我认为您必须制作自己的脚本来获取这种特定格式的表单数据。您可以像这样迭代表单元素并通过父行的位置获取索引：

var $element, name, rowIndex,
  $formElements = $('#myForm').find('input, select, textarea'),
  result = [];

for (var element of $formElements) {
  $element = $(element);

  rowIndex = $element.closest('tr').index();
  name = $element.attr('name').replace('[', '').replace(']', '');

  if (typeof result[rowIndex] == 'undefined') {
    result[rowIndex] = {};
  }

  result[rowIndex][name] = $element.val();
}

console.log(result);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<form id="myForm">
  <table class="table">
    <thead>
      <tr>
        <th>Val 1</th>
        <th>Val 2</th>
        <th>Val 3</th>
        <th>Val 4</th>
        <th>Val 5</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td><input type="text" name="val_0[]" value="someVal 00"></td>
        <td><input type="text" name="val_1[]" value="someVal 01"></td>
        <td><input type="text" name="val_2[]" value="someVal 02"></td>
        <td><input type="text" name="val_3[]" value="someVal 03"></td>
        <td>
          <select name="val_4[]">
            <option value="01">One</option>
            <option value="02">Tow</option>
          </select>
        </td>
      </tr>
      <tr>
        <td><input type="text" name="val_0[]" value="someVal 10"></td>
        <td><input type="text" name="val_1[]" value="someVal 11"></td>
        <td><input type="text" name="val_2[]" value="someVal 12"></td>
        <td><input type="text" name="val_3[]" value="someVal 13"></td>
        <td>
          <select name="val_4[]">
            <option value="11">One</option>
            <option value="12">Tow</option>
          </select>
        </td>
      </tr>
    </tbody>
  </table>
</form>

原创

首先你不能创建具有重复属性的对象，每个属性都必须获得唯一的名称。但是您可以简单地在输入元素的名称属性中使用数组。然后你可以序列化这些元素并将其放入一个 ajax 请求中。

var $myForm = $('#myForm'),
  serialized = $myForm.serialize();

// replaces are just used for showing
console.log(
  serialized.replace(new RegExp('%5B', 'g'), '[').replace(new RegExp('%5D', 'g'), ']')
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<form id="myForm">
  <table class="table">
    <thead>
      <tr>
        <th>Val 1</th>
        <th>Val 2</th>
        <th>Val 3</th>
        <th>Val 4</th>
        <th>Val 5</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td><input type="text" name="val_1[]" value="someVal"></td>
        <td><input type="text" name="val_2[]" value="someVal"></td>
        <td><input type="text" name="val_3[]" value="someVal"></td>
        <td><input type="text" name="val_4[]" value="someVal"></td>
        <td>
          <select name="val_5[]">
            <option value="1">One</option>
            <option value="2">Tow</option>
          </select>
        </td>
      </tr>
      <tr>
        <td><input type="text" name="val_1[]" value="someVal"></td>
        <td><input type="text" name="val_2[]" value="someVal"></td>
        <td><input type="text" name="val_3[]" value="someVal"></td>
        <td><input type="text" name="val_4[]" value="someVal"></td>
        <td>
          <select name="val_5[]">
            <option value="1">One</option>
            <option value="2">Tow</option>
          </select>
        </td>
      </tr>
    </tbody>
  </table>
</form>

上面的例子应该在 PHP 中产生这个结果：

array(5) {
  ["val_1"]=> array(2) {
    [0]=> string(7) "someVal"
    [1]=> string(7) "someVal"
  }
  ["val_2"]=> array(2) {
    [0]=> string(7) "someVal"
    [1]=> string(7) "someVal"
  }
  ["val_3"]=> array(2) {
    [0]=> string(7) "someVal"
    [1]=> string(7) "someVal"
  }
  ["val_4"]=> array(2) {
    [0]=> string(7) "someVal"
    [1]=> string(7) "someVal"
  }
  ["val_5"]=> array(2) {
    [0]=> string(1) "1"
    [1]=> string(1) "1"
  }
}

另一种可能性：但是如果您需要在 jQuery 中获得描述的结果，您必须编写类似的代码：

var element, index,
  $myForm = $('#myForm'),
  serialized = $myForm.serializeArray(),
  serializedLength = serialized.length,
  finalResult = [];

for (var i = 0; i < serializedLength; i++) {
  element = serialized[i];
  index = parseInt(element.name.replace('val_', '').replace('[', '').replace(']', ''));

  if (typeof finalResult[index] == 'undefined') {
    finalResult[index] = [];
  }

  finalResult[index].push(serialized[i].value);
}

console.log(finalResult);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<form id="myForm">
  <table class="table">
    <thead>
      <tr>
        <th>Val 1</th>
        <th>Val 2</th>
        <th>Val 3</th>
        <th>Val 4</th>
        <th>Val 5</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td><input type="text" name="val_0[]" value="someVal 00"></td>
        <td><input type="text" name="val_1[]" value="someVal 01"></td>
        <td><input type="text" name="val_2[]" value="someVal 02"></td>
        <td><input type="text" name="val_3[]" value="someVal 03"></td>
        <td>
          <select name="val_4[]">
            <option value="01">One</option>
            <option value="02">Tow</option>
          </select>
        </td>
      </tr>
      <tr>
        <td><input type="text" name="val_0[]" value="someVal 10"></td>
        <td><input type="text" name="val_1[]" value="someVal 11"></td>
        <td><input type="text" name="val_2[]" value="someVal 12"></td>
        <td><input type="text" name="val_3[]" value="someVal 13"></td>
        <td>
          <select name="val_4[]">
            <option value="11">One</option>
            <option value="12">Tow</option>
          </select>
        </td>
      </tr>
    </tbody>
  </table>
</form>

【讨论】：

@UfguFgullu 谢谢，我可以很容易地用 PHP 做到这一点，但我在前端开发和处理方面不是那么好，你的代码将全部返回为 10+ 个数字数组，这意味着每个字段都是 1 个数组但我希望结果返回 1 个包含 5 个值的数组作为对象。
@ash 首先，PHP 中的结果数组应该和$_POST 变量提交后的样子一样，不是转换代码。你能告诉我为什么你需要将结果作为一个对象吗？正如我在回答中所说，您可能可以为此使用对象，但是您必须为属性选择不同的名称，这在之后变得非常复杂。请告诉我，如果您不能有重复的属性，您的结果应该是什么样子？
感谢回复我不需要用 PHP 处理结果，是的，我可以将名称 attr 更改为从 1 到 100 循环 val_1 > val_100 现在它改变了，我想要的返回值我在原始问题。我再次更新我的问题
@ash 我已经更新了我的答案，在顶部你可以看到一个可能的解决方案。
在我的情况下，我正在从一些未知原因函数中动态加载表单数据，将第一个 tr 设为未定义，我在 for 循环之后添加 if 条件现在它正在工作.. 谢谢