"FVR Dynamic Clone"
Bootstrap 3.3.0 Snippet by fernandovr

Post to Facebook Tweet this

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<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>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
.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;
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
$(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 + " " );
});
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Paper Kit 2
Dynamic Sortable Tables
Bootstrap 4 Animated Dynamic Form
Dynamic Avatar Blur

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?

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