Apps 脚本：单击按钮时显示加载程序

Question

我正在尝试在按钮上的 google 工作表侧边栏中显示一个加载程序，在整个页面上或至少在按钮上单击，以便提交表单的用户在更早的表单之前不会再次按下已提交。我已经通过 js/jquery 添加了加载器。尽管它们工作正常，但速度太快，甚至无法向用户展示。我可以添加一些延迟，但同样我不知道脚本需要多少时间才能完成。因此，从应用 script/server-side.

中 运行 可能会更好

Html 页数：

<form >
    <div class="inputbox">
        <label for="name"><strong>Client Business Name</strong></label>
        <input type="text" placeholder="Client Business Name" name="name" required>
    </div>
    <div class="inputbox">
        <label for="description"><strong>Client Description</strong></label>
        <input type="text" placeholder="Client Description" name="description" required>
    </div>
    <div class="inputbox">
        <label for="domain"><strong>Domain</strong></label>
        <input type="url" placeholder="www.example.com" name="domain">
    </div>
    <div class="inputbox">
        <label for="homepage"><strong>Home Page</strong></label>
        <input type="url" placeholder="www.example.com/home" name="homepage" >
    </div>
    <div class="inputbox">
        <label for="kpi"><strong>Link Goal Per month</strong></label>
        <input type="url" placeholder="www.example.com/home/blog" name="kpi" >
        
    </div>
    <button id="btn" onclick="addvalues" >Add</button>
  </form>

JS:

<script>
    function addvalues() {
        document.getElementById("btn").innerHTML = "Adding.."
        document.getElementById("btn").setAttribute('disabled', 'disabled')
        google.script.run.clientAdd()

    }
</script>

应用程序脚本：

function clientAdd(form) {
  var ss = SpreadsheetApp.getActive();
  var sheet = ss.getSheetByName('Clients');
  sheet.getRange(sheet.getLastRow() + 1, 2).setValue(form.name);
  sheet.getRange(sheet.getLastRow(), 3).setValue(form.domain);
  sheet.getRange(sheet.getLastRow(), 4).setValue(form.homepage);
  sheet.getRange(sheet.getLastRow(), 5).setValue(form.description);
  sheet.getRange(sheet.getLastRow(), 6).setValue(form.kpi);
}

Answer 1

修改点：

• addvalues of <button id="btn" onclick="addvalues" >Add</button> 应该是 addvalues();
• 根据你的情况，我认为 withSuccessHandler 可能合适。

当这些点反映到你的脚本中，就变成了下面这样。

修改后的脚本：

HTML

发件人：

<button id="btn" onclick="addvalues" >Add</button>

收件人：

<button id="btn" onclick="addvalues();return false;" >Add</button>

Javascript

发件人：

function addvalues() {
    document.getElementById("btn").innerHTML = "Adding.."
    document.getElementById("btn").setAttribute('disabled', 'disabled')
    google.script.run.clientAdd()

}

收件人：

function addvalues() {
  const button = document.getElementById("btn");
  button.innerHTML = "Adding..";
  button.setAttribute('disabled', 'disabled');
  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.
    button.removeAttribute('disabled');
    button.innerHTML = "Add";
  }).clientAdd();
}

• 当上述修改反映在您的脚本中时，作为一个简单的示例，当单击按钮时，按钮的文本从 Add 更改为 Adding.. 并且按钮被禁用，当 Google Apps 脚本完成时，按钮被启用并且按钮的文本从 Adding.. 更改为 Add。
• 请将withSuccessHandler中的脚本修改为你的loader。

注：

• 我不确定你的整个剧本。所以我建议对你的展示脚本进行简单的修改。

参考：

• withSuccessHandler(function)