Squarespace：表单提交失败：使用 JavaScript 成功处理表单数据后，表单未提交到 Mailchimp

Question

我在 Squarespace 表单块中有一个表单。我在提交之前成功拦截了表单（使用form.submit()listener）并成功读取和处理数据。我只读取表单数据（Array.from($('select'))）。除了在提交前拦截之外，我不会干扰表单结构或提交过程。 e.preventDefault() 未设置。

JavaScript 成功执行。它将表更新数据提交到 Amazon Web Services 表。 AWS 将日志发送到控制台以确认成功。我让 JavaScript 在成功时终止。最后我尝试了form.submit() 调用，但没有任何效果。

没有错误消息。

真正奇怪的异常行为是，我对其进行了测试，发现在五个测试中，两个（第一个和第三个）成功更新了我的 Mailchimp 列表，而三个没有。对于这三个人，我收到了 Squarespace 表单提交失败的电子邮件通知。除了说提交到 MailChimp 失败之外，它没有给出任何错误消息。

但是，当我连接到一个电子邮件地址时，每次都提交成功。我收到了提交的电子邮件通知。只是当表单存储是 MailChimp 时提交失败（有时）。

我在 Squarespace 表单存储对话框中断开了 MailChimp 列表与表单的连接。我从 Mailchimp 上批准的应用程序列表中删除了 Squarespace 我将存储重新连接到我的 Mailchimp 列表并再次测试它。提交失败。

您可以在this page 上找到该表格。所有的 JavaScript 都可以在 this page 上找到。我也把它放在下面的sn-p中。它没有与 AWS 的实时连接，因为我必须将我的 AWS“秘密”访问密钥放在脚本中，而我不愿意这样做。

如果有人可以指导我解释为什么会出现这种情况以及如何解决它，我将不胜感激。事实上，我很感激你能读到这里，无论你是否能提供帮助。谢谢。

$('form').submit(function(e) {
  e.preventDefault();
  var a = Array.from($('select'))
    .map((select, i) => ({
      'index': i,
      'room': select.value
    }))
    .filter(select => select.room !== 'unsure' && select.room !== 'not attend');
  if( !a || a.length == 0 ) {console.log('a is null or undefined, or a.length == 0');}
    else {
     if(a[0].room == 'attend') {a[0].room = 'chapel';}  
     alert(JSON.stringify(a));
//   updateTable(a);
   }  //  end else
}); //  end def anonymous fn & submit

function updateTable(classes) {
  var timeslots = ['0830', '0900', '1030']
  var params = {};
  var ts = '';
  var rm = '';
  var dynamoDB = new AWS.DynamoDB();
  var err = null;
  
  for(var i = 0; i < classes.length; i++) {
    ts = timeslots[classes[i].index];
    rm = classes[i].room;
    console.log('ts, rm : ', ts, rm);
    params = {
                  'TableName': 'FHCRoomCounts',
                  'Key': {
                            'room': {
                                      'S' : rm
                                    },
                            'timeSlot': {
                                           'S': ts
                                        }
                         },
                  'ExpressionAttributeNames': {
                                                '#registrants': 'registrants'
                                              },
                  'ExpressionAttributeValues': {
                                                 ':n': { 'N': '1'} 
                                               
                                               },
                  'UpdateExpression': 'ADD #registrants :n',
                  'ReturnValues': 'ALL_NEW'
             };  // end params
             
               console.log('log params for i == ' + i);
               console.log(params);
               console.log('Executing dynamoDB updateItem on iteration i = ' + i);
                                        
    dynamoDB.updateItem(params, function(err, data) {
          if (err) {
                      console.log('Unable to update registrant: ' + '\n' + JSON.stringify(err, undefined, 2));
            } else {
                      console.log('Increase registrant succeeded: ' + '\n' + JSON.stringify(data, undefined, 2));
                   }  // end else
    });  // end def anonymous fn & def updateItem stateme
  }  //  end for
}  //  end def fn updateTable

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form method="post">
  <div>
    <label>First Name
    <input type="text" name="fname" size="25">
  </label>
  </div>
  <div>
    <label>Last Name
    <input type="text" name="lname" size="25">
  </label>
  </div>
  <div>
    <label>email address
    <input type="email" name="email" size="25">
  </label>
  </div>
  <div>
    <label>08:30 Keynote Speaker
    <select class="select" name="select 0830">
      <option value="unsure">unsure</option>
      <option value="attend">attend</option>
      <option value="not attend">not attend</option>
    </select>
  </label>
    <label>09:00 Classes
    <select class="select" name="select 0900">
      <option value="unsure">unsure</option>
      <option value="A">room A</option>
      <option value="B">room B</option>
    </select>
    </label>
    <label>10:30 Classes
    <select class="select" name="select 1030">
      <option value="unsure">unsure</option>
      <option value="A">room A</option>
      <option value="B">room B</option>
    </select>
  </label>
  </div>
  <div>
    <input type="submit" value="submit form">
  </div>
</form>

Answer 1

我发现此错误消息通常是以下任一原因的结果：

1. 未在表单上填写 MailChimp 所需的字段（仔细检查您是否需要并在测试期间始终如一地填写字段），或者
2. 此人（电子邮件地址）已在 MailChimp 列表中。
3. 该电子邮件地址以前在列表中，但已被删除。 MailChimp 不会重新添加已删除的用户。

假设它不是您的自定义 javascript，并且无论添加或不添加自定义 JS，您都会得到相同的结果，请检查这两个可能的原因。