001.
<?php
002.
003.
include
(
'menutop.php'
);?>
004.
<!--start program-->
005.
<script src=
'jquery-3.1.1.min.js'
type=
'text/javascript'
></script>
006.
007.
<!-- jQuery UI -->
008.
<link href=
'jquery-ui.min.css'
rel=
'stylesheet'
type=
'text/css'
>
009.
<script src=
'jquery-ui.min.js'
type=
'text/javascript'
></script>
010.
<?php
011.
012.
013.
014.
$hostname
=
"localhost"
;
015.
$username
=
"root"
;
016.
$password
=
""
;
017.
$databaseName
=
"shop"
;
018.
019.
020.
021.
$connect
= mysqli_connect(
$hostname
,
$username
,
$password
,
$databaseName
);
022.
023.
024.
$query1
=
"SELECT * FROM paymant"
;
025.
$query2
=
"SELECT * FROM product"
;
026.
027.
028.
029.
$result2
= mysqli_query(
$connect
,
$query1
);
030.
$result3
= mysqli_query(
$connect
,
$query2
);
031.
032.
?>
033.
034.
<div
class
=
"container"
align=
"center"
>
035.
036.
<form id=
"id"
name=
"documents"
method=
"post"
action=
""
style=
"width: auto; margin-left:10%;"
>
037.
038.
<div
class
=
"panel panel-default panel-table"
style=
"width:60rem;"
>
039.
040.
<div
class
=
"row"
>
041.
<div
class
=
"row clearfix"
>
042.
<div
class
=
"col-md-12"
>
043.
<div
class
=
"modal-header"
>
044.
<h4
class
=
"modal-title"
> สร้างรายการขาย </h4> </div>
045.
<div
class
=
"modal-header"
>
046.
047.
<div
class
=
"row"
>
048.
049.
050.
<div
class
=
"col-sm-4"
>
051.
<div
class
=
"row"
>
052.
<div
class
=
"col-sm-10 form-group"
>
053.
<label>ชื่อลูกค้า</label>
054.
<input type=
"text"
id=
'autocomplete'
class
=
"form-control"
required placeholder=
"ชื่อสินค้า"
/>
055.
056.
057.
</div>
058.
<div
class
=
"col-sm-10 form-group"
align =
"center"
>
059.
<label>เบอร์โทรศัพท์ลูกค้า</label>
060.
<input type=
"text"
id=
'selectuser_id2'
class
=
"form-control"
required placeholder=
"เบอร์โทรศัพท์ลูกค้า"
/>
061.
062.
063.
</div>
064.
</div>
065.
</div>
066.
<div
class
=
"col-sm-4"
>
067.
<div
class
=
"row"
>
068.
<div
class
=
"col-sm-10 form-group"
>
069.
<label>นามสกุล</label>
070.
<input type=
"text"
id=
'selectuser_id'
class
=
"form-control"
required placeholder=
"นามสกุล"
/>
071.
072.
</div>
073.
074.
<div
class
=
"col-sm-18 form-group"
>
075.
<label>ที่อยู่ลูกค้า</label>
076.
<textarea id=
'selectuser_id3'
rows=
"2"
cols=
"40"
class
=
"form-control"
placeholder=
"ที่อยู่ลูกค้า"
></textarea>
077.
078.
</div>
079.
</div>
080.
</div>
081.
<div
class
=
"col-sm-4"
>
082.
<div
class
=
"row"
>
083.
<div
class
=
"col-sm-10 form-group"
>
084.
<label>รหัสลูกค้า</label>
085.
<input type=
"text"
id=
'selectuser_id1'
class
=
"form-control"
required placeholder=
"รหัสลูกค้า"
/>
086.
</div>
087.
</div>
088.
</div>
089.
090.
<div
class
=
"col-sm-4"
>
091.
092.
<div
class
=
"col-sm-7 form-group"
>
093.
<label>สถานะการจ่าย</label>
094.
<select name=
"pay_id"
class
=
"form-control"
required>
095.
<?php
while
(
$row1
= mysqli_fetch_array(
$result2
)):;?>
096.
<option value=
"<?php echo $row1[0];?>"
><?php
echo
$row1
[1];?></option>
097.
<?php
endwhile
;?>
098.
</select>
099.
100.
</div>
101.
</div>
102.
103.
104.
105.
<center><div
class
=
"panel-heading"
></center>
106.
<table
class
=
"table table-bordered table-hover"
id=
"tab_logic"
>
107.
<thead>
108.
109.
<tr
class
=
"w3-table-all"
style=
"background-color:#CCFFFF;color:black"
>
110.
<th
class
=
"text-center"
> # </th>
111.
<th
class
=
"text-center"
> สินค้า </th>
112.
<th
class
=
"text-center"
> จำนวน </th>
113.
<th
class
=
"text-center"
> ราคา </th>
114.
<th
class
=
"text-center"
> ราคารวม </th>
115.
</tr>
116.
</thead>
117.
<tbody>
118.
<tr id=
'addr0'
>
119.
<td>1</td>
120.
<td>
121.
<select name=
"pd_id"
id=
"pd_id"
class
=
"form-control"
required>
122.
<?php
while
(
$row1
= mysqli_fetch_array(
$result3
)):;?>
123.
<!-- เพิ่ม attribute เพื่อเก็บราคาจากฐานข้อมูล เปลี่ยน
$row1
[
'price'
] เป็นชื่อคอลัมน์ที่เก็บราคาสินค้า -->
124.
<option value=
"<?php echo $row1[0];?>"
pd_retail=
"<?php echo $row1['pd_retail'];?>"
><?php
echo
$row1
[1];?></option>
125.
<?php
endwhile
;?>
126.
</select>
127.
</td>
128.
<td><input type=
"number"
name=
'qty[]'
placeholder=
'Enter Qty'
class
=
"form-control qty"
step=
"0"
min=
"0"
/></td>
129.
<td><input type=
"number"
name=
'pd_retail[]'
placeholder=
'Enter Unit pd_retail'
class
=
"form-control pd_retail"
step=
"0.00"
min=
"0"
/></td>
130.
<td><input type=
"number"
name=
'total[]'
placeholder=
'0.00'
class
=
"form-control total"
readonly/></td>
131.
</tr>
132.
<tr id=
'addr1'
></tr>
133.
</tbody>
134.
</table>
135.
136.
<div
class
=
"row clearfix"
>
137.
<div
class
=
"col-md-12"
>
138.
<button id=
"add_row"
class
=
"btn btn-default pull-left"
>Add Row</button>
139.
<button id=
'delete_row'
class
=
"pull-right btn btn-default"
>
Delete
Row</button>
140.
</div>
141.
</div>
142.
<div
class
=
"row clearfix"
style=
"margin-top:20px"
>
143.
<div
class
=
"pull-right col-md-4"
>
144.
<table
class
=
"table table-bordered table-hover"
id=
"tab_logic_total"
>
145.
<tbody>
146.
<tr
class
=
"w3-table-all"
style=
"background-color:#CCFFFF;color:black"
>
147.
<th
class
=
"text-center"
>Sub Total</th>
148.
<td
class
=
"text-center"
><input type=
"number"
name=
'sub_total'
placeholder=
'0.00'
class
=
"form-control"
id=
"sub_total"
readonly/></td>
149.
</tr>
150.
<tr>
151.
<th
class
=
"text-center"
>Tax</th>
152.
<td
class
=
"text-center"
>
153.
<div
class
=
"input-group mb-2 mb-sm-0"
>
154.
<input type=
"number"
class
=
"form-control"
id=
"tax"
placeholder=
"0"
>
155.
<div
class
=
"input-group-addon"
>%</div>
156.
</div>
157.
</td>
158.
</tr>
159.
<tr>
160.
<th
class
=
"text-center"
>Tax Amount</th>
161.
<td
class
=
"text-center"
><input type=
"number"
name=
'tax_amount'
id=
"tax_amount"
placeholder=
'0.00'
class
=
"form-control"
readonly/></td>
162.
</tr>
163.
<tr>
164.
<th
class
=
"text-center"
>Grand Total</th>
165.
<td
class
=
"text-center"
><input type=
"number"
name=
'total_amount'
id=
"total_amount"
placeholder=
'0.00'
class
=
"form-control"
readonly/></td>
166.
</tr>
167.
</tbody>
168.
</table>
169.
170.
</div>
171.
172.
</div>
173.
</div>
174.
</div>
175.
176.
<div
class
=
"modal-footer"
>
177.
<input type=
"submit"
value=
"ตกลง"
class
=
"btn btn-primary"
>
178.
<a href=
"manage_sale.php"
><button type=
"button"
class
=
"btn btn-danger"
>ยกเลิก</button></a>
179.
<a :href=
""
class
=
"btn btn-warning"
><i
class
=
"ti-printer"
></i> ต้นฉบับ</a>
180.
</div>
181.
182.
<script>
183.
$(document).ready(
function
() {
184.
185.
option_list(
'addr0'
);
186.
187.
var
i = 1;
188.
$(
"#add_row"
).click(
function
() {
189.
b = i - 1;
190.
$(
'#addr'
+ i).html($(
'#addr'
+ b).html()).find(
'td:first-child'
).html(i + 1);
191.
$(
'#tab_logic'
).append(
'<tr id="addr'
+ (i + 1) +
'"></tr>'
);
192.
option_list(
'addr'
+ i);
193.
i++;
194.
});
195.
$(
"#delete_row"
).click(
function
() {
196.
if
(i > 1) {
197.
$(
"#addr"
+ (i - 1)).html(
''
);
198.
i--;
199.
}
200.
calc();
201.
});
202.
203.
$(
".product"
).on(
'change'
,
function
() {
204.
option_checker(this)
205.
});
206.
207.
208.
$(
'#tab_logic tbody'
).on(
'keyup change'
,
function
() {
209.
calc();
210.
});
211.
212.
$(
'#tax'
).on(
'keyup change'
,
function
() {
213.
calc_total();
214.
});
215.
216.
217.
218.
$(
"pd_id"
).change(
function
() {
219.
document.getElementById(
"loc"
).innerHTML=
"You selected: "
+document.getElementById(
"pd_id"
).value;
220.
});
221.
222.
223.
224.
$(
"#pd_id"
).change(
function
() {
225.
226.
$(
"#addr0 input[name='pd_retail[]']"
).val($(this).find(
'option:selected'
).attr(
'pd_retail'
));
227.
});
228.
});
229.
230.
function
option_checker(id) {
231.
var
myOption = $(id).val();
232.
var
s = 0;
233.
$(
'#tab_logic tbody tr select'
).each(
function
(index, element) {
234.
var
myselect = $(this).val();
235.
if
(myselect == myOption) {
236.
s += 1;
237.
}
238.
});
239.
if
(s > 1) {
240.
alert(myOption +
' as been added already try new..'
)
241.
}
242.
}
243.
244.
function
option_list(id) {
245.
246.
}
247.
248.
function
calc() {
249.
$(
'#tab_logic tbody tr'
).each(
function
(i, element) {
250.
251.
var
html = $(this).html();
252.
253.
var
qty = $(this).find(
'.qty'
).val();
254.
var
pd_retail = $(this).find(
'.pd_retail'
).val();
255.
$(this).find(
'.total'
).val(qty * pd_retail);
256.
257.
calc_total();
258.
});
259.
}
260.
261.
function
calc_total() {
262.
total = 0;
263.
$(
'.total'
).each(
function
() {
264.
total += parseInt($(this).val());
265.
});
266.
$(
'#sub_total'
).val(total.toFixed(2));
267.
tax_sum = total / 100 * $(
'#tax'
).val();
268.
$(
'#tax_amount'
).val(tax_sum.toFixed(2));
269.
$(
'#total_amount'
).val((tax_sum + total).toFixed(2));
270.
}
271.
</script>
272.
273.
<script type=
'text/javascript'
>
274.
$(
function
() {
275.
276.
$(
"#autocomplete"
).autocomplete({
277.
source:
function
( request, response ) {
278.
279.
$.ajax({
280.
url:
"fetchData.php"
,
281.
type:
'post'
,
282.
dataType:
"json"
,
283.
data: {
284.
search: request.term
285.
},
286.
success:
function
( data ) {
287.
response( data );
288.
}
289.
});
290.
},
291.
select:
function
(event, ui) {
292.
$(
'#autocomplete'
).val(ui.item.label);
293.
$(
'#selectuser_id'
).val(ui.item.value);
294.
$(
'#selectuser_id1'
).val(ui.item.value1);
295.
$(
'#selectuser_id2'
).val(ui.item.valuefi);
296.
$(
'#selectuser_id3'
).val(ui.item.valuef);
297.
return
false;
298.
}
299.
});
300.
301.
302.
$(
"#multi_autocomplete"
).autocomplete({
303.
source:
function
( request, response ) {
304.
305.
var
searchText = extractLast(request.term);
306.
$.ajax({
307.
url:
"fetchData.php"
,
308.
type:
'post'
,
309.
dataType:
"json"
,
310.
data: {
311.
search: searchText
312.
},
313.
success:
function
( data ) {
314.
response( data );
315.
}
316.
});
317.
},
318.
select:
function
( event, ui ) {
319.
var
terms = split( $(
'#multi_autocomplete'
).val() );
320.
321.
terms.pop();
322.
323.
terms.push( ui.item.label );
324.
325.
terms.push(
""
);
326.
$(
'#multi_autocomplete'
).val(terms.join(
", "
));
327.
328.
329.
var
terms = split( $(
'#selectuser_ids'
).val() );
330.
331.
terms.pop();
332.
333.
terms.push( ui.item.value );
334.
335.
terms.push(
""
);
336.
$(
'#selectuser_ids'
).val(terms.join(
", "
));
337.
338.
return
false;
339.
}
340.
341.
});
342.
});
343.
344.
function
split( val ) {
345.
return
val.split( /,\s*/ );
346.
}
347.
function
extractLast( term ) {
348.
return
split( term ).pop();
349.
}
350.
351.
</script>
352.