javascript - 如何在表单提交中合并数组中的项目？

Question

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

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

SUNDAY_NOTES = "晚了。"

SUNDAY_NOTES = "这件事。"

SUNDAY_NOTES = "某事。"

... 然后只有“Late”以我当前的代码出现在电子表格的单元格中。理想情况下，我希望单元格中有一个逗号分隔或换行符分隔的字符串:(“Late., This thing., Something.”)。我正在使用以下代码(我复制的)将提交内容发布到 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的值(value)，以便能够加入他们。

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

编辑:

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

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

这是一个 fiddle :https://jsfiddle.net/cwgL6L0L/29/ (检查控制台)