Cloning whole form elements after clicking button

Question

I have this following form

<form action="" class="form-horizontal">
<div id="wrapper">
    <div class="row-fluid">
        <div class="span6">
            <div class="control-group">
                <label class="control-label"><?=$core->l("default_comm_type");?></label>
                <div class="controls">          
                    <select id="fld_default_comm_type" name="fld_default_comm_type[]" defaultValue="-1" class="m-wrap span10" field="fld_default_comm_type" appEditor="true">
                        <?=combo_creator::render_default_comm_types()?>
                    </select>
                </div>
            </div>
        </div>
        <div class="span4 checkerAlign">
            <div class="control-group">
                <div class="controls">
                    <?=$core->l("is_active");?> 
                </div>
            </div>
        </div>
        <div class="span2 checkerAlign"><input type="checkbox" name="fld_active[]" id="fld_active" editType="booleanEdit" appEditor="true"/></div>
    </div>
    <div><a href="#" id="addMore">Add Row</a></div>
</div>

The question is when user clicks Add Row button, I need to create a copy of this form elements inside

<div id="wrapper">

How can i do that?

EDIT: SOLVED

<form action="" class="form-horizontal" id="wrapper">
<div class="row-fluid">
    <div class="span6">
        <div class="control-group">
            <label class="control-label"><?=$core->l("default_comm_type");?></label>
            <div class="controls">          
                <select id="fld_default_comm_type" name="fld_default_comm_type[]" defaultValue="-1" class="m-wrap span10" field="fld_default_comm_type" appEditor="true">
                    <?=combo_creator::render_default_comm_types()?>
                </select>
            </div>
        </div>
    </div>
    <div class="span4 checkerAlign">
        <div class="control-group">
            <div class="controls">
                <?=$core->l("is_active");?> 
            </div>
        </div>
    </div>
    <div class="span2 checkerAlign"><input type="checkbox" name="fld_active[]" id="fld_active" editType="booleanEdit" appEditor="true"/></div>
</div>
<a href="#" id="addMore">add</a>
</form>

In the Js part:

jQuery("#addMore").click(function(){
 var contents = jQuery("form").html();
    jQuery("#wrapper").append(contents);
});

When add is clicked it inserts form elements just as I wanted and when delete is clicked it deletes elements. Thank you for the tips guys Problem solved! Thanks guys.

glade to hear that you have figured it out, please consider marking the best answer below as "answer" to reward the people who have tried to help you. — Mohammed Swillam, Oct 28 '13 at 15:53

score 5 · Accepted Answer · answered Oct 28 '13 at 15:46

I think you need to duplicate the contents of (row-fluid), not the whole (Wrapper) contents, this should let you add more rows of your original form template when clicking on AddMore link.

This is an edit to the suggested solution by @user2389688:

$("#addMore").click(function(){   
    $(".row-fluid:last").clone().appendTo(".wrapper");  
});

JsFiddle Link: http://jsfiddle.net/tCY8v/1/

score 1 · Answer 2 · answered Oct 28 '13 at 15:36

1

Something like this ?

$("#addMore").click(function(){
   var contents = $("form").html();
   $("#wrapper").append(contents);  
});

http://jsfiddle.net/tCY8v/

If I did understand your question correctly.

answered Oct 28 '13 at 15:36

JeffreyZ

566
3
12

If I did understand it correctly he wants to copy the form contents and append it to a div in that same form. If he only wants to add one row then he needs to clarify that. – JeffreyZ Oct 28 '13 at 15:45
Not wrong at all. If you look at the Question, this is exactly what he asks for. – Billy Oct 28 '13 at 15:45
He said he need to dublicate the contents of the `form`, but if you investigated the logic behind his question, he actually need to present a new row of elements which are originally inside the form=>.row-fluid div. what I meant by (wrong) is that the final usable solution was for sure not a desirable result of any request. – Mohammed Swillam Oct 28 '13 at 15:51

score 0 · Answer 3 · answered Oct 28 '13 at 15:44

0

For example:

$('#addMore').click(function() {
    $('.row-fluid').eq(0).clone().insertBefore(this);
});

answered Oct 28 '13 at 15:44

Martin Denk

554
3
14

Cloning whole form elements after clicking button

3 Answers3

Linked