如何从多个HTML复选框中收集数据并将该数据输入到Google表格中?

问题描述 投票:0回答:1

我正在继续研究以前的项目:Google Sheet Data in a Sidebar

现在,我想检索侧边栏中已检查的项目,并将该数据返回到Code.gs文件,最后返回到Google表格(请参阅下面的代码)。你能提供一些关于如何做的建议吗?

下面,我试图将检查的项目添加到“学生”数组。然后我想要“提交早期发布”按钮将“学生”数组发送到Code.gs文件。但是,我不确定如何正确地将已检查的项目推送到数组。

page.html中

> <!DOCTYPE html>
><html>
>  <head>
>     <base target="_top">
>     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
>  </head>
>    <body>
>     <script>
>     function addStudents(studentList){ 
>       $('#rangeResult').text(studentList);
>       
>       document.write(new Date().toLocaleDateString());
>       
>       var students = [];
>       for (var i = 0; i < studentList.length; i++) {
>         document.write('<br><input type="checkbox" name="studentList[i]" id="i" value="i">'+ studentList[i]);
>       }
>       document.write('<br><input type="button" value="Submit Early Release" onclick="google.script.host.close()" />');
>       document.write('<input type="button" value="Close" onclick="google.script.host.close()" />');
>     };
>     
>     google.script.run.withSuccessHandler(addStudents).earlyReleaseList();
>     </script>
>   </body>
></html>

谢谢您的帮助!

更新

Madhav,谢谢你的建议。我已经调整了你的代码以适应我的场景,但我仍然无法将数组数据恢复到电子表格。具体来说,当我单击“提交早期发布”按钮时,侧边栏会关闭,但没有数据写入指定的单元格。你介意看看吗?

page.html中

为jquery添加了另一个“src =”行 - 不确定是否需要这个?

添加了“collectNames”函数以获取已检查的名称并将其发回

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
  </head>
  <body>
    <script>
    function addStudents(studentList){ 
      $('#rangeResult').text(studentList);

      document.write(new Date().toLocaleDateString());

      //var students = [];

      for (var i = 0; i < studentList.length; i++) {
        document.write('<br><input type="checkbox" class="special" name='+ studentList[i]+ 'id="i" value="i">'+ studentList[i]);
      }
      document.write('<br><input type="button" value="Submit Early Release" onclick="collectNames()" />');
      document.write('<input type="button" value="Close" onclick="google.script.host.close()" />');
    };

    function collectNames(){
      var students = [];
      var checkboxes=document.getElementsByClassName("special");  //get all checkboxes
      for(var i = 0; i < checkboxes.length; i++){
        if(checkboxes[i].checked){
          students.push(checkboxes[i].getAttribute("name")); //if checked then push to array the value
        }
      }
      //now send the finalarray to the destination
      google.script.run.releasedStudents(students);
      google.script.host.close();
    };

    google.script.run.withSuccessHandler(addStudents).earlyReleaseList();
    </script> 
  </body>
</html>

code.公司

function releasedStudents(values) {  
  var doc = SpreadsheetApp.openById("1OF6Y1CTU9dkIgd1P-nw-5f2lqHSS5cGZytndwzJhw-o");
  var ss = SpreadsheetApp.getActiveSpreadsheet();
  var cell = ss.getRange('V20').getValue();
  cell.setValue(values);
}
javascript html google-apps-script google-sheets sidebar
1个回答
0
投票

如果要将已检查的项目推送到数组中,那么您需要确保的第一件事是每个复选框都带有它以某种形式或另一种形式表示的值。你的代码确实试图这样做,但是当你写的时候

document.write('<br><input type="checkbox" name="studentList[i]" id="i" value="i">'+ studentList[i]);

每个复选框的name属性始终相同,因为它是一个常量字符串(“studentList [i]”)而不是数组中的值,因此应将其替换为:

document.write('<br><input type="checkbox" class="special"name='+studentList[i]+ ' id="i" value="i">'+ studentList[i]);

一旦我们完成输入,我们应该只能从复选框中收集值。这样做的一种方法是为所有复选框分配一个类,以便以后可以通过getElementsByClassName()函数访问它们。

获得后,只应将那些复选框的value属性推送到具有checked属性为true的数组。

稍微不同的代码证明了这一点:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
   <button id="clickthis">Click this</button>


</body>
<script>

    var studentList=["nevil","ron","draco","harry"];
    var finalarray=[];

    function runmyfun(){

            var checkboxes=document.getElementsByClassName("special");  //get all checkboxes
        for(var i=0;i<checkboxes.length;i++){
            if(checkboxes[i].checked){

               finalarray.push(checkboxes[i].getAttribute("name"));      //if checked then push to array the value

            }
        }

        //now send the finalarray to the destination
       }


        document.getElementById("clickthis").onclick=function(){

        document.write(new Date().toLocaleDateString());


        for (var i = 0; i < studentList.length; i++) {
        document.write('<br><input type="checkbox" class="special"name='+studentList[i]+ ' id="i" value="i">'+ studentList[i]);   //concat properly
      }
       document.write('<br><input type="button" value="Submit Early Release" onclick="runmyfun()" />');
      document.write('<input type="button" value="Close" onclick="google.script.host.close()" />');
     };


    </script>
</html>

我希望这是你在寻找的东西,而不是别的东西。

© www.soinside.com 2019 - 2024. All rights reserved.