Hinzufügen/Entfernen dynamische Textfelder eindeutig JavaScript oder appscript Verwendung

Question

Ich habe diesen Code aus here dem ich ein Bit geändert haben eindeutige Nummern an die Eingänge hinzuzufügen.

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>

Wenn ich es im Browser zu sehen, kann ich Textfelder richtig hinzufügen/entfernen, aber wenn ich einige Textfelder entfernen von in-between, dann ist die Child_id Zahlen wieder wiederholen, was Eingang Textfelder mit doppelten IDs.

1. Wie stelle ich sicher, dass es keine doppelten oder fehlenden IDs gibt?
2. Wie kann ich Werte von jedem dieser dynamischen Textfelder mit ihren IDs oder Namen greifen und dynamisch ein JSON-Objekt beim Senden erstellen?
3. Wie kann ich diese Werte oder das JSON-Objekt an Appscript weitergeben?

Jede Hilfe wäre sehr willkommen.

Answer 1

Frage 1: Dieser Code sollte geben eindeutige IDs zu Ihrem textBox kümmern mit sich lückenlos in die ID-Nummer. Ich erreiche dies mit einer Funktion getID, die die verfügbaren IDs in einem Array verfolgt. Wann immer wir ein Element entfernen, wird der Array-Wert mit diesem Index auf -1 gesetzt. Wir suchen mit indexOf nach "-1" und behalten die ungenutzte ID im Auge.

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>

Frage 2,3: Sie können den Wert des Formulars zu einem App Skript übergeben Sie das Formular-Tag:

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

Nun werden die Daten mit appscripts zuzugreifen, Wir müssen eine Web-App erstellen und einen Link dazu bekommen.Dies wird Ihnen den Einstieg: https://developers.google.com/apps-script/guides/web

Sie eine appscript wie dies schaffen wird:

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

Und Ihre sheet1 wird eine Antwort wie so erhalten:

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. Statt i Überwachung können Sie Namen des letzten Kindes in div#kids von document.querySelectorAll('#kids input[type=text]')[document.querySelectorAll('#kids input[type=text]').length-1].name.split("_")[1] mit hinzugefügt überwachen

dies wird den Namen des letzten Kindes bekommen und die ID des nächsten Kindes eingestellt nach ihm.

Demo: https://jsfiddle.net/8Ljvgmac/1/

2. Ich aktualisiere haben die jsfiddle Link und eine Funktion namens captureResponse wird dynamisch hinzugefügt Childs iterieren und eine JSONObject zurückzukehren. Sie können diese Funktion als Voranmeldung der Funktion aufrufen.

3.You eine GET oder POST-Anforderung an Appscript treffen kann und die Daten in Appscript erhalten, sie zu verarbeiten

Answer 3

Wenn das Überspringen Zahlen ID kein Problem ist, können Sie nur die i-- von remkid() entfernen. Das würde doppelte IDs verhindern. Andernfalls könnten Sie so etwas wie:

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