Question

我想在提交之前更改表单数据的结果，但我正在努力使用我的脚本

我的HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="control-group">
    <label class="control control-checkbox">
        First checkbox
            <input type="checkbox" />
        <div class="control_indicator"></div>
    </label>
</div>

<div class="button">
Click Me
</div>

使用Javascript：

<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>

我试图获得与此类似或类似的结果。

$("#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;
        }
    }
})

注意

有可能有多行（不仅仅是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>

Answer 2

这个解决方案并不像索引那么重，但我认为它更简单。

$("#serForm").on('click', function() {
    var flavourArr = getInputValuesByName('flavour');
    var tasteArr = getInputValuesByName('taste'); 

    console.log(flavourArr);
    console.log(tasteArr);
})

function getInputValuesByName(name){
    var arr = [];
    $('form input[name*="' + name + '"]').each(function(k,v){ 
        var parentClass = $(v).closest('tr').attr('class');
        
        arr.push(parentClass + "_" + $(v).val()); 
    });

    return arr;
}

<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    </head>
    <body>
        <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>
    </body>
</html>

处理表单的数据结果

2 个答案: