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
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
| function listCheckBoxes(textBoxID, e){
// get value from textarea to add items to it
var value = $('#'+textBoxID).val();
//var value = $('#'+textBoxID).val();
//console.log(value);
var isChecked = false;
var target = $(e.target);
//console.log('ttt '+target);
var getAttr = target.closest('input');
//console.log(getAttr);
/* Output:
[input#tel, prevObject: jQuery.fn.init[1]]
[prevObject: jQuery.fn.init[1]]
First has an input with id, and second has nothing (no id no class,.. no attribute), so get the length
*/
var attrLen = getAttr.length;
//console.log(attrLen);
/* Output:
1 ==> This is for input#tel
0 ==> and this for Object
*/
if(attrLen > 0){
var getID = getAttr.closest('input').attr('id');
//console.log('idd '+getID);
// get value using the items ID
var getTxt = $('#'+getID).val();
//console.log(getTxt);
// we need to check if the item is checked or not (Checked: add it to the textarea, unchecked remove it from textarea)
// we need to avoid entering the value of "select_unselect all"
if (getID != 'select_unselect'){
var isChecked = $('#' + getID).is(":checked");
}
// if true add item to textarea
if(isChecked === true){
$('#'+textBoxID).val(value + getTxt+',');
} else {
var valSpl = value.split(',');
//console.log(valSpl);
// check if this index exists in the list
var ind2 = valSpl.indexOf(getTxt);
//console.log(ind2);
// then remove it
valSpl.splice(ind2, 1);
//console.log('Third '+valSpl);
// apply new values to search textarea
$('#'+textBoxID).val(valSpl);
} // end if(isChecked === true){
} // end if(attrLen > 0){
} // end listCheckBoxes();
$('.customer_type').on('click', function(){
$('.list').show();
});
$('.list').click(function(event) {
listCheckBoxes('customer_type', event);
}); // end click
// select / unselect all
$('.select_unselect').on('click', function(){
var selectItems = $('#select_unselect').is(":checked")
console.log(selectItems);
var storeSelected = [];
//$.each('#frm', function(){
$('#frm').each(function(){
var findInpts = $(this).find(':input[type="checkbox"]');
//console.log(findInpts);
$(findInpts).each(function(){
var getIDs = this.id;
if(selectItems === true){
$('#' + getIDs).prop("checked", true);
var getTxt = $('#'+getIDs).val();
console.log(getTxt);
storeSelected.push(getTxt);
} else {
$('#' + getIDs).prop("checked", false);
}
});
//var ids = findInpts.attr('id');
//console.log(ids);
//console.log(index);
});
// console.log(storeSelected.length);
//console.log(storeSelected);
/*
["0", "Men", "Women", "Boys", "Girls", "Babies", "Women Veiled"]
*/
// remove "0" quoted from the array, it is for select/unselect
storeSelected.splice( $.inArray("0", storeSelected), 1 );
//console.log(storeSelected);
//console.log(storeSelected.length);
/*
["Men", "Women", "Boys", "Girls", "Babies", "Women Veiled"]
*/
var insertSelected = storeSelected.join(',').trim();
console.log(insertSelected);
$('#customer_type').val(insertSelected);
//alert(insertSelect);
var value = $('#customer_type').val();
console.log(value);
$('.items').html(value);
});
// hide the list
$(document).on('click', function(e){
var target = e.target;
//console.log(target);
/* Cases:
Case1: Click inside the textarea:
<textarea cols="50" rows="4" class="search"></textarea>
Case2: Click inside the list:
<input name="tel" id="tel" type="checkbox" value="Telephone">
Case3: Click outside the category class:
Will return everything inside the <html></html>
*/
// find the category class inside the target
var find = $(e.target).find('.category');
//console.log(find);
/* Outputs
Case1: [prevObject: jQuery.fn.init[1]]
length will be 0
Case2: [prevObject: jQuery.fn.init[1]]
length will be 0
Case3: [ul.category, prevObject: jQuery.fn.init[1]]
length will be 1
*/
//console.log(find.length);
// since we did not click inside the category class (length is 0, we clicked outside the category), we need to hide the list
if(find.length > 0){
$('.list').hide();
}
}); // end document click |
