使用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(); 
 
}