Question

我从here获得了这段代码，我修改了一些内容，为输入添加了唯一的数字。

var i = 1;

function addkid() {
  i++;
  var div = document.createElement('div');
  var id = i;
  div.innerHTML = 'Child_' + id + ': <input type="text" name="child_' + id + '"/>' + ' <input type="button" id="add_kid()_' + id + '" onclick="addkid()" value="+" />' + ' <input type="button" id="rem_kid()_' + id + '" onclick="remkid(this)" value="-" />';
  document.getElementById('kids').appendChild(div);
}

function remkid(div) {
  document.getElementById('kids').removeChild(div.parentNode);
  i--;
}

<form>
  Name:
  <input type="text" name="name">
  <br/>
  <div id="kids">
    Child_1:
    <input type="text" name="child_1">
    <input type="button" id="add_kid()_1" onclick="addkid()" value="+" />
  </div>
  Phone:
  <input type="text" name="phone">
  <br/>
  <input type="submit" name="submit" value="submit" />
</form>

当我在浏览器中查看它时，我可以正确添加/删除文本框，但如果我从中间删除一些文本框，则Child_id编号再次重复，导致输入文本框具有重复的ID。

如何确保没有重复或缺少ID？
如何使用ID或名称从每个动态文本框中获取值，并在提交时动态创建JSON对象？
如何将这些值或JSON对象传递给Appscript？

欢迎任何帮助。

Answer 1

问题1：此代码应该注意为textBox提供唯一ID，而不包含id号中的任何空白。我通过使用函数getID来实现这一点，该函数跟踪数组中的可用ID。每当我们删除一个元素时，该索引的数组值都设置为-1。我们使用indexOf搜索“-1”并跟踪未使用的ID。

var index = [];
// Array starts with 0 but the id start with 0 so push a dummy value
index.push(0);
// Push 1 at index 1 since one child element is already created
index.push(1)

function addkid() {
  
  var div = document.createElement('div');
  var id = getID();
  // Set this attritube id so that we can access this element using Id 
  div.setAttribute("id","Div_"+id);
  
  div.innerHTML = 'Child_' + id + ': <input type="text" name="child_' + id + '"/>' + ' <input type="button" id="add_kid()_' + id + '" onclick="addkid()" value="+" />' + ' <input type="button" id="rem_kid()_' + id + '" onclick="remkid('+id+')" value="-" />';
  // inside of passing this parameter in remkid we pass id number
  document.getElementById('kids').appendChild(div);
}
   
function remkid(id) {
// use the id arugment to get the div element using unique id set in addkid
  try{
var element = document.getElementById("Div_"+id)
element.parentNode.removeChild(element);
    index[id] = -1;
    //id number is = index of the array so we set to -1 to indicate its empty
    }
  catch(err){
    alert("id: Div_"+id)
    alert(err)
    
    }
}  
 function getID(){
   var emptyIndex = index.indexOf(-1);
   if (emptyIndex != -1){
     index[emptyIndex] = emptyIndex
     
     return emptyIndex
   } else {
   emptyIndex = index.length
   index.push(emptyIndex)
   return emptyIndex
     }
   }

<form action ="Your app script link here" method="post">
  Name:
  <input type="text" name="name">
  <br/>
  <div id="kids">
    Child_1:
    <input type="text" name="child_1">
    <input type="button" id="add_kid()_1" onclick="addkid()" value="+" />
  </div>
  Phone:
  <input type="text" name="phone">
  <br/>
  <input type="submit" name="submit" value="submit" />
</form>

问题2,3：您可以使用表单标记将表单的值传递给应用程序脚本：

<form action= "app script web app link" method ="post/get">

现在要使用appscripts访问数据，我们必须创建一个Web应用程序并获取它的链接。这将有助于您入门：https://developers.google.com/apps-script/guides/web

您将创建如下的appscript：

function doPost(e) {
  var ss = SpreadsheetApp.openById("Your Spd ID")
  var sheet = ss.getSheetByName("Sheet1")
  var response = []
  response[0] = new Date() 
  response[1] = e.contentLength
  response[2] = JSON.stringify(e.parameters)
  sheet.appendRow(response)
  return HtmlService.createHtmlOutput('<b>Hello, world!</b>');
}

您的sheet1将收到如此响应：

2/12/2017 14:17:37  47  {"parameter":{"submit":"submit","child_1":"asd","phone":"1234","name":"jagan"},"contextPath":"","contentLength":47,"queryString":null,"parameters":{"submit":["submit"],"child_1":["asd"],"phone":["1234"],"name":["jagan"]},"postData":{"type":"application/x-www-form-urlencoded","length":47,"contents":"name=jagan&child_1=asd&phone=1234&submit=submit","name":"postData"}}

Answer 2

您可以使用i

div#kids

document.querySelectorAll('#kids input[type=text]')[document.querySelectorAll('#kids input[type=text]').length-1].name.split("_")[1]

这将获取最后一个孩子的名字，并根据它设置下一个孩子的ID。

演示：https://jsfiddle.net/8Ljvgmac/1/

我更新了jsfiddle链接，名为captureResponse的函数将动态迭代添加的子节点并返回一个JSONObject。您可以在提交函数时调用此函数。

3.您可以向Appscript发出GET或POST请求并获取Appscript中的数据进行处理

Answer 3

如果不考虑跳过ID号，您可以从i--中删除remkid()。这样可以防止任何重复的ID。否则，您可以执行以下操作：

var i = 1;
var removedkids = [];

function addkid() {
  if (removedkids.length > 0) {
    newid = removedkids.shift();
  } else {
    newid = i;
    i++;
  }
}

function removeKid(id) {
  removedkids = removedkids.push(id).sort();
}

使用javascript或appscript唯一地添加/删除动态文本框

3 个答案: