将表单中的值数组推送到 Google 电子表格中会显示为"未定义"

Question

我有一个带有文本字段的表单，用户可以通过单击按钮来"添加新"。这些字段共享相同的名称。我正在尝试将这些值传递到 Google 电子表格中，但这些值都通过以下代码显示为"未定义"，即使控制台.log将答案打印为对我来说看起来不错的字符串。

因此，例如，如果用户为 SUNDAY_NOTES[] 提交 3 个单独的条目，则所有 3 个字符串都应该在一个由新行分解的单元格中结束，但相反，我只是"未定义"。

<form action="" method="post" id="timesheet">
  <input type="text" name="SUNDAY_NOTES[]">
  <input type="text" name="SUNDAY_NOTES[]">
  <input type="text" name="SUNDAY_NOTES[]"> // the user can create multiples of these ^ for each day of the week
  <input type="submit" id="submit" />
</form>
<script>
$(document).ready(function() {
  var $form = $('form#timesheet'),
  url = 'https://script.google.com/macros/s/AKf45XRaA/exec'
  $('#submit').on('click', function(e) {
    e.preventDefault();
    var jqxhr = $.ajax({
      url: url,
      method: "GET",
      dataType: "json",
      data: $form.serializeArray().map((e) => {
         return e.value
        }).join('n')
    });
  })
});
</script>

Answer 1

你的代码有效。在下面的代码片段中，我将按n拆分的数据存储在变量中并记录它。您可以检查输出。

虽然你的JS是正确的，但我怀疑你实际上想使用不同的HTTP方法。也许POST或PUT？我不能具体说明，因为您没有说您正在使用哪个 API 端点。

$(document).ready(function() {
  var $form = $('form#timesheet'),
  url = 'https://script.google.com/macros/s/AKf45XRaA/exec'
  $('#submit').on('click', function(e) {
    e.preventDefault();
    var data = $form.serializeArray().map((e) => {
      return e.value
    }).join('n');
    console.log(data);
    var jqxhr = $.ajax({
      url: url,
      method: "POST",
      dataType: "json",
      data: data
    }).done(response => {
      console.log(response);
    }).fail((jqXHR, textStatus) => {
      console.log("Request failed: " + textStatus);
    });
  })
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="" method="post" id="timesheet">
  <input type="text" name="SUNDAY_NOTES[]">
  <input type="text" name="SUNDAY_NOTES[]">
  <input type="text" name="SUNDAY_NOTES[]">
  <input type="submit" id="submit" />
</form>

Answer 2

从

输入名称中删除[]，因为如果您想在服务器端接收数组，则需要这样做，然后创建一个函数，根据 inout 的键对值进行分组：

function group(arr) {
  var tempArr = [];
  arr.forEach(function(e) {
    var tempObj = tempArr.find(function(a) { return a.name == e.name });
    if (!tempObj)
      tempArr.push(e)
    else
      tempArr[tempArr.indexOf(tempObj)].value += ', ' + e.value;
  });
  return tempArr;
}

并像这样使用它：

 $('#submit').on('click', function(e) {
    e.preventDefault();
    var jqxhr = $.ajax({
      url: url,
      method: "GET",
      dataType: "json",
      data: group($form.serializeArray()),
   //... rest of your code

这将保持有效的原始结构，

这是一个片段：

var $form = $('form#timesheet');
function group(arr) {
  var tempArr = [];
  arr.forEach(function(e) {
    var tempObj = tempArr.find(function(a) { return a.name == e.name });
    if (!tempObj)
      tempArr.push(e)
    else
      tempArr[tempArr.indexOf(tempObj)].value += ', ' + e.value;
  });
  return tempArr;
}
$form.submit(function(e) {
  e.preventDefault();
  var grouped = group($form.serializeArray());
  console.log(JSON.stringify(grouped))
});

<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"><br />
  <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>