javascript - HTML 表单提交至 Google 日历 : Uncaught TypeError, 由于属性值非法而失败:1

标签 javascript jquery html google-apps-script forms

我相信我遇到了与 this problem 类似的问题,但他的解决方案对我不起作用。

我正在尝试让 Google 应用脚本提供 HTML 表单,以将 Google 日历事件添加到我的日历中。

代码.gs:

function doGet() {
  return HtmlService.createHtmlOutputFromFile('form.html')
    .setSandboxMode(HtmlService.SandboxMode.IFRAME);
}

function scheduleEvent(array) {
  CalendarApp.getDefaultCalendar().createEvent(array[0], array[1], array[2]);
  return 1;
}

form.html

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
    <link href="//netdna.bootstrapcdn.com/bootswatch/3.3.6/paper/bootstrap.min.css" rel="stylesheet">
    <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="//netdna.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.13.0/moment.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/moment-timezone/0.5.4/moment-timezone-with-data-2010-2020.min.js"></script>
    <style>body{padding:8px}</style>
  </head>
  <body>
    <form class="form">
      <fieldset>
        <legend>Schedule a Meeting</legend>
        <div class="form-group">
          <label for="email">Your email:</label>
          <input type="email" class="form-control" id="email" placeholder="you@gmail.com" required>
        </div>
        <div class="form-group">
          <label for="eventName">What's the topic?</label>
          <input type="text" class="form-control" id="eventName" required>
        </div>
        <div class="form-group">
          <label for="eventLocation">Where?</label>
          <input type="text" class="form-control" id="eventLocation" required>
        </div>
        <div class="form-group">
          <label for="startTime">When? (EST)</label>
          <input type="datetime-local" class="form-control" id="startTime" required>
        </div>
        <div class="form-group">
          <label for="select">How Long?</label>
          <select class="form-control" id="duration" required>
            <option value="15">15 Minute Meeting</option>
            <option value="30" selected>30 Minute Meeting</option>
            <option value="60">60 Minute Meeting</option>
          </select>
        </div>
        <button type="submit" class="btn btn-primary submit" onClick="preprocessForm(this.form)">Submit</button>
      </fieldset>
    </form>
    <script type="text/javascript">
    function preprocessForm (form) {
      // check if they filled out their email, and set the variable if they did
      if (form.email.value) {
        var email = form.email.value;
      } else {
        alert("Please enter your email address, so I know who the appointment is with!");
        event.preventDefault();
        return 1;
      }
      // check if they filled out the event name, and set the variable if they did
      if (form.eventName.value) {
        var eventName = form.eventName.value;
      } else {
        alert("Please enter a name for the event!");
        event.preventDefault();
        return 1;
      }
      // set and format the event time and date, and grab the current time and date
      var currentTime = moment().tz('America/New_York');
      var startTime = moment(form.startTime.value).tz('America/New_York');
      var formattedStartTime = startTime.toDate();
      // html5 should stop the user from skipping filling out this section, but check anyway, just in case
      if (!form.startTime.value) {
        alert("Please enter a time for the event to occur!");
        event.preventDefault();
        return 1;
      }
      // we don't want people scheduling meetings in the past
      if (startTime.isBefore(currentTime)) {
        alert("Please pick a time that is in the future!");
        console.log('Start Time: ' + startTime);
        console.log('Current Time: ' + currentTime);
        event.preventDefault();
        return 1;
      }
      // check if they filled out the event location, and set the variable if they did
      if (form.eventLocation.value) {
        var eventLocation = form.eventLocation.value;
      } else {
        alert("Please enter an event location, so I know where to go!");
        event.preventDefault();
        return 1;
      }
      // it's not possible to skip the duration, since it's a dropdown that defaults to 30 minutes
      var duration = form.duration.value;
      var endTime = moment(startTime).add(duration, 'minutes');
      var formattedEndTime = endTime.toDate();

      var assembledDetails = [eventName, formattedStartTime, formattedEndTime];
      //toadd: , {location: eventLocation, guests: email}

      google.script.run.scheduleEvent(assembledDetails);

      // things to try and stop the redirect/refresh when pressing the submit button
      event.preventDefault();
      return false;
    }
    </script>
  </body>
</html>

我运气不好。提交时,我在控制台中收到此错误:

有什么建议吗?

谢谢!

最佳答案

您无法发送数组中的日期对象。属性 1 是数组中的第二个元素:assembledDetails

var assembledDetails = [eventName, formattedStartTime, formattedEndTime];

您可以将代码更改为:

formattedStartTime = formattedStartTime.toDateString();
formattedEndTime = formattedEndTime.toDateString();

var assembledDetails = [eventName, formattedStartTime, formattedEndTime];

然后您需要将日期字符串转换回服务器代码中的日期对象。

或者:

您可以使对象变得直立:

assembledDetails = JSON.stringify(assembledDetails);

google.script.run.scheduleEvent(assembledDetails);

并将对象转换回服务器:

function scheduleEvent(array) {
  array = JSON.parse(array);

引用文档:

Requests fail if you attempt to pass a Date, Function, DOM element besides a form, or other prohibited type, including prohibited types inside objects or arrays.

Apps Script documentation - Parameters and return values

关于javascript - HTML 表单提交至 Google 日历 : Uncaught TypeError, 由于属性值非法而失败:1,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37951222/

相关文章:

javascript - 将鼠标悬停在图像上以显示由 alt 标签链接的更大的隐藏图像?

jquery - 当子 LI 悬停在上方时,如何使除第一个 LI 之外的所有父级突出显示

javascript - 多个具有粘性位置的 div 相互重叠

html - 两个 div 之间的 hr 线

html - 在保持宽高比的同时缩放视频以适应 flexbox 元素

javascript - 为什么 javascript setTimeout 会同时执行所有操作?

javascript - 这个对象的范围是什么

javascript - 在angularjs ng-repeat中选择第一个元素

javascript - 如何从内部指令链接设置选择框的选定值

javascript - jquery动画