Cloning whole form elements after clicking button

Posted by FreshPro on Stack Overflow See other posts from Stack Overflow or by FreshPro
Published on 2013-10-28T15:20:49Z Indexed on 2013/10/28 15:54 UTC
Read the original article Hit count: 142

Filed under:
|
|
|

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="#" data-action="add">add</a>
<a href="#" data-action="delete">delete</a>
</form>

In the Js part:

jQuery("#addMore").click(function(){
 var contents = jQuery("form").html();
    jQuery("#test").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.

© Stack Overflow or respective owner

Related posts about JavaScript

Related posts about jQuery