"FVR Dynamic Clone"
Bootstrap 3.3.0 Snippet by fernandovr

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="row"> <h2>FVR Dynamic</h2> <p><b>Results:</b> <span id="results"></span></p> </div> <form class="form-inline"> <div class="fvrduplicate"> <div class="form-group"> <label for="exampleInputName2">Nome</label> <input type="text" class="form-control" id="exampleInputName2" name="user[][nome]" placeholder="Jane Doe"> </div> <div class="form-group"> <label for="exampleInputEmail2">Email</label> <input type="email" class="form-control" id="exampleInputEmail2" name="user[][email]" placeholder="jane.doe@example.com"> </div> </div> <button type="submit" class="btn btn-primary btn-lg btnenviar">Enviar</button> </form> </div>
.fvrclonned { margin-top: 10px; } .glyphicon { font-size: 12px; } /* classes de teste */ body, select { font-size: 14px; } form { margin: 5px; } p { color: red; margin: 5px; } b { color: blue; } .btnenviar { margin-top: 10px; }
$(function() { $(document).ready(function(){ var buttonadd = '<span><button class="btn btn-success btn-add" type="button"><span class="glyphicon glyphicon-plus"></span></button></span>'; var fvrhtmlclone = '<div class="fvrclonned">'+$(".fvrduplicate").html()+buttonadd+'</div>'; $( ".fvrduplicate" ).html(fvrhtmlclone); $( ".fvrduplicate" ).after('<div class="fvrclone"></div>'); $(document).on('click', '.btn-add', function(e) { e.preventDefault(); $( ".fvrclone" ).append(fvrhtmlclone); $(this).removeClass('btn-add').addClass('btn-remove') .removeClass('btn-success').addClass('btn-danger') .html('<span class="glyphicon glyphicon-minus"></span>'); }).on('click', '.btn-remove', function(e) { $(this).parents('.fvrclonned').remove(); e.preventDefault(); return false; }); }); // FUNÇÂO DE TESTE function showValues() { var fields = $( ":input" ).serializeArray(); $( "#results" ).empty(); jQuery.each( fields, function( i, field ) { $( "#results" ).append( field.value + " " ); }); } $( "form" ).submit(function( event ) { showValues(); console.log( $( this ).serializeArray() ); event.preventDefault(); }); });

Related: See More


Questions / Comments:

Hello!

Thanks for great snippet, it's very useful for me.

Have one question - i need use several forms with dynamic fields. How i can divide them? If not changing script, it placed new elements in each form. I think about some hidden control inputs and using js val for identify them. Maybe you know another way?

Алексей Горшенков () - 7 years ago - Reply 0