Question

我有一个HTML边栏，该边栏已经用可拖动/可放置div的Google Apps脚本（链接到Google表格）进行了编码。想法是，使用方法会更改div的位置，然后单击提交，然后将这些div的内容按正确的顺序打印在我的Google表格中的某些目标单元格中。

我发现单击按钮时将此数据传递到服务器的唯一方法是在文本输入中使用'name'属性，因此我创建了一系列空文本输入（我将稍后隐藏），然后以正确顺序自动填充div的值。这是我的HTML：

<form id = "sortable" class="ui-state">

             <div class = "sortableItem day">Monday</div>

              <div class = "sortableItem swapable ui-state-default" id="result1"></div>
              <div class = "sortableItem swapable ui-state-default" id="result2"></div>
              <div class = "sortableItem swapable ui-state-default" id="result3"></div>
              <div class = "sortableItem swapable ui-state-default" id="result4"></div>
              <div class = "sortableItem swapable ui-state-default" id="result5"></div>

             <div class = "sortableItem day">Tuesday</div>
              <div class = "sortableItem swapable ui-state-default" id="result6"></div>
              <div class = "sortableItem swapable ui-state-default" id="result7"></div>
              <div class = "sortableItem swapable ui-state-default" id="result8"></div>
              <div class = "sortableItem swapable ui-state-default" id="result9"></div>
              <div class = "sortableItem swapable ui-state-default" id="result10"></div>

             <div class = "sortableItem day">Wednesday</div>
              <div class = "sortableItem swapable ui-state-default" id="result11"></div>
              <div class = "sortableItem swapable ui-state-default" id="result12"></div>
              <div class = "sortableItem swapable ui-state-default" id="result13"></div>
              <div class = "sortableItem swapable ui-state-default" id="result14"></div>
              <div class = "sortableItem swapable ui-state-default" id="result15"></div>

             <div class = "sortableItem day">Thursday</div>
              <div class = "sortableItem swapable ui-state-default" id="result16"></div>
              <div class = "sortableItem swapable ui-state-default" id="result17"></div>
              <div class = "sortableItem swapable ui-state-default" id="dresult18"></div>
              <div class = "sortableItem swapable ui-state-default" id="result19"></div>
              <div class = "sortableItem swapable ui-state-default" id="result20"></div>

             <div class = "sortableItem day">Friday</div>
              <div class = "sortableItem swapable ui-state-default" id="result21"></div>
              <div class = "sortableItem swapable ui-state-default" id="result22"></div>
              <div class = "sortableItem swapable ui-state-default" id="result23"></div>
              <div class = "sortableItem swapable ui-state-default" id="result24"></div>
              <div class = "sortableItem swapable ui-state-default" id="result25"></div>

       <div>  

              <!-- hidden text inputs to record hotel order for pulling through to server using 'name' attribute (can't be used on divs) -->       

              <input type="text" id="meeting1" name="meeting1">
              <input type="text" id="meeting2" name="meeting2">
              <input type="text" id="meeting3" name="meeting3">
              <input type="text" id="meeting4" name="meeting4">
              <input type="text" id="meeting5" name="meeting5">
              <input type="text" id="meeting6" name="meeting6">
              <input type="text" id="meeting7" name="meeting7">
              <input type="text" id="meeting8" name="meeting8">
              <input type="text" id="meeting9" name="meeting9">
              <input type="text" id="meeting10" name="meeting10">
              <input type="text" id="meeting11" name="meeting11">
              <input type="text" id="meeting12" name="meeting12">
              <input type="text" id="meeting13" name="meeting13">
              <input type="text" id="meeting14" name="meeting14">
              <input type="text" id="meeting15" name="meeting15">
              <input type="text" id="meeting16" name="meeting16">
              <input type="text" id="meeting17" name="meeting17">
              <input type="text" id="meeting18" name="meeting18">
              <input type="text" id="meeting19" name="meeting19">
              <input type="text" id="meeting20" name="meeting10">
              <input type="text" id="meeting21" name="meeting21">
              <input type="text" id="meeting22" name="meeting22">
              <input type="text" id="meeting23" name="meeting23">
              <input type="text" id="meeting24" name="meeting24">
              <input type="text" id="meeting25" name="meeting25">

          </div>

          <!-- submit button : hidden until check box checked -->

          <input type="submit" class="btn btn-success btn-lg center-block" id="click">

          <!-- checkbox - user confirms they are happy with order + triggers function to update text inputs with new hotel order -->

          <em>Click to confirm you are happy with the new order </em><input type="checkbox" id="check">

          </form>

这是在选中复选框时填充空白文本输入的脚本：

var textInputArray = [];

       $("#check").click(function() {

        for(var i = 0; i<=25; i++) {

       // update array with new hotel order

        textInputArray.push(sortable.children[i].innerHTML);

        $("#meeting" + i).val(textInputArray[i]);
        }
       })

到目前为止一切顺利！然后，我将其添加到HTML文档的脚本中：

   window.onload = function() {

      document.getElementsByTagName('form')[0]
        .addEventListener('submit', function(e){
          e.preventDefault(); 
          google.script.run.handleFormSubmit(this);  
          google.script.host.close();

        });
   }

在我的.gs文件中：

function handleFormSubmit(form) {

  var test = form.meeting1;
  SpreadsheetApp.getActiveSheet().getRange('D25').setValue(test);
}

（目前，我只能在测试时填充第一个条目）。

现在这有效-但非常间歇。我工作了，然后又运行了一次，但是没有，然后有时我又回到它，然后又重新运行了！这是非常不稳定的，因此我想这里的脚本出了点问题。有几件事：

1-我当前的脚本有什么错误

2-我想有一种更好的方法可以从div中获取数据，而没有'fake'隐藏的文本框...但是现在好像找不到任何替代方法，因为我似乎需要'name'属性？< / p>

对此将提供任何帮助

无法将数据从HTML服务传递到Google表格

0 个答案: