https://www.padoetinchem.nl/Scripts/app/subscribeForm.js

1(function ($) {
2    'use strict';
3
4    function addSubscriber() {
5        var form = $(this).closest('form');
6        if (form.length <= 0) {
7            return;
8        }
9
10        var subscriberClass = 'person-form';
11        var nameRegex = /(subscribers)\[[0-9]+\]\./gi;
12        var idRegex = /(subscribers)_[0-9]+__/gi;
13        var subscribers = form.find('.' + subscriberClass);
14        var nrSubscribers = subscribers.length;
15        var lastSubscriber = subscribers.last();
16
17        var template = lastSubscriber.html()
18            .replace(nameRegex, "$1[" + nrSubscribers + "].")
19            .replace(idRegex, "$1_" + nrSubscribers + "__");
20        //$(template).find("input,select,textarea").each(function (inputIndex, input) {
21        //    $(input).removeClass("valid");
22        //});
23        lastSubscriber.after('<div class="' + subscriberClass + '">' + template + '</div>');
24        //remove validations icons of the new subscriber
25        lastSubscriber = form.find('.' + subscriberClass).last();
26        $(lastSubscriber).find("input,select,textarea").each(function (inputIndex, input) {
27            $(input).removeClass('valid input-validation-error');
28        });
29        var firstSubscriber = subscribers.first();
30        var streetname = $(firstSubscriber).find('.streetname').val();
31        var streetnumber = $(firstSubscriber).find('.streetnumber').val();
32        var addressaddition = $(firstSubscriber).find('.addressaddition').val();
33        var zipcodenumbers = $(firstSubscriber).find('.zipcodenumbers').val();
34        var zipcodeletters = $(firstSubscriber).find('.zipcodeletters').val();
35        var residence = $(firstSubscriber).find('.residence').val();
36        $(lastSubscriber).find(".streetname").val(streetname);
37        $(lastSubscriber).find(".streetnumber").val(streetnumber);
38        $(lastSubscriber).find(".addressaddition").val(addressaddition);
39        $(lastSubscriber).find(".zipcodenumbers").val(zipcodenumbers);
40        $(lastSubscriber).find(".zipcodeletters").val(zipcodeletters);
41        $(lastSubscriber).find(".residence").val(residence);
42    }
43
44    function deleteSubscriber() {
45        var nrPersons = $('.subscribe-form').find('.person-form').length;
46        if (nrPersons === 1) {
47            return;
48        }
49        var subscriberForm = $(this).closest('.person-form');
50        
51        subscriberForm.remove();
52        //generate new indexes for current forms
53
54        var nameRegex = /(subscribers)\[[0-9]+\]\./gi;
55        var idRegex = /(subscribers)_[0-9]+__/gi;
56        var subscribers = $('.subscribe-form').find('.person-form');
57
58
59        $('.subscribe-form .person-form').each(function(index, form) {
60            $(form).find("input,select,textarea").each(function(inputIndex, input) {
61                if (typeof $(input).attr("name") !== typeof undefined && $(input).attr("name") !== false){
62                    $(input).attr("name", $(input).attr("name").replace(nameRegex, "$1[" + index + "]."));
63                    $(input).attr("id", $(input).attr("id").replace(idRegex, "$1[" + index + "]."));
64                }
65            });
66        });
67
68        //$('.subscribe-form input').each(function (index, input) {
69        //    if (typeof $(input).attr("name") !== typeof undefined && $(input).attr("name") !== false){
70        //        $(input).attr("name", $(input).attr("name").replace(nameRegex, "$1[" + index + "]."));
71        //    }
72        //});
73        //$.each(subscribers, function (index) {
74        //    var template = $(this).html().replace(nameRegex, "$1[" + index + "].")
75        //    .replace(idRegex, "$1_" + index + "__");
76        //    //$('.subscribe-form').find('.person-form').eq(index).html(template);
77        //});
78
79    }
80
81    $(document).ready(function () {
82        $('#addperson').click(addSubscriber);
83        $('.subscribe-form').on('click', '.remove-person', deleteSubscriber);
84    });
85})(jQuery);