CODEWITHSUNDEEP
jqueryforms
user244394
user244394

Reputation: 13448

jquery Dynamicaly clone fields and increment id

How can I clone this block and also increment the title number and if possible increment the ids?

To each div "block-1" i want to have add and delete option. Thanks in advance

<div class="block-1">

  <div class="fieldset-emp">
    <fieldset>

      <h4>title 1</h4>
      <label class="field-first  arrow">First Name<em class="required">&#42;</em><input type="text" name="first_name" id="first_name" value="" /></label>
      <label class="field-last  arrow">Last Name<em class="required">&#42;</em><input type="text" name="last_name" id="last_name" value="" /></label>

      <label class="field-mi  arrow">Middle Initial<em class="required">&#42;</em><input type="text" name="mi" id="mi" value="" /></label>
      <label class="field-ssn  arrow">Social Security #<em class="required">&#42;</em><input type="text" name="ssn" id="ssn" value="" /></label>
      <div class="eesradioitem-1">
        <label class="field-faddress  arrow">Foreign Address<em class="required">&#42;</em></label>
        <div class="eesradioitem">
          <label>Yes </label>
          <input type="radio" name="faddress" value="yes" />
        </div>
        <div class="eesradioitem">
          <label>No</label>
          <input type="radio" name="faddress" value="no" checked="checked"/>
        </div>
      </div>

      <label class="field-address1  arrow">Address  line 1<em class="required">&#42;</em><input type="text" name="address1" id="address1" value="" /></label>
      <label class="field-address2  arrow">Address  line 2<em class="required">&#42;</em><input type="text" name="address2" id="address2" value="" /></label>


      <label class="field-city arrow">City <em class="required">&#42;</em><input type="text" name="city" id="city" value="" /></label>
      <label class="field-email arrow">Email <em class="required">&#42;</em><input type="text" name="email" id="email" value="" /></label>


      <label class="field-dob arrow">Date of Birth <em class="required">&#42;</em><input type="text" name="dob" id="dob" value="" /></label>
      <label class="field-homephone arrow">Home Phone<em class="required">&#42;</em><input type="text" name="homephone" id="homephone" value="" /></label>
      <label class="field-gender arrow">Gender <em class="required">&#42;</em><input type="text" name="gender" id="gender" value="" /></label>


    </fieldset>
  </div>

</div>

Upvotes: 1

Views: 2875

Answers (2)

Mark Schultheiss
Mark Schultheiss

Reputation: 34168

I added a couple of buttons to your markup in my example here: http://jsfiddle.net/w4efg/ then it is just:

$('.addme').click(function(ev) {
    var aim = $(this);
    var ap = aim.parent();
    var newbk = ap.clone(true);
    var apindex = $('[class^=block-]').index(ap);
    var bkId = 'block-' + (apindex + 1);
    newbk.addClass('block-' + (apindex + 2)).removeClass(bkId);
    ap.after(newbk);
});
$('.removeme').click(function(){
    $(this).parent().remove();
});

Note the classes in my CSS just to show it working on the first three.

My example is a bit verbose to show what it does clearly if you want to chunk it down a bit. It also allows the first block to be deleted which might be bad :). And the logic for the index just adds a new number, so the block-xx gets the xx as the index AFTER the block you click in and might be better done.

EDIT: I added the "title" stuff (might want a class on the h4 for title) and took out some code as noted in this update: http://jsfiddle.net/w4efg/1/

Upvotes: 2

Chris W.
Chris W.

Reputation: 39169

If you're using the jQuery javascript Framework, you can do something like this...

Build a function...

var clone_block = function($block) {

    block_num = Number($block.attr('class').substr(6))+1 // <-- Add one to block number
    $cloned = $block.clone()
    $cloned.children('.fieldset-emp h4:first').html('title '+block_num)
    $cloned.attr('class','block-'+block_num)
    return $cloned
}

...which will enable you to do something like this, where #id_of_your_block_container is a selector for the element that will contain all of your blocks...

clone_block($('.block-1')).appendTo($('#id_of_your_block_container'))

Just as a side note it would be better practice to have all of your "block" <div>s have a class of "block" and have unique ids, e.g.

<div id="block-1" class="block>...</div> 
<div id="block-2" class="block>...</div>

Upvotes: 0

Related Questions