javascript - Dynamically Load Div Elements and Assign IDs -
i understand how dynamically load html, having trouble understanding how load it, assign, , keep track of ids elements inside loaded div
.
this main block
<div id="add-equip-container"> <div id="add-equip-content"> </div> <button id="add-equipment">add more equipment</button> <button id="submit-equipment">submit equipment</button> </div>
now, every time add-equipment
clicked, want load following block add-equip-content
.
<div class="add-equip-form"> <input id="?" type="text" placeholder="equipment description..."/></br> <input id="?" type="text" placeholder="equipment number"/></br> <input id="?" type="text" placeholder="other stuff..."/></br> </div>
each block inserted beneath previous 1 loaded. have no idea how assign , keep track of various ids dished out during operation. love solution not involve jquery. trying lean vanilla javascript before frameworks.
i sure there may question or blog or on already, don't know best keywords search for. time use "dynamically load html" in search keywords, ajax tutorial results.
thanks in advance help!
one solution not load html, create via javascript. useful in case adding same code page, different id's. write function this:
var form_index = 0; //elem element appending to. function addform(elem) { //create container var form_container = document.createelement("div"); form_container.classname = "add-equip-form"; //description input var desc = document.createelement('input'); desc.id = "equip-desc-" + form_index; desc.type = "text"; desc.placeholder = "equipment description..."; //equipment number input var num = document.createelement('input'); num.id = "equip-num-" + form_index; num.type = "text"; num.placeholder = "equipment number"; //other var other = document.createelement('input'); other.id = "equip-other-" + form_index; other.type = "text"; desc.placeholder = "other stuff..."; //append inputs form_container.appendchild(desc); form_container.appendchild(num); form_container.appendchild(other); //append form elem.appendchild(form_container); form_index++; }
then, access created id's, need know index of containing div within parent elem. see here javascript solution. once have index, getting form data easy using index query based on id's.
Comments
Post a Comment