how do i clone a multiple html input field with jquery

Question

i have a complex div with input field somewhat like this

<input type="text" name="firstname">
<input type="text" name="lastname">
<input type="text" name="email">
<input type="text" name="address">

<div id="section_toClone">
<input type="text" name="tree[tree1][fruit]">
<input type="text" name="tree[tree1][height]">
<input type="checkbox name tree[tree1][color] value="green">Green </input>
<input type="checkbox name tree[tree1][color] value="yellow">yellow </input>
</div>
<button id="add_more"> Add </button>

now when someone click on add i want something like this to happen

<input type="text" name="tree[tree1][fruit]">
<input type="text" name="tree[tree1][height]">
<input type="checkbox name tree[tree1][color] value="green">Green </input>
<input type="checkbox name tree[tree1][color] value="yellow">yellow </input>

<input type="text" name="tree[tree2][fruit]">
<input type="text" name="tree[tree2][height]">
<input type="checkbox name tree[tree2][color] value="green">Green </input>
<input type="checkbox name tree[tree2][color] value="yellow">yellow </input>

<input type="text" name="tree[tree3][fruit]">
<input type="text" name="tree[tree3][height]">
<input type="checkbox name tree[tree3][color] value="green">Green </input>
<input type="checkbox name tree[tree3][color] value="yellow">yellow </input>

and so on..... but my script only clone doesnt change the value of tree from tree1 to tree2 to tree3 and so on.... here is my jquery script

 $('#add_more').click(function(){
         $("#section_toClone").clone(true).insertBefore("#add_more").find('input').val("").val('');
});

how do i increment that automatically?? i want to mention one more thing in actual html code. it has more then 3 input and 3 checkbox field

Marc B · Accepted Answer · 2016-08-09 19:51:17Z

Don't even bother putting the numbers into the array keys. Just let PHP take care of it itself:

<input name="tree[fruit][]" value="foo" />
<input name="tree[fruit][]" value="bar" />
<input name="tree[fruit][]" value="baz" />

Any [] set which DOESN'T have an explicitly specified key will have one generated/assigned by PHP, and you'll end up with

$_POST['tree'] = array(
     0 => 'foo',
     1 => 'bar',
     2 => 'baz'
);

As long as your form is generated consistently, browsers will submit the fields in the same order they appear in the HTML, so something like this will work:

<p>#1</p>
<input name="foo[color][]" value="red"/>
<input name="foo[size][]" value="large" />

<p>#2</p>
<input name="foo[color][]" value="puce" />
<input namke="foo[size][]" value="minuscule" />

and produce:

$_POST['color'] = array('red', 'puce');
                          |        |
$_POST['size'] = array('large', 'minuscule');

But if you start mixing the order of the fields:

<p>#3</p>
<input name="foo[color][]" value="red"/>
<input name="foo[size][] value="large" />

<p>#4</p>
<input namke="foo[size][] value="minuscule" />
<input name="foo[color][] value="puce" />


$_POST['color'] = array('red', 'puce');
                               /    
                              /
$_POST['size'] = array('minuscule', 'large');

Note how they're reversed.

vileRaisin · Accepted Answer · 2016-08-09 20:22:52Z

I wouldn't post this without feeling a bit ashamed of how bad it is written, but the following solution does the trick. Badly.

var treeCount = 1;

 $('#add_more').click(function(){
      $("#section_toClone")
        .clone(true)
        .insertBefore("#add_more")
        .find('input')
        .val('')
        .each(function(key,element){ 
            var $element = $(element),
                oldName = $element.attr('name'),
                newName;

                if(oldName){
                  newName = oldName.replace(/tree[0-9]+/, 'tree'+(treeCount+1));
                  $element.attr('name', newName);
                }
                else {
                  treeCount--;
                }

         })
      .promise().done(function(){
        treeCount++;
      });


  });

(please don't shoot me)

Collectives™ on Stack Overflow

how do i clone a multiple html input field with jquery

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related