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

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的文本框。

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

任何帮助将是最受欢迎的。

Answer 1

问题1：此代码应该给予唯一的ID，以您的TextBox控件以及出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的数据访问，我们将不得不制作一个网络应用并获得一个链接。这将帮助你开始：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

1. 相反监测i，你可以通过使用document.querySelectorAll('#kids input[type=text]')[document.querySelectorAll('#kids input[type=text]').length-1].name.split("_")[1]

这将让最后一个孩子的名字，并设置根据它的下一个孩子的id显示器内部div#kids添加最后一个孩子的名字。

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

我更新的jsfiddle链路和名为captureResponse功能可动态遍历加入儿童的，并返回一个JSONObject。你可以调用这个函数提交函数。

3.You可以Appscript创下GET或POST请求Appscript和获取数据来处理它

Answer 3

如果跳过ID号是不是一个问题，你可以只从remkid()删除i--。这将防止任何重复的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(); 
 
}