Javascript 应用程序脚本模板HTML在成功处理程序中中断

搜索过，但找不到任何类似的问题或解决方案

我有一些模板HTML，它基于电子表格中的数据构建表单，因为我在这些下拉列表中有数量可变的下拉列表和选项

单击submit，我想向用户显示旋转的gif，以便他们知道它正在处理

如果code.gs中的后端代码通过所有测试传递输入，我想用一条成功消息更新div，如果任何检查失败并显示一条错误消息

在使用create.createHtmlOutFromFile方法之前，我已经做到了这一点，但是现在使用.createTemplateFromFile方法，它只会擦除整个页面

HTML模板

<style type="text/css">
@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,600,300);
#container{
    padding-left:10px;
    font-family: 'Open Sans', Arial, sans-serif;
}
#header{
  width: 75%;
  margin: 0 auto;
  text-align: center;
  margin-bottom:10px;
}
form{
    text-align: center;
    margin-top:10px;
}
#nameField{
   width:400px;
   margin-bottom:10px;
}
#reqIndic{
   color:#FF0000;
}
select{
    margin-top: 5px;
    width:150px;
}
#submit{
  margin-top:20px;
  width:125px;
  height:40px;
}
#confirmation{
  width: 30%;
  margin: 0 auto;
  min-height:60px;
  border-radius: 5px;
}
#padding{
  width: 30%;
  margin: 0 auto;
  min-height:60px;
  border-radius: 5px;
}
</style>
<div id="container">
    <div id="header">
        <h2>Cheltenham Classic</h2>
    </div>
    <br>
    <form name="projectsForm">
        <span id="reqIndic">&#42;</span>
        <span> Name</span>
        <input id="nameField" type="text" name="name" required>
        <br>
        <? for (var race in races) { ?>
            <span><?= race ?></span>
            <select>
                <? for (var i = 0; i < races[race].length; i++) { ?>
                    <option value="<?= races[race][i] ?>"><?= races[race][i] ?></option>
                <? } ?>
            </select>
            <br>
        <? } ?>

        <br>

        <input id="submit" type="submit" value="Submit Form" onclick="google.script.run
              .withSuccessHandler(updateDiv)
              .onEvent(this.parentNode);spinner()">
    </form>

</div>
<div id="confirmation" style ="text-align:center"></div>
<div id="padding" style ="text-align:center"></div>

<script type="text/javascript">
    function updateDiv(returnValue){
        alert('debug');
        var div = document.getElementById('confirmation');
        if(returnValue == false){
            var errStr = '<p>ERROR: Please check your rankings for blank fields or multiple entries of the same project and re-submit your rankings</p>';

            div.innerHTML = errStr;
        }
        else{
            div.innerHTML = '<p>Success! Your results were submitted successfully</p>';
        }

    }


    function spinner(){
      var div = document.getElementById('confirmation');

      div.innerHTML = '<img src="http://loadinggif.com/images/image-selection/32.gif">'
    }
</script>

后端代码

我已经将OneEvent函数简化为只返回带有键值对的对象，而不进行任何检查

updateDiv函数运行，警报显示整个页面被擦除

function doGet(){
  var raceForm = HtmlService.createTemplateFromFile('RaceForm');
  raceForm.races = getRaces();
  return raceForm.evaluate().setSandboxMode(HtmlService.SandboxMode.IFRAME);
}

function onEvent(e){
  return {'valid': true};
}

function getRaces(){
  var url = //spreadsheet url
  var wb = SpreadsheetApp.openByUrl(url);
  var ws = wb.getSheetByName('Races Log');

  var racesObj = {};

  var wsValues = ws.getDataRange().getValues();

  for(var i = 0; i <wsValues.length;i++){
    var race = wsValues[i][0];
    racesObj[race] = [];
    racesObj[race].push('0');
    for(var j = 1; j<wsValues[i].length;j++){
      racesObj[race].push(wsValues[i][j]);
    }
  }

  return racesObj;
}

非常感谢任何帮助。

如果我硬编码racesObj对象：

页面如下所示：使用模板

如果单击“提交”按钮，我会得到以下信息：

此行：/*@importurlhttp://fonts.googleapis.com/css?family=Open+Sans:400600300；*/正在导致浏览器出错。您能否提供一个硬编码的racesObj，以便我们可以使用它，并了解您希望该对象的外观？

var racesObj = {one:["one","two"], two:["one", "two"], "races":["belmont", "kentucky"]};