应用程序脚本：在表单/页面中单击按钮时显示加载器，其中包含动态下拉列表、多个输入等组件

Question

我正在尝试在按钮上的 google 表格侧边栏中显示加载程序，单击完整页面或至少单击按钮，以便提交表单的用户在提交较早的表单之前不应再次按下。 我在这个问题中添加了@Tanaike支持的加载程序。 尽管这适用于某些组件较少且简单的页面，但它无法在具有更多和复杂组件的页面中工作，例如具有从工作表中获取的动态值的多选、添加/删除多个输入、多步表单等，以及在浏览器控制台中抛出错误Uncaught TypeError: google.script.withSuccessHandler is not a function at copyFiles (userCodeAppPanel:91:23) at HTMLButtonElement.onclick (userCodeAppPanel:1:1) 。 我想知道我是否可以让上述问题中回答的问题也适用于这个复杂的页面。

[ ] [1]

包含所有组件的完整 HTML 代码：

<body onload="addList()">

<div id="loader" class="loader" style="display:none;">
    <div class="loadingio-spinner-spinner-u1f174wamc"><div class="ldio-43p7dnbmew6">
      <div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
    </div></div>
</div>


<form id="regForm" style="padding-top:0px;"> 

  <div class="steps">
    <div class="step"></div>
    <div class="first_step_content">Copy FIles</div>
    <div class="step_line"></div>
    <div class="step"></div>
    <div class="second_step_content">Select Members</div>
  </div>

  <div class="tab">
    <div>
      
      <input list="dropdownList" name="list" placeholder="Choose Client" id="clientname" required class="client_list"> <!-- Modified -->
      <datalist id="dropdownList"> <!--  Dynamic list of clients --> </datalist>
      
    </div>

    <div id="files">
      
      <? var innerHTML= createInnerHTML(); ?>  
      <select name="langOpt[]" multiple id="langOpt" aria-label="JOINT" aria-required="true" required="">
        <!-- <option value=""></option> -->
        <? innerHTML.forEach(function(option) { ?>
          <option class="<?= option.clas ?> post" value="<?= option.value ?>"><?= option.text ?></option>
        <? }); ?>
      </select>
    </div>
  </div>

  <div class="tab">
    <div>
        <label for="List">Select Client:</label><br>
        <input list="dropdownList" name="list" placeholder="Choose Client" id="clientname" required class="client_list" onkeyup="myFunction()" > <!--  Modified -->
        <datalist id="dropdownList"> <!--  Dynamic list of clients  --> </datalist>
          
      </div>

      <div id="editors">
        <!-- Writers -->
        <label for="List">Select Writers</label><br>
        <? var innerHTML= writer_list(); ?>  
        <select name="writers[]" multiple id="writers" aria-label="JOINT" aria-required="true" required="">
          <!-- <option value=""></option> -->
          <? innerHTML.forEach(function(option) { ?>
            <option class="<?= option.clas ?> post" value="<?= option.value ?>"><?= option.text ?></option>
          <? }); ?>
        </select>

      </div>

      <label>Share with Others</label>
      <div class="field_wrapper">
        <div>
            <input type="text" name="field_name[]" value="" placeholder="example@gmail.com" style="width: 68%;"/>
            <a href="javascript:void(0);" class="add_button" title="Add field"><ion-icon name="add-outline" class="icon"></ion-icon></a>
        </div>
    </div>
  </div>

  <!-- <input type="button" value="Add templates" id="btn"> -->

  <div style="overflow:auto;">
    <div style="align-items: center; align-content: center; text-align: center; margin-top: 30px;">
      <button type="button" id="prevBtn" onclick="nextPrev(-1)">Previous</button>
      <button type="button" id="nextBtn" onclick="nextPrev(1)">Next</button>
    </div>
  </div>

  <script>
    $('#langOpt').multiselect({
      columns: 1,
      placeholder: 'Select Templates',
      search: true,
      selectAll: true,
      // id: 'temp',
    });

    $('#writers').multiselect({
        columns: 1,
        placeholder: 'Select Writers',
        search: true,
        selectAll: true,
        // id: 'temp',
    });

      
    // Creates the dynamic input Fields
    $(document).ready(function(){
      var maxField = 10; //Input fields increment limitation
      var addButton = $('.add_button'); //Add button selector
      var wrapper = $('.field_wrapper'); //Input field wrapper
      var fieldHTML = '<div><input type="text" name="field_name[]" value="" style="width: 68%;"/><a href="javascript:void(0);" class="remove_button"><ion-icon name="remove-outline" class="icon"></ion-icon></a></div>'; //New input field html 
      var x = 1; //Initial field counter is 1
      
      //Once add button is clicked
      $(addButton).click(function(){
        //Check maximum number of input fields
        if(x < maxField){ 
          x++; //Increment field counter
          $(wrapper).append(fieldHTML); //Add field html
        }
      });
      
      //Once remove button is clicked
      $(wrapper).on('click', '.remove_button', function(e){
        e.preventDefault();
        $(this).parent('div').remove(); //Remove field html
        x--; //Decrement field counter
      });
    });

    
    // The function that runs on button click
    function copyFiles() {
      const button = document.getElementById("btn");
      button.innerHTML = "Copying..";
      button.setAttribute('disabled', 'disabled');
      document.getElementById("loader").style.display = "block";
      var tempid = [];
      var tempname = [];
      $('#files input:checked').each(function() {
        tempid.push($(this).attr('value'));
        tempname.push($(this).attr('title'));
      });

      var email = [];
      $('#editors input:checked').each(function() {
        email.push($(this).attr('value'));
      }); 

      var input_array= $("input[name='field_name[]']").map(function copyFiles() {
        return this.value;
      }).get();
      var emails = [...email, ...input_array];
      console.log(emails)
      
      // client Name
      var name = document.getElementById('clientname');
      var client_name = name.value;
      // var folder_url = name.title;

      google.script.withSuccessHandler(_ => {
        
        // Please set the loading animation here.
        // In this sample modification, when the button is clicked, the button is disabled, when Google Apps Script is finished, the button is enabled.
        document.getElementById("loader").style.display = "none";
        button.removeAttribute('disabled');
        button.innerHTML = "Add";
      }).run.copy_files(tempid, tempname, client_name, emails);
      
      document.getElementById('clientname').value=''; //ms-options-wrap
      for (var checkbox of markedCheckbox) {
        checkbox.checked = false;
      }
      markedCheckbox.checked = false;
      
    }

  </script>
</form>

<script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script>

<script>

    // Multi step form
    var currentTab = 0; // Current tab is set to be the first tab (0)
    showTab(currentTab); // Display the current tab

    function showTab(n) {
      // This function will display the specified tab of the form...
      var x = document.getElementsByClassName("tab");
      x[n].style.display = "block";
      //... and fix the Previous/Next buttons:
      if (n == 0) {
        document.getElementById("prevBtn").style.display = "none";
      } else {
        document.getElementById("prevBtn").style.display = "inline";
      }
      if (n == (x.length - 1)) {
        document.getElementById("nextBtn").innerHTML = "Copy Files";
        document.getElementById("nextBtn").setAttribute('id', 'btn');
        document.getElementById("btn").setAttribute('onclick', 'copyFiles()');
        // document.getElementById("btn").removeAttribute('onclick')
      } else {
        document.getElementById("btn").innerHTML = "Next";
        document.getElementById("btn").setAttribute('id', 'nextBtn');
        document.getElementById("nextBtn").setAttribute('onclick', 'nextPrev(1)');
      }
      //... and run a function that will display the correct step indicator:
      fixStepIndicator(n)
    }

    function nextPrev(n) {
      // This function will figure out which tab to display
      var x = document.getElementsByClassName("tab");
      // Exit the function if any field in the current tab is invalid:
      if (n == 1 && !validateForm()) return false;
      // Hide the current tab:
      x[currentTab].style.display = "none";
      // Increase or decrease the current tab by 1:
      currentTab = currentTab + n;
      // if you have reached the end of the form...

      showTab(currentTab);
    }

    function validateForm() {
      // This function deals with validation of the form fields
      var x, y, i, valid = true;
      x = document.getElementsByClassName("tab");
      y = x[currentTab].getElementsByTagName("input");
      // A loop that checks every input field in the current tab:
      for (i = 0; i < y.length; i++) {
        // If a field is empty...
        if (y[i].value == "") {
          // add an "invalid" class to the field:
          y[i].className += " invalid";
          // and set the current valid status to false
          valid = true;
        }
      }
      // If the valid status is true, mark the step as finished and valid:
      if (valid) {
        document.getElementsByClassName("step")[currentTab].className += " finish";
      }
      return valid; // return the valid status
    }

    function fixStepIndicator(n) {
      // This function removes the "active" class of all steps...
      var i, x = document.getElementsByClassName("step");
      for (i = 0; i < x.length; i++) {
        x[i].className = x[i].className.replace(" active", "");
      }
      //... and adds the "active" class on the current step:
      x[n].className += " active";
    }
  </script>
</body>

<script>
   function addList() {
      google.script.run
      .withFailureHandler(onFailure)
      .withSuccessHandler(addListValues)
      .getList();
   }

  function addListValues(values) {
  var list = document.getElementById('dropdownList');
  var temp_name = values.value;
  var url_link = values.url_link;
  
  for (var i = 0; i < temp_name.length; i++) {
    var option = document.createElement("option"); // Modified
    option.value = temp_name[i]; // Modified
    option.title = url_link[i];
    list.appendChild(option); // Modified
  }
  
}

function onFailure(err) {
  alert('There was an error!' + err.message);
}

虽然这可能是一个很长的脚本来阅读和 go 通过它。 但是帮助我解决它对我来说意义重大，我将非常感谢你。 提前致谢。

Answer 1

检查您的代码后，我看到了一些印刷错误，如下所示（请参阅内联注释）：

 google.script.withSuccessHandler(_ => { //I think this should be google.script.run.withSuccessHandler
        
        // Please set the loading animation here.
        // In this sample modification, when the button is clicked, the button is disabled, when Google Apps Script is finished, the button is enabled.
        document.getElementById("loader").style.display = "none";
        button.removeAttribute('disabled');
        button.innerHTML = "Add";
      }).run.copy_files(tempid, tempname, client_name, emails);

这里还有三个似乎输入错误的标签：

<option class="<?= option.clas ?> post" value="<?= option.value ?>"><?= option.text ?></option>

这应该是：

<option class="<?= option.class ?> post" value="<?= option.value ?>"><?= option.text ?></option>