Dynamically adding duplicate (unique ID) form Div elements using javascript

Question

I have a form having fields like:

<div class="row">
   <div class="field">
      <input class="" type="text" name="college" id="college"/>
   </div>

   <div class="field">
      <input class="" type="text" name="city" id="city"/>
   </div>

   <div class="field">
      <input class="" type="text" name="zip" id="zip"/>
   </div>
</div>
<input type="button" class="buttonWidth" id="btnAddressAdd" value="Add Worksite Addressess"/>

I have a Add extra address button that add's another copy of div "row" to the page. I need to send all data from the page as a request to the Controller. How do I write a script that add's extra div copy onclick of the button and also appends a unique id to each of the new fields?

I am working into a code base that uses plain javascript and DOJO for their inbuilt functions. I would have to stick to these coding practices itself. :( — lesac
– lesac, Commented Dec 14, 2012 at 12:02

phusick · Accepted Answer · 2012-12-14 15:40:56Z

See working example in Dojo: http://jsfiddle.net/phusick/PeQCN/

And the same code in plain vanilla JavaScript: http://jsfiddle.net/phusick/Rceua/

The Dojo version employs dojo/_base/lang::clone as @Peter Rader mentioned:

// var lang    = require("dojo/_base/lang");
// var array   = require("dojo/_base/array");
// var query   = require("dojo/query");
// var domAttr = require("dojo/dom-attr");

var counter = 0;

function duplicate(/*Node*/sourceNode, /*Array*/attributesToBump) {
    counter++;
    var out = lang.clone(sourceNode);
    if (domAttr.has(out, "id")) { out.id = bump(out.id); }

    query("*", out).forEach(function(node) {
        array.forEach(attributesToBump, function(attribute) {
            if (domAttr.has(node, attribute)) {
                domAttr.set(node, attribute, bump(domAttr.get(node, attribute)));
            }        
        })
    });

    function bump(/*String*/str) {
        return str + "_" + counter;
    }

    return out;
}

How to use the aforementioned duplicate function:

// var dom          = require("dojo/dom");
// var domConstruct = require("dojo/dom-construct");

var sourceNode = dom.byId("fieldset");
var node = duplicate(sourceNode, ["id", "name", "placeholder"]);  
domConstruct.place(node, sourceNode, "after");

closure · Accepted Answer · 2012-12-14 12:49:55Z

0

I have written code to achieve this.

Logic:
1) get the innerHTML of desired parent
2) replace id in the text
3) Insert the new html

See a working code

Pardon me for bad style of coding on JS part. I am not use to coding directly on DOM. I prefer JQuery.

edited Dec 14, 2012 at 12:49

answered Dec 14, 2012 at 12:38

closure

7,4521 gold badge25 silver badges23 bronze badges

Comments

Grim · Accepted Answer · 2012-12-14 13:49:35Z

0

Try

to use this snipplet (see usage) http://dojotoolkit.org/reference-guide/1.8/dojo/_base/lang.html#dojo-base-lang-clone

edited Dec 14, 2012 at 13:49

answered Dec 14, 2012 at 13:17

Grim

2,16312 gold badges63 silver badges139 bronze badges

Collectives™ on Stack Overflow

Dynamically adding duplicate (unique ID) form Div elements using javascript

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related