时间戳

首页 > 解决方案 > How can I collect data from multiple HTML checkboxes and input that data into a google sheet?

javascript - How can I collect data from multiple HTML checkboxes and input that data into a google sheet?

问题描述

I am continuing work on a previous project: Google Sheet Data in a Sidebar

Now, I would like to retrieve the items that have been checked in the sidebar and return that data to the Code.gs file and ultimately the Google Sheet (see code below). Can you offer suggestions on how to do this?

Below, I am trying to add the checked items to the "students" array. I would then like the "Submit Early Release" button to send the "students" array to the Code.gs file. However, I am unsure how to push the checked items to the array properly.

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>

Thank you for your help!

Update

Madhav, thank you for your suggestions. I've adapted your code to fit my scenario, but I'm still having trouble getting the array data back to the spreadsheet. Specifically, when I click the "Submit Early Release" button the sidebar closes but no data is written into the specified cell. Would you mind taking a look?

Page.html

Added another "src=" line for jquery - not sure if this is needed???

Added "collectNames" function to get checked names and send them back

<!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.gs

function releasedStudents(values) {  
  var doc = SpreadsheetApp.openById("1OF6Y1CTU9dkIgd1P-nw-5f2lqHSS5cGZytndwzJhw-o");
  var ss = SpreadsheetApp.getActiveSpreadsheet();
  var cell = ss.getRange('V20').getValue();
  cell.setValue(values);
}

标签： javascripthtmlgoogle-apps-scriptgoogle-sheetssidebar

解决方案

如果您想将选中的项目推送到数组中，那么您需要确保的第一件事是每个复选框都带有它以某种形式或其他形式表示的值。您的代码确实尝试这样做，但是当您编写

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 属性应该被推送到已选中属性为 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>

我希望这是您正在寻找的东西，而不是其他东西。

推荐阅读