如何在表单提交时合并数组中的项目

Question

此表单具有一周中每天的文本输入，以及"添加另一个"按钮，用于在每天下创建更多输入。提交会通过，但只有输入的第一个值才会发布到电子表格的单元格中。

例如，如果用户为SUNDAY_NOTES输入了多个条目，如下所示：

SUNDAY_NOTES ="迟到"。

SUNDAY_NOTES="这个东西"。

SUNDAY_NOTES ="某物"。

。然后只有"迟到"最终出现在电子表格的单元格中，其中包含我当前的代码。理想情况下，我希望在单元格中有一个逗号分隔或换行分隔的字符串：("迟到，这个东西，某事。 我使用以下代码(我复制的(将提交的内容发布到 Google 电子表格。

<form method="post" id="timesheet" >
 <input type="text" name="SUNDAY_NOTES">
 <input type="text" name="SUNDAY_NOTES">
  // user can click a button to keep adding more SUNDAY_NOTES fields
 <input type="text" name="MONDAY_NOTES">
   // and so forth
 <input type="submit" id="submit" />
</form>
<script>
    var $form = $('form#timesheet'),
    url = 'https://script.google.com/macros/s/abcd123456789/exec'
    $('#submit').on('click', function(e) {
        var jqxhr = $.ajax({
        url: url,
        method: "GET",
        dataType: "json",
        data: $form.serializeArray()
            }).success(
                console.log('success')
            );
    })
</script> 

(这个问题没有准确描述我的表单的用例，我只是为了发布目的过度简化了它(

Answer 1

要有一个具有相同name的输入值数组，请在名称后添加[]，例如： name="SUNDAY_NOTES[]" ，

所以用<input type="text" name="SUNDAY_NOTES[]">替换<input type="text" name="SUNDAY_NOTES">

然后用逗号连接数组值

data : $form.serializeArray().map((e) => { return e.value}).join(',')

$form.serializeArray()将具有对象的array，这就是为什么使用.map()来重新调整值array以便能够联接它们的原因。

$(document).ready(function() {
  var $form = $('form#timesheet');
  $form.submit(function(e) {
    e.preventDefault();
    var myValues = $form.serializeArray().map((e) => {
      return e.value
    }).join(',');
    console.log(myValues);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form method="post" id="timesheet">
  <input type="text" name="SUNDAY_NOTES[]">
  <input type="text" name="SUNDAY_NOTES[]"> // user can click a button to keep adding more SUNDAY_NOTES fields
  <input type="text" name="MONDAY_NOTES[]"> // and so forth
  <input type="submit" id="submit" />
</form>

编辑：

为了保持结构不变(键，值对(，创建一个循环array的函数group并将值添加到键中

function group(arr){
    var tempArr = [];
    arr.forEach(function(e){          
      if(!tempArr[e.name]) tempArr[e.name] = e.value
      else tempArr[e.name] += ',' + e.value
  });
  return tempArr;
}
$('#submit').on('click', function(e) {
    var jqxhr = $.ajax({
    url: url,
    method: "GET",
    dataType: "json",
    data: group($form.serializeArray())
    // rest of your code

这里有一个小提琴：https://jsfiddle.net/cwgL6L0L/29/(检查控制台(