Add new fieldset elements with button click

Question

Is there any way with JavaScript to generate all the elements in the fieldset with the click of a button? Code below shows two textboxes and one textarea in a fieldset.When I press 'Add item button',I would like to generate the same textboxes and textarea within that fieldset.

Many thanks for your help.

<fieldset id="fieldset">
<legend id="legend">Professional development</legend>
<p>Item                     <input type ="text" size="25"   name="prof_item" /><br /></p>
<p>Duration                 <input type ="text" size="25"   name="prof_duration" /><br /></p>
<p>Enlargement              <label for="enlargement"></label><p></p>
                            <textarea name="textarea" cols="71" rows="5" id="prof_enlargement">
</textarea></p>
<p><input type="submit" name="Submit" value="Add new item" id="add_prof" /></p>
</fieldset>

Answer 1

You can clone them. First wrap those elements with parent div call it for example "template":

<div id="template">
  <p>Item <input type ="text" size="25" name="prof_item" /><br /></p>
  <p>Duration <input type ="text" size="25" name="prof_duration" /><br /></p>
  <p>Enlargement <label for="enlargement"></label></p>
   <p><textarea name="prof_enlargement" cols="71" rows="5" id=""></textarea></p>
</div>

Second have placeholder that will contain all the clones you add:

<div id="placeholder">
  <div id="template">
     <p>Item <input type ="text" size="25" name="prof_item" /><br /></p>
     ...
   </div>
</div>

And finally this JS code will add the elements in there:

var _counter = 0;
function Add() {
    _counter++;
    var oClone = document.getElementById("template").cloneNode(true);
    oClone.id += (_counter + "");
    document.getElementById("placeholder").appendChild(oClone);
}

Just call the function "Add" in the button click event.. the counter is required to avoid having same ID for more than one element.

Live test case: http://jsfiddle.net/yahavbr/eW6j4/

Answer 2

$('#button').click(function() {
    $('#fieldset').clone().insertAfter($('#fieldset'));
});

Try something like this, Clone() is useful http://api.jquery.com/clone/

-edited after your comment- Add this to your htmlpage:

<script type="text/javascript" src="http://code.jquery.com/jquery-1.5.1.min.js"></script>
<script>
$(document).ready(function() {
    $('#add_prof').click(function() {
            $('#fieldset').clone().insertAfter($('#fieldset'));
    });
});
</script>

-edited again after your comment-

In order to let the function work on newly added inputs as well, we use 'live'. the .click that I suggested works on the elements when the code is executed. When we use .live, the function will be executed with every existing element that you selected, but also with future elements of your selection. Use this:

<script type="text/javascript" src="http://code.jquery.com/jquery-1.5.1.min.js"></script>
<script>
$(document).ready(function() {
    $('fieldset input').live('click',function() {
            $(this).parent('fieldset').clone().insertAfter($(this).parent('fieldset'));
    });
});
</script>

If the code works, please mark this answer as 'accepted answer' so other users with the same question can immediately see the working code.

Answer 3

i prefer javascript way

var fieldset= document.getElementById('fieldset');
var fieldParent = fieldset.parentNode;
var newFieldSet = document.createElement('fieldset');
newFieldSet.innerHTML = fieldset.innerHTML;
fieldParent.appendChild(newFieldSet);

Regards :)