Google HTML 服务 - 动态表单

Question

我正在尝试使用 Google App Script 平台创建一个表单，并且我正在尝试通过按 UI 中的按钮动态添加元素。我该怎么做？这是我的代码：

index.html

<form id="myForm">
   Name <input name="myName" type="text" /><br/><br/>
   Address <input name="myAddress" type="text" /><br/><br/>
   <input type="button" value="Add element" onclick="google.script.run.withSuccessHandler(addElement)" />
   <input type="button" value="submit" onclick="google.script.run.withSuccessHandler(showData).processForm(this.form)" />
</form>
<div id="output"></div>
<script>
 function addElement(){
   document.getElementById('myForm').append("input");

 }

 function showData(data){
   var div = document.getElementById('output');
   div.innerHTML = '<p>' + data + '</p>';
 }
</script>

这里是Code.gs

function doGet() {
  return   HtmlService.createHtmlOutputFromFile('index').setSandboxMode(HtmlService.SandboxMode.NATIVE);
}

function processForm(formObject){
  Logger.log(formObject);
  return formObject;
}

感谢您的帮助！

Answer 1

您正在调用 Google 服务器端函数而不是脚本标记中的函数：

<input type="button" value="Add element" onclick="google.script.run.withSuccessHandler(addElement)" />

应该是：

<input type="button" value="Add element" onclick="addElement()" />

我看到你在使用 innerHTML，所以你知道。

Mozilla Documentation

您似乎正在尝试使用元素对象不可用的方法（追加）。也许您将 UI 方法与 DOM（文档对象模型）混淆了。

Document Object Model

如果你想添加一个输入标签，你可以使用这样的东西：

function addElement(){
  document.getElementById('myForm').innerHTML = "<input type='text' id='inputTwo'>";
}

还有一个appendChild方法：

appendChild method - Microsoft Documentation

还有一个createElement方法：

createElement Method - Mozilla Documentation

因此，您可以使用 Document 对象或 Element 对象。 Document 对象的方法是：

document.createElement()
document.removeChild()
document.appendChild()
document.replaceChild()

Google HTML 服务 - 动态表单

Google HTML service - Dynamic form

html

javascript

jquery

google-apps-script