Bootstrap Snippet Multiple fields using HTML Bootstrap jQuery

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
<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.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">
        <div class="col-xs-6">
        <form>
            <div class="form-group multiple-form-group" data-max=3>
                <label>Multiple inputs (with data-max=3)</label>
                <div class="form-group input-group">
                    <input type="text" name="multiple[]" class="form-control">
                        <span class="input-group-btn"><button type="button" class="btn btn-default btn-add">+
                        </button></span>
                </div>
            </div>
            <div class="form-group multiple-form-group">
                <label>Multiple selects</label>
                <div class="form-group input-group">
                    <select name="multiple[]" class="form-control">
                        <option value="">Default select</option>
                        <option value="">Option 1</option>
                        <option value="">Option 2</option>
                    </select>
                        <span class="input-group-btn"><button type="button" class="btn btn-default btn-add">+
                        </button></span>
                </div>
            </div>
            <div class="form-group multiple-form-group">
                <label>Multiple textareas</label>
                <div class="form-group input-group">
                    <textarea name="multiple[]" class="form-control" rows="3"></textarea>
                        <span class="input-group-btn"><button type="button" class="btn btn-default btn-add">+
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
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 ($) {
    $(function () {
        var addFormGroup = function (event) {
            event.preventDefault();
            var $formGroup = $(this).closest('.form-group');
            var $multipleFormGroup = $formGroup.closest('.multiple-form-group');
            var $formGroupClone = $formGroup.clone();
            $(this)
                .toggleClass('btn-default btn-add btn-danger btn-remove')
                .html('–');
            $formGroupClone.find('input').val('');
            $formGroupClone.insertAfter($formGroup);
            var $lastFormGroupLast = $multipleFormGroup.find('.form-group:last');
            if ($multipleFormGroup.data('max') <= countFormGroup($multipleFormGroup)) {
                $lastFormGroupLast.find('.btn-add').attr('disabled', true);
            }
        };
        var removeFormGroup = function (event) {
            event.preventDefault();
            var $formGroup = $(this).closest('.form-group');
            var $multipleFormGroup = $formGroup.closest('.multiple-form-group');
            var $lastFormGroupLast = $multipleFormGroup.find('.form-group:last');
            if ($multipleFormGroup.data('max') >= countFormGroup($multipleFormGroup)) {
                $lastFormGroupLast.find('.btn-add').attr('disabled', false);
            }
            $formGroup.remove();
        };
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Multiple fields"
Bootstrap 3.1.0 Snippet by zelenin

Related: See More

Questions / Comments:

"Multiple fields" Bootstrap 3.1.0 Snippet by zelenin

Related: See More

Questions / Comments:

"Multiple fields"
Bootstrap 3.1.0 Snippet by zelenin