1

我试图在按钮上的谷歌表格侧边栏中显示加载程序，单击完整页面或至少单击按钮，以便提交表单的用户在提交较早的表单之前不应再次按下。我已经通过 js/jquery 添加了加载器。虽然它们工作得很好，但它们太快了，甚至无法向用户展示。我可以添加一些延迟，但我不知道脚本需要多长时间才能完成。因此，最好从应用程序脚本/服务器端运行它。

完整的页面加载器 按钮加载器

网页：

<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);
}
4

1 回答 1

2

修改点：

  • addvalues的<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到您的加载程序。

笔记：

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

参考：

于 2022-01-24T00:39:38.530 回答