处理表单的数据结果

Question

我想在提交之前更改表单数据的结果,但我正在努力处理我的脚本

我的HTML

<form>
    <table>
        <tr class="row_1">
            <td>
                <input name="flavour_1" type="text"><br>
                <input name="flavour_2" type="text">
            </td>
            <td>
                <input name="taste_1" type="text"><br>
                <input name="taste_2" type="text">
            </td>
        </tr>
        <tr class="row_2">
            <td>
                <input name="flavour_1" type="text"><br>
                <input name="flavour_2" type="text">
            </td>
            <td>
                <input name="taste_1" type="text"><br>
                <input name="taste_2" type="text">
            </td>
        </tr>
    </table>
    <button type="button" id="serForm">Serialize Form </button>
</form>

使用Javascript:

$("#serForm").on('click', function() {

    var db = $("form").serializeArray();

    for (var m = 0; m < db.length; m++) {
        var e = db[m],
            name = e.name,
            value = e.value;
        var parts = name.split(/_(?=\d+$)/);
        if (parts.length === 2) {
            name[parts[0]] = name[parts[0]] || [];
            name[parts[0]][parts[1] - 1] = e;
            delete e;
        }
    }
})

我试图得到一个类似或类似的结果.

"flavour": [{"row_1_flavour_1_value", "row_1_flavour_2_value"},{"row_2_flavour_1_value", "row_2_flavour_2_value"}],
"taste": [{"row_1_taste_1_value", "row_1_taste_2_value"},{"row_2_taste_1_value", "row__taste_2_value"}]

注意

有可能有多行(不仅仅是2个)而且它们没有命名为row_n,这个名称只是出于示例目的

Answer 1

您可以结合使用Array.prototype.filter()、Array.prototype.map()、RegExp.prototype.test()和最后的Array.prototype.reduce()。

代码：

$('#serForm').on('click', function () {
  var db = $('form').serializeArray(),
      getFormRowValues = (arr, str, numPerRow) => arr
        .filter(el => new RegExp(str).test(el.name))
        .map(el => el.value)
        .reduce((a, c, i) => ((a[i / numPerRow | 0] = a[i / numPerRow | 0] || []).push(c), a), []),
      result = {
        flavour: getFormRowValues(db, 'flavour', 2),
        taste: getFormRowValues(db, 'taste', 2)
      };

  console.log(result);
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <table>
    <tr class="row_1">
      <td>
        <input name="flavour_1" value="flavour_1_value" type="text"><br>
        <input name="flavour_2" value="flavour_2_value" type="text">
      </td>
      <td>
        <input name="taste_1" value="taste_1_value" type="text"><br>
        <input name="taste_2" value="taste_2_value" type="text">
      </td>
    </tr>
    <tr class="row_2">
      <td>
        <input name="flavour_1" value="flavour_1_value" type="text"><br>
        <input name="flavour_2" value="flavour_2_value" type="text">
      </td>
      <td>
        <input name="taste_1" value="taste_1_value" type="text"><br>
        <input name="taste_2" value="taste_2_value" type="text">
      </td>
    </tr>
  </table>
  <button type="button" id="serForm">Serialize Form </button>
</form>