Question

我有一个带有文本字段的表单，用户可以在其中添加新的＆＃34;单击按钮。这些字段共享相同的名称。我试图将这些值传递到Google Spreadsheets，但这些值都是以未定义的方式传递的。使用以下代码，即使console.log将答案打印为对我来说没问题的字符串。

因此，如果用户例如为SUNDAY_NOTES []提交3个单独的条目，则所有3个字符串最终应该被新行分解，但是我只是得到了＃34;未定义＆＃34;

<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

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

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>

将表单中的值数组推送到Google电子表格中即可获得“未定义的”＃。

2 个答案: