addHiddenRows/addFormRows.html at master · ViciousVictor/addHiddenRows · GitHub

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
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
<html>
<body>

<div id="widgetHiddenAdd">
    <input type="hidden" value="" class="shownVar">
    <div class="record1">
        <input  />
        <select >
            <option value="option1">option1</option>
            <option value="option2">option2</option>
        </select>
    </div>
    <div class="record2">
        <input />
        <select >
            <option value="option1">option1</option>
            <option value="option2">option2</option>
        </select>
    </div>
    <div class="record3">
        <input id="input1_1" name="input1_1" />
        <select id="input-1_2" name="input1_2">
            <option value="option1">option1</option>
            <option value="option2">option2</option>
        </select>
    </div>
    <div class="record4">
        <input />
        <select >
            <option value="option1">option1</option>
            <option value="option2">option2</option>
        </select>
    </div>
    <input type="button" class="addButton" value="add">
</div>


<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
$(document).ready(function () {

	function executeHiddenAdd(parentWrap) {
		var maxRecord = 4;
		var shownVar = parentWrap.find(".shownVar");
		var shown = parseInt(shownVar.val(), 10);
		var addButton = parentWrap.find(".addButton");

		if (isNaN(shown) || shown < 2) {
			shown = 2;
		}
		//alert( shown );
		(function () {
			for (i = maxRecord; i > shown; i--) {
				parentWrap.find(".record" + i).hide();
			}
        })();
		testMaxReached();

		addButton.on('click', function () {
			parentWrap.find(".record" + (++shown)).show();
			shownVar.val(shown);
			testMaxReached()
		});

		function testMaxReached() {
			if (shown >= maxRecord) {
				addButton.hide();
			}
		}

	};
	executeHiddenAdd( $("#widgetHiddenAdd") );

});
</script>

</body>
</html>