javascript - Clone elements and add into mark-up code so form submission picks them up -

javascript - Clone elements and add into mark-up code so form submission picks them up -

when clone button clicked, size , length fields should cloned , placed below. crucial point is, should able see these cloned mark-up code when check browser source code because i'll submit fields.

html

<style> div { display:inline-block; } .needles, .yarns, .options { border:1px solid #14a; padding:10px; } </style> <div class='needles'> <p>needles</p> <div class='options'> <div class='label'>size</div> <div class='field'> <input id='size-0' name='size-0' value='size' /> </div> </div> <br /> <div class='options'> <div class='label'>length</div> <div class='field'> <input id='length-0' name='length-0' value='length' /> </div> </div> <br /><br /> <button>clone</button> </div> <br /> <div class='yarns'> <p>yarns</p> <div class='options'> <div class='label'>size</div> <div class='field'> <input id='size-0' name='size-0' value='size' /> </div> </div> <br /> <div class='options'> <div class='label'>length</div> <div class='field'> <input id='length-0' name='length-0' value='length' /> </div> </div> <br /><br /> <button>clone</button> </div>

i did think mess honest.

$("button").click(function(event) { event.preventdefault(); var $parent = $(this).closest('div'); var $length = $parent.prev(); var $size = $length.prev(); var size = $size.clone(false).wrap('<p>').parent().html(); var length = $length.clone(false).wrap('<p>').parent().html(); var spanid = $(size).children('span').attr('id'); var idarray = spanid.split("__"); var currentidentifierno = idarray[idarray.length-2]; var newidentifierno = parseint(currentidentifierno)+1; var currentidentifier = '__' + currentidentifierno + '__'; var newidentifier = '__' + newidentifierno + '__'; var re = new regexp(currentidentifier, 'g'); size = size.replace(re, newidentifier); length = length.replace(re, newidentifier); var html = size + length; $(this).before(html); });

you have alter name attribute work:

length.find('input').attr('name', 'length-1'); size.find('input').attr('name', 'size-1');

if send same key / value pairs in form, server doesn't know which.

javascript jquery html