Tag Archive value

jQuery: upload แบบ ajax

ตัวอย่างการใช้ jQuery upload ไฟล์แบบ ajax[code language=”html” title=”ajax.form.upload.html”]<!doctype html>
<html>

<head>
<meta charset="utf-8">
<title>jQuery: form > send file</title>
<link href="../vendor/twbs/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet" type="text/css">
<style>
.progressbar {
background: #c00000;
clear: both;
height: 10px;
width: 0;
}

.progressLoaded {
width: 50px;
}

.progressLoaded::after {
content: " bytes";
}

.progressPercent {
width: 50px;
}

.progressPercent::after {
content: " %";
}

.progressTotal {
float: left;
width: 50px;
}

.progressTotal::after {
content: " bytes";
}

.progressTotal::before {
content: " of ";
}
</style>
</head>

<body>
<h1>upload file with ajax</h1>
<form action="values.php" class="form-horizontal" enctype="multipart/form-data" id="formA" method="post">
<div class="form-group">
<label class="col-sm-2 control-label" for="socialidI">หมายเลขบัตรประชาชน</label>
<div class="col-sm-10">
<input class="form-control" id="socialidI" maxlength="13" name="socialid" placeholder="หมายเลขบัตรประชาชน" type="number">
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label" for="photoI">ภาพถ่าย</label>
<div class="col-sm-10">
<input class="form-control" id="photoI" name="photo" placeholder="upload file" type="file">
</div>
</div>
<div class="form-group">
<div class="col-sm-10 text-right">
<button type="submit" class="btn btn-success">ส่งข้อมูล</button>
</div>
</div>
</form>
<div class="col-sm-12">
<h4>Progress</h4>
<div class="progressLoaded"></div>
<div class="progressTotal"></div>
<div class="progressPercent"></div>
<div class="progressbar"></div>
</div>
<div class="col-sm-12" id="resultA"></div>
<script src="../vendor/components/jquery/jquery.min.js"></script>
<script>
function xhrProgress(xhr) {
if (xhr.upload) {
// For handling the progress of the upload
xhr.upload.addEventListener(‘progress’, function (e) {
if (e.lengthComputable) {
$(‘.progressTotal’).html(e.total);
$(‘.progressLoaded’).html(e.loaded);

percentComplete = parseInt((e.loaded / e.total * 100), 10);
$(‘.progressPercent’).html(percentComplete);
$(‘.progressbar’).css("width", percentComplete + ‘%’);
}
}, false);
}
return xhr;
}

$(function () {

var formA = $(‘#formA’);

formA.submit(function (event) {
event.preventDefault();

$.ajax({
"beforeSend": function (jqXHR, settings) {
/* แยกตัวแปรไว้ตรวจสอบข้อมูล */
var params = settings.data;

if (settings.data.get(‘socialid’) == ”) {

jqXHR.abort();
alert(‘กรุณากรอกหมายเลขบัตรประชาชน’);

return false;
}

if (settings.data.get(‘photo’).name == ”) {

jqXHR.abort();
alert(‘กรุณาอัพโหลดรูปภาพ’);

return false;
}

},
"contentType": false,
"data": new FormData(formA[0]),
"method": "POST",
"processData": false,
"success": function (data, textStatus, jqXHR) {
$(‘#resultA’).html(data);
},
"url": "values.php",
"xhr": function () {
return xhrProgress($.ajaxSettings.xhr());
},

});

});

});
</script>
</body>

</html>[/code]ไฟล์ที่รอรับข้อมูล[code language=”php” title=”values.php”]<?php
echo ‘FILE<pre>’, print_r($_FILES, true), ‘</pre>’;
echo ‘GET<pre>’, print_r($_GET, true), ‘</pre>’;
echo ‘POST<pre>’, print_r($_POST, true), ‘</pre>’;
[/code]

วิธีนี้ใช้ความสามารถใหม่ FormData ที่ใช้กับ browser เก่าแก่กว่า Internet Explorer 10 หรือ Edge ไม่ได้ ดูเพิ่มเติม

jQuery: ส่ง form แบบ ajax ชั้นสูง

ก่อนที่จะใช้ jQuery ส่งข้อมูลแบบ ajax ออกไป อาจจะใช้ javascript ทำงานเบื้องต้นก่อนได้เช่น การตรวจสอบข้อมูล (validation) ว่า user ได้ทำการกรอกข้อมูลตามที่จำเป็นครบรึเปล่า หรือนำข้อมูลออกไปจากแบบฟอร์ม โดยที่ไม่ต้องไปทำในฝั่ง server

ใน jQuery Ajax สามารถทำได้โดยการระบุ “beforeSend” ตาม code ตัวอย่าง[code language=”javascript” title=”jQuery: advance process before send data”]$.ajax({
"beforeSend": function(jqXHR, settings) {

/* ใส่ตัวแปรเข้าไปเพิ่ม */
settings.data += ‘&ajax=true’;

/* แยกตัวแปรไว้ตรวจสอบข้อมูล */
var params = new URLSearchParams(settings.data);

/* บังคับกรอกข้อมูล */
if (params.get(‘way’) == ‘socialid’ && params.get(‘socialid’) == ”) {

jqXHR.abort();
alert(‘กรุณากรอกหมายเลขบัตรประชาชน’);

return false;
} else if (params.get(‘way’) == ‘phone’ && params.get(‘phone’) == ”) {

jqXHR.abort();
alert(‘กรุณากรอกหมายเลขโทรศัพท์’);

return false;
}

if (params.get(‘amount’) == ”) {

jqXHR.abort();
alert(‘กรุณากรอกจำนวนเงิน’);

return false;
}

/* เอาข้อมูลที่ไม่ต้องการส่งออก */
settings.data = RemoveParameterFromUrl(settings.data, ‘way’);
settings.data = RemoveParameterFromUrl(settings.data, ‘way’);
if (params.get(‘way’) == ‘socialid’) {
settings.data = RemoveParameterFromUrl(settings.data, ‘phone’);
} else {
settings.data = RemoveParameterFromUrl(settings.data, ‘socialid’);
}

},
"data": formA.serialize(),
"method": "POST",
"success": function(data, textStatus, jqXHR) {
$(‘#resultA’).html(data);
},
"url": "values.php",
});[/code]เราจะดูข้อมูลที่รวบรวมมาได้ใน object settings.data และสามารถต่อ string เพิ่มเข้าไปได้เหมือนการต่อ string[code language=”javascript” title=”add new data”]settings.data += ‘&ajax=true’;[/code]การที่จะแยกข้อมูลออกมาสามารถใช้[code language=”javascript” title=”get value from query string”]var params = new URLSearchParams(settings.data);[/code]แบ่งข้อมูลออกมาเป็น array เพื่อใช้ตรวจสอบข้อมูลหรือจะนำไปใช้ในการเปลี่ยนแปลงข้อมูล เช่นเดียวกันก็สามารถ delete ลบข้อมูลที่ไม่ได้การออกไปได้โดยใช้ function[code language=”javascript” title=”delete data from url”]function RemoveParameterFromUrl(url, parameter) {
return url.replace(new RegExp(‘^([^#]*\?)(([^#]*)&)?’ + parameter + ‘(\=[^&#]*)?(&|#|$)’), ‘$1$3$5’).replace(/^([^#]*)((\?)&|\?(#|$))/, ‘$1$3$4’);
}[/code]

ตัวอย่าง form เขียนโดยยกกรณีโอนเงินโดยใช้ พร้อมเพย์ (PromptPay) ที่ user จะเลือกได้ว่าจะโอนเงินโดยใช้ บัตรประชาชน หรือหมายเลขโทรศัพท์ของผู้รับแทนที่จะใช้หมายเลขบัญชี

[code language=”html” title=”ajax.form.advance.html”]<!doctype html>
<html>

<head>
<meta charset="utf-8">
<title>jQuery: Advance Form Send</title>
<link href="../vendor/twbs/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet" type="text/css">
</head>

<body>
<h1>พร้อมเพย์ (PromptPay)</h1>
<form action="values.php" class="form-horizontal" id="formA" method="post">
<div class="form-group">
<label class="col-sm-2 control-label">โอนเงินด้วย</label>
<div class="col-sm-10">
<div class="radio">
<label>
<input checked name="way" type="radio" value="socialid"> หมายเลขบัตรประชาชน
</label>
</div>
<div class="radio">
<label>
<input name="way" type="radio" value="phone"> หมายเลขโทรศัพท์
</label>
</div>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label" for="socialidI">หมายเลขบัตรประชาชน</label>
<div class="col-sm-10">
<input class="form-control" id="socialidI" maxlength="13" name="socialid" placeholder="หมายเลขบัตรประชาชน" type="number">
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label" for="phoneI">หมายเลขโทรศัพท์</label>
<div class="col-sm-10">
<input class="form-control" id="phoneI" maxlength="11" name="phone" placeholder="หมายเลขโทรศัพท์" type="tel">
</div>
</div>
<div class="form-group">
<label for="amount" class="col-sm-2 control-label">จำนวนเงิน</label>
<div class="col-sm-10">
<div class="input-group">
<input class="form-control" id="amount" max="5000" min="0" name="amount" placeholder="จำนวนเงิน" type="number">
<div class="input-group-addon">&#3647;</div>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-10 text-right">
<button type="submit" class="btn btn-success">โอนเงิน</button>
</div>
</div>
</form>
<div class="col-sm-12" id="resultA"></div>
<script src="../vendor/components/jquery/jquery.min.js"></script>
<script>
function RemoveParameterFromUrl(url, parameter) {
return url.replace(new RegExp(‘^([^#]*\?)(([^#]*)&)?’ + parameter + ‘(\=[^&#]*)?(&|#|$)’), ‘$1$3$5’).replace(/^([^#]*)((\?)&|\?(#|$))/, ‘$1$3$4’);
}

$(function () {
var formA = $(‘#formA’);

formA.submit(function (event) {
event.preventDefault();

$.ajax({
"beforeSend": function (jqXHR, settings) {

/* ใส่ตัวแปรเข้าไปเพิ่ม */
settings.data += ‘&ajax=true’;

/* แยกตัวแปรไว้ตรวจสอบข้อมูล */
var params = new URLSearchParams(settings.data);

/* บังคับกรอกข้อมูล */
if (params.get(‘way’) == ‘socialid’ && params.get(‘socialid’) == ”) {

jqXHR.abort();
alert(‘กรุณากรอกหมายเลขบัตรประชาชน’);

return false;
} else if (params.get(‘way’) == ‘phone’ && params.get(‘phone’) == ”) {

jqXHR.abort();
alert(‘กรุณากรอกหมายเลขโทรศัพท์’);

return false;
}

if (params.get(‘amount’) == ”) {

jqXHR.abort();
alert(‘กรุณากรอกจำนวนเงิน’);

return false;
}

/* เอาข้อมูลที่ไม่ต้องการส่งออก */
settings.data = RemoveParameterFromUrl(settings.data, ‘way’);
settings.data = RemoveParameterFromUrl(settings.data, ‘way’);
if (params.get(‘way’) == ‘socialid’) {
settings.data = RemoveParameterFromUrl(settings.data, ‘phone’);
} else {
settings.data = RemoveParameterFromUrl(settings.data, ‘socialid’);
}

},
"data": formA.serialize(),
"method": "POST",
"success": function (data, textStatus, jqXHR) {
$(‘#resultA’).html(data);
},
"url": "values.php",
});
});
});
</script>
</body>

</html>[/code]และฝั่ง server side ที่ควรจะมีการ validation ตรวจสอบข้อมูลซ้ำอีกครั้งเพื่อความมั่นใจ แต่ตัวอย่างนี้จะแสดงข้อมูลที่ทางฝั่ง server ได้รับเท่านั้น เพื่อให้เห็นการ edit แก้ข้อมูลที่ส่งไป[code language=”php” title=”values.php”]<?php
echo ‘GET<pre>’, print_r($_GET, true), ‘</pre>’;
echo ‘POST<pre>’, print_r($_POST, true), ‘</pre>’;[/code]

เลือกช่วงข้อมูล

ระบบที่ทำจะมีการตรวจสอบข้อมูลที่ป้อนเข้ามา โดยบังคับให้ป้อนข้อมูลเข้ามาตามค่าข้อมูลที่มีอยู่ แต่ถ้าจะต้องมา loop เช็กว่าข้อมูลตัวนี้มีในฐานข้อมูลรึเปล่า ก็เสียเวลาและเปลืองทรัพยากร จากการสังเกตุข้อมูลจะอยู่เป็นช่วงๆ เช่น 1 – 5, 8 – 12, 1982 – 2016

ถ้ารู้ช่วงข้อมูล ก็จะตรวจได้ว่าข้อมูลที่ป้อนเข้ามาอยู่ในช่วงที่กำหนดหรือไม่

ไปเจอ Select a range of values ลองแก้ตามได้[code language=”sql”]
WITH Grouped AS ( — Identify groups

SELECT D.bank_id,
grp = D.bank_id – ROW_NUMBER() OVER (
ORDER BY D.bank_id)
FROM banks AS D)
SELECT STUFF ( ( — Concatenate items in the current group

SELECT [text()] = ‘,’ + CONVERT(varchar(11), G2.bank_id)
FROM Grouped AS G2
WHERE G2.grp = Grouped.grp
ORDER BY G2.bank_id
FOR XML PATH (”) ) — Remove initial comma
, 1, 1, ” )
FROM Grouped
GROUP BY Grouped.grp;
[/code]
ผลลัพธ์
1,2,3,4,5,6
8,9,10,11,12,13,14
16,17,18,19,20,21,22,23,24,25,26,27,28,29
31,32,33,34,35,36,37,38,39,40
43,44

ได้เป็นกลุ่มก็จริงแต่ อยากได้ id เริ่มต้นถึง id สุดท้ายของแต่ละกลุ่มเท่านั้น ลองแก้มั่วๆดู[code language=”sql”]
WITH Grouped AS
( SELECT D.bank_id,
grp = D.bank_id – ROW_NUMBER() OVER (
ORDER BY D.bank_id)
FROM banks AS D)
SELECT MIN(Grouped.bank_id) AS start_id,
MAX(Grouped.bank_id) AS end_id
FROM Grouped
GROUP BY Grouped.grp
[/code]
ผลลัพธ์
start_id end_id
———– ———–
1 6
8 14
16 29
31 40
43 44

ได้ตามที่ต้องการเลย

Ajax Jquery Tinymce Serialize

เวลาใช้ jQuery serialize() ดึงข้อมูลจากฟอร์ม ถ้ามี WYSIWYG Editor อยู่ หลายๆครั้ง จะได้ข้อมูลไม่ครบ เพราะช่องที่เรากรอกข้อมูลลงไป จริงๆแล้วมันไม่ใช้ textarea แต่จะเป็นอีก layer ที่อยู่ข้างบนอีกที ถ้าจะเอาข้อมูลออกมาต้องคัดลอกข้อมูลกลับไปที่ textarea ก่อน
ถ้าเป็น tinymce ใช้คำสั่ง tinyMCE.get(‘ ไอดี ของ textarea’).getContent()
[sourcecode language=”html”]
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Tinymce & Jquery serialize By Pitt Phunsanit</title>
</head>

<body>
<form id="plus" method="post" action="somepage">
<textarea name="article" id="articleId" style="width:100%"></textarea>
<input type="submit">
</form>
<script src="assets/jQuery/jquery.min.js"></script>
<script src="assets/tinymce/tiny_mce.js"></script>
<script>
$(function(){
$(‘#plus’).submit(function(event){
event.preventDefault();
$(‘#articleId’).val(tinyMCE.get(‘articleId’).getContent());
alert(‘after ‘+$(‘#articleId’).serialize());
});
});

tinyMCE.init({
mode : "textareas",
theme : "simple"
});
</script>
</body>
</html>
[/sourcecode]