์Note
Script ที่จำเป็นสำหรับการทำฟอร์ม
Sheet link Make copy before use this google sheet
https://docs.google.com/spreadsheets/d/1Z2B41UGDdCu4evg1zNEEvbx_DC83WexXGkMQrUwxih4/edit?usp=sharing
Google App Script
Code.gs
function doGet(e) {
return HtmlService.createTemplateFromFile('form').evaluate().setTitle("แบบฟอร์มรับข้อมูล");
}
function uploadFileToGoogleDrive(data, file,idCard,type,gen,gender,firstname,lastname,nickname,birthdate,religion,blood,moo,district,amphoe,
province,cnt,zipcode,ptel,email,line,emergen,emergtel,dm,HP,LP,heart,kidney,asma,hiegth,weight,chest,waist,hip,neck,fat,shape,bodytype,
package,team,shirtsize,consent,frequency,rec3,rec4,rec5,PicID,PicURL) {
//บรรทัดที่ 11 id ทั้งหลายต้องเรียงตามลำดับ ให้เหมือนใน form html บรรทัด 495 ถึงบรรทัดที่ 543 มิฉะนั้นการนำข้อมูลลงตารางกูเกิลชีทจะเพี้ยน ๆ สลับไปสลับมา ลงไม่ตรงสักที//
try {
var folder=DriveApp.getFolderById('1M-Mj8bTKsgchkHF2PE1s-QboksN95TO5'); // ไอดีของโฟลเดอร์ของกูเกิลไดรฟที่เราจะให้อัพโหลดรูปไปเก็บ
var contentType = data.substring(5,data.indexOf(';')),
bytes = Utilities.base64Decode(data.substr(data.indexOf('base64,')+7)),
blob = Utilities.newBlob(bytes, contentType, file),
// file = folder.createFile(blob),
file = folder.createFolder([firstname+lastname+new Date()]).createFile(blob),
filelink=file.getUrl(),
filelid =file.getId() ;
var lock = LockService.getPublicLock();
lock.waitLock(30000);
var doc = SpreadsheetApp.openById("1Z2B41UGDdCu4evg1zNEEvbx_DC83WexXGkMQrUwxih4"); ///ไอดีของกูเกิลชีทที่เราจะอัพโหลดข้อมูลเข้าไป
var sheet = doc.getSheetByName("name");
var headRow = 1;
var headers = sheet.getRange(1, 1, 1, sheet.getLastColumn()).getValues()[0];
var nextRow = sheet.getLastRow()+1;
var row = [];
for (i in headers){
///ตัวหนังสือสีแดงในบรรทัดที่ 38 ถึง 142 ต้องตรงเป๊ะกับหัวตารางกูเกิลชีท ที่เราจะให้ข้อมูล input แต่ละตัว เข้าไป
if (headers[i] == "เลขบัตรประชาชน"){
row.push(idCard);
} else if (headers[i] == "ประเภทการสมัคร"){
row.push(type);
} else if (headers[i] == "รุ่นหอ"){
row.push(gen);
} else if (headers[i] == "เพศ"){
row.push(gender);
} else if (headers[i] == "NAME"){
row.push(firstname);
} else if (headers[i] == "Lastname"){
row.push(lastname);
} else if (headers[i] == "ชื่อเล่น"){
row.push(nickname);
} else if (headers[i] == "วันเดือนปีเกิด"){
row.push(birthdate);
} else if (headers[i] == "ศาสนา"){
row.push(religion);
} else if (headers[i] == "หมู่เลือด"){
row.push(blood);
} else if (headers[i] == "บ้านเลขที่หมู่ที่"){
row.push(moo);
} else if (headers[i] == "ตำบล"){
row.push(district);
} else if (headers[i] == "อำเภอ"){
row.push(amphoe);
} else if (headers[i] == "จังหวัด"){
row.push(province);
} else if (headers[i] == "ประเทศ"){
row.push(cnt);
} else if (headers[i] == "รหัสไปรษณีย์"){
row.push(zipcode);
} else if (headers[i] == "เบอร์โทร"){
row.push("TEL- "+ptel);
} else if (headers[i] == "Email"){
row.push(email);
} else if (headers[i] == "ไลน์ไอดี"){
row.push("LineID-"+line);
} else if (headers[i] == "ผู้ติดต่อกรณีฉุกเฉิน"){
row.push(emergen);
} else if (headers[i] == "เบอร์โทรผู้ติดต่อฉุกเฉิน"){
row.push("TEL- "+emergtel);
} else if (headers[i] == "โรคเบาหวาน"){
row.push(dm)
} else if (headers[i] == "โรคความดันสูง"){
row.push(HP);
} else if (headers[i] == "โรคความดันต่ำ"){
row.push(LP);
} else if (headers[i] == "โรคหัวใจ"){
row.push(heart);
} else if (headers[i] == "โรคไต"){
row.push(kidney);
} else if (headers[i] == "หอบหืด"){
row.push(asma);
} else if (headers[i] == "ส่วนสูง"){
row.push(hiegth);
} else if (headers[i] == "น้ำหนัก"){
row.push(weight);
} else if (headers[i] == "รอบอก"){
row.push(chest);
} else if (headers[i] == "รอบเอว"){
row.push(waist);
} else if (headers[i] == "ตะโพก"){
row.push(hip);
} else if (headers[i] == "รอคอ"){
row.push(neck);
} else if (headers[i] == "เปอร์เซนต์ไขมัน"){
row.push(fat);
} else if (headers[i] == "การสะสมไขมัน"){
row.push(shape);
} else if (headers[i] == "ประเภทรูปร่าง"){
row.push(bodytype);
} else if (headers[i] == "Package"){
row.push(package);
} else if (headers[i] == "ทีม"){
row.push(team);
} else if (headers[i] == "ขนาดเสื้อ"){
row.push(shirtsize);
} else if (headers[i] == "ความยินยอม"){
row.push(consent);
} else if (headers[i] == "ความถี่การออกกำลังกาย"){
row.push(frequency);
} else if (headers[i] == "คำแนะนำ3"){
row.push(rec3);
} else if (headers[i] == "คำแนะนำ4"){
row.push(rec4);
} else if (headers[i] == "คำแนะนำ5"){
row.push(rec5);
} else if (headers[i] == "PicID"){
row.push(filelid);
} else if (headers[i] == "PicURL"){
row.push(filelink);
}
}
sheet.getRange(nextRow, 1, 1, row.length).setValues([row]);
return "OK";
} catch (f) {
return f.toString();
} finally {
lock.releaseLock();
}
}
function getDataUrl(id) {
let tmp = DriveApp.getFileById(id)
if (tmp) {
let bytes = Utilities.base64Encode(tmp.getThumbnail().copyBlob().getBytes())
let type = tmp.getMimeType()
return {
bytes: bytes,
type: type
} //`data:${type};base64,${bytes}`
}
}
function getCode(code) {
var ss = SpreadsheetApp.openById("1Z2B41UGDdCu4evg1zNEEvbx_DC83WexXGkMQrUwxih4").getSheetByName('name')
var data =ss.getDataRange().getDisplayValues().filter(row=> {
return row[0]==code
})
if(data.length > 0) return true
else return false
}
form.html
<!DOCTYPE html>
<html>
<head>
<base target="_blank">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>xxxx</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<style>
.disclaimer {
width: 480px;
color: #646464;
margin: 20px auto;
padding: 0 16px;
text-align: center;
font: 400 12px Roboto, Helvetica, Arial, sans-serif
}
.disclaimer a {
color: #009688
}
#credit {
display: none
}
.twitter-typeahead {
width: 100%;
background: #fff
}
.tt-suggestion {
padding: 10px 5px;
background: #ffe;
color: #000;
border-bottom: 1px solid #eee;
cursor: pointer
}
.input1 {
background: white;
border: 2px pink solid;
color: #0000FF;
background: white;
text-align: center;
height: 35px;
border-radius: 5px;
background: white;
}
.big{ width: 1.5em; height: 1.5em; }
.biger{ width: 2em; height: 2em; }
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous"></script>
<!-- CSS only -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
<!-- JavaScript Bundle with Popper -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w==" crossorigin="anonymous" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" />
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/select2-bootstrap-5-theme@1.1.1/dist/select2-bootstrap-5-theme.min.css" />
</head>
<body>
<div class="container-fluid">
<form class="main" id="form" novalidate="novalidate" style="max-width: 100%;margin: 40px auto;">
<? var banner = getDataUrl('1w5uroJZ9wMO59zpcJh8YljflfCm8Mbd1') ?>
<img src="data:<?= banner.type ?>;base64,<?= banner.bytes ?>" width="100%" class="img-fluid" alt="Responsive image">
<div id="forminner">
<div class="alert alert-primary" role="alert">
<center>
<B>
<font color=#004d00 size=5>กรุณากรอกข้อมูลเพื่อสมัคร
<Br>
</font>
</B>
</center>
</div>
<!--อัปโหลดรูภาพ-->
<div class="alert alert-danger" role="alert">
<center>
<B><font color=black size=5>รูปภาพประจำตัวของท่าน</font></B> </center>
<Br>
<div class="form-row">
<div class="file-field col s12">
<div class="btn">
<span style="color:blue"><font size=4>เลือกรูปภาพประจำตัวของท่าน</font></span>
<input id="files" type="file">
</div>
<div class="file-path-wrapper">
<input class="file-path validate" type="text" placeholder="เมื่อเลือกได้ชื่อไฟล์จะแสดงที่นี่">
</div>
<div class="form-row">
<img id="image" width=100% />
</div>
</div>
</div>
</div>
<div class="alert alert-info" role="alert">
<center>
<B><font color=black size=5>ข้อมูลจำเป็นในการประกอบการสมัคร</font></B> </center>
<center>
<B><font color=red size=3>ข้อมูลชื่อและเลขประจำตัวประชาชน รุ่น ประเภท ศาสนาและกรุ๊ปเลือด เพื่อการยืนยันตัวตน ข้อมูลที่อยู่เพื่อการจัดส่ง ข้อมูลบางช่องบังคับตอบบางช่องไม่บังคับ</font></B> </center>
<Br>
</div>
<div class="form-row">
<div class="alert alert-info" role="alert">
<div class="form-row">
<div class="form-group col-md-2">
<label for="idCard"><B><font size=3 color=#004d00>CITIZENID</font></B></label>
<input type="text area" class="form-control" id="idCard" name="idCard" maxlength="13" placeholder="เลขประชาชน" height="100">
</div>
<div class="form-group col-md-2">
<label for="type"><B><font size=3 color=#004d00>ประเภท</font></B></label>
<select id="type" class="form-select">
<option value="บุคคลทั่วไป">บุคคลทั่วไป</option>
<option value="ศิษย์เก่าหอพัก">นิสิตเก่าหอพัก</option>
<option value="นิสิตปัจจุบัน">นิสิตปัจจุบัน</option>
</select>
</div>
<div class="form-group col-md-2">
<label for="gen"><B><font size=3 color=#004d00>รุ่นหอพิมพ์ปีที่เข้า</font></B></label>
<select id="gen" name="gen" class="js-example-basic-single">
<option disabled selected value="">เลือกปีที่จบ</option>
<? var data = SpreadsheetApp.openById("1Z2B41UGDdCu4evg1zNEEvbx_DC83WexXGkMQrUwxih4").getSheetByName('nation').getRange("C3:D").getDisplayValues().filter(r => r[0] != ''); ?>
<? data.forEach(row => { ?>
<option value="<?= row[0] ?>">
<?= row[1] ?>
</option>
<? }) ?>
</select>
</div>
<div class="form-group col-md-1">
<label for="gender"><B><font size=3 color=#004d00>เพศ</font></B></label>
<select id="gender" class="form-select">
<option value="" disabled selected>ระบุเพศ</option>
<option value="ชาย">ชาย</option>
<option value="หญิง">หญิง</option>
</select>
</div>
<div class="form-group col-md-2">
<label for="firstname"><B><font size=3 color=#004d00>ชื่อ</font></B></label>
<input type="text area" class="form-control" id="firstname" name="firstname" maxlength="50" placeholder="ชื่อ">
</div>
<div class="form-group col-md-2">
<label for="lastname"><B><font size=3 color=#004d00>นามสกุล</font></B></label>
<input type="text area" class="form-control" id="lastname" name="lastname" maxlength="50" placeholder="นามสกุล">
</div>
<div class="form-group col-md-1">
<label for="nickname"><B><font size=3 color=#004d00>ชื่อเล่น</font></B></label>
<input type="text area" class="form-control" id="nickname" name="nickname" maxlength="50" placeholder="ชื่อเล่น">
</div>
<div class="form-group col-md-2">
<label for="birthdate"><B><font size=3 color=#004d00>วันเดือนปีเกิด</font></B></label>
<input type="date" class="form-control" id="birthdate" name="birthdate" maxlength="50" placeholder="วันที่/เดือน/ปี ค.ศ.เกิด">
</div>
<div class="form-group col-md-2">
<label for="religion"><B><font size=3 color=#004d00>ศาสนาของท่าน</font></B></label>
<select id="religion" class="form-select">
<option value="" disabled selected>ศาสนาของท่าน</option>
<option value="พุทธ">ศาสนาพุทธ</option>
<option value="คริสต์">ศาสนาคริสต์</option>
<option value="อิสลาม">ศาสนาอิสลาม</option>
<option value="ฮินดู">ศาสนาฮินดู</option>
<option value="ซิก">ศาสนาซิกซ์</option>
<option value="อื่น ๆ">ศาสนาอื่น ๆ </option>
</select>
</div>
<div class="form-group col-md-2">
<label for="blood"><B><font size=3 color=#004d00>กรุ๊ปเลือดของท่าน</font></B></label>
<select id="blood" class="form-select">
<option value="" disabled selected>กรุ๊ปเลือดของท่าน</option>
<option value="O">กรุ๊ป O</option>
<option value="A">กรุ๊ป A</option>
<option value="B">กรุ๊ป B</option>
<option value="AB">กรุ๊ป AB</option>
<option value="Rh-">กรุ๊ป Rh-</option>
<option value="Rh+">กรุ๊ป Rh+</option>
</select>
</div>
<div class="form-group col-md-2">
<label for="moo"><B><font size=3 color=black>บ้านเลขที่ หมู่ที่ </font></B></label>
<input type="text area" class="form-control" id="moo" name="moo" maxlength="100" placeholder="บ้านเลขที่ หมู่ที่ ">
</div>
<div class="form-group col-md-2">
<label for="district"><B><font size=3 color=black>ตำบล</font></B></label>
<input type="text area" class="form-control" id="district" name="district" maxlength="50" placeholder="ตำบล">
</div>
<div class="form-group col-md-2">
<label for="amphoe"><B><font size=3 color=black>อำเภอ</font></B></label>
<input type="text area" class="form-control" id="amphoe" name="amphoe" maxlength="50" placeholder="อำเภอ">
</div>
<div class="form-group col-md-2">
<label for="province"><B><font size=3 color=black>จังหวัด</font></B></label>
<input type="text area" class="form-control" id="province" name="province" maxlength="50" placeholder="จังหวัด">
</div>
<div class="form-group col-md-2">
<label for="cnt"><B><font size=3 color=black>ประเทศ</font></B></label>
<input type="text area" class="form-control" id="cnt" name="cnt" maxlength="50" placeholder="ประเทศ">
</div>
<div class="form-group col-md-2">
<label for="zipcode"><B><font size=3 color=black>รหัสไปรษณีย์</font></B></label>
<input type="text area" class="form-control" id="zipcode" name="zipcode" maxlength="13" placeholder="รหัสไปรษณีย์">
</div>
<div class="form-group col-md-2">
<label for="ptel"><B><font size=3 color=#004d00>เบอร์โทรศัพท์</font></B></label>
<input type="text area" class="form-control" id="ptel" name="ptel" maxlength="50" placeholder="เบอร์ xxx-xxxxxxx">
</div>
<div class="form-group col-md-2">
<label for="email"><B><font size=3 color=#004d00>อีเมล์</font></B></label>
<input type="text area" class="form-control" id="email" name="email" maxlength="50" placeholder="อีเมล์">
</div>
<div class="form-group col-md-2">
<label for="line"><B><font size=3 color=#004d00>ไลน์ไอดี</font></B></label>
<input type="text area" class="form-control" id="line" name="line" maxlength="50" placeholder="ใส่ไลน์ไอดี">
</div>
<div class="form-group col-md-2">
<label for="emergen"><B><font size=3 color=black>ผู้ติดต่อกรณีฉุกเฉิน</font></B></label>
<input type="text area" class="form-control" id="emergen" name="emergen" maxlength="50" placeholder="ระบุชื่อผู้ติดต่อกรณีฉุกเฉิน">
</div>
<div class="form-group col-md-3">
<label for="emergtel"><B><font size=3 color=black>เบอร์โทรผู้ติดต่อฉุกเฉิน</font></B></label>
<input type="text area" class="form-control" id="emergtel" name="emergtel" maxlength="20" placeholder="ระบุเบอร์โทรผู้ติดต่อ">
</div>
</div>
<div class="alert alert-warning" role="alert">
<B><center><font color=#660066 size=5>ประวัติสุขภาพและโรคประจำตัวที่มีผลต่อการออกกำลังกาย</font></center></B>
<center>
<font color=green size=3>การตอบข้อมูลโรคประจำตัวเพื่อให้แอพให้คำแนะนำการออกกำลังกายที่เหมาะสมกับโรคประจำตัว</font>
</center><BR>
<BR>
<div class="form-row">
<div class="form-group col-md-2">
<input type="checkbox" name="dm" value="เบาหวาน" id="dm">
<label for="dm"><font size=4 color=red>เบาหวาน</font></label>
<Br>
</div>
<div class="form-group col-md-2">
<input type="checkbox" name="HP" value="ความดันสูง" id="HP">
<label for="HP"><font size=4 color=red>ความดันสูง</font></label>
<Br>
</div>
<div class="form-group col-md-2">
<input type="checkbox" name="LP" value="ความดันต่ำ" id="LP">
<label for="LP"><font size=4 color=red>ความดันต่ำ</font></label>
<Br>
</div>
<div class="form-group col-md-2">
<input type="checkbox" name="heart" value="โรคหัวใจ" id="heart">
<label for="heart"><font size=4 color=red>โรคหัวใจ</font></label>
<Br>
</div>
<div class="form-group col-md-2">
<input type="checkbox" name="kidney" value="โรคไต" id="kidney">
<label for="kidney"><font size=4 color=red>โรคไต</font></label>
<Br>
</div>
<div class="form-group col-md-2">
<input type="checkbox" name="asma" value="หอบหืด" id="asma">
<label for="asma"><font size=4 color=red>หอบหืด</font></label>
<Br>
</div>
</div>
</div>
</div>
</div>
<center>
<div class="alert alert-success" role="alert">
<B><font color=#000066 size=5>ข้อมูลสภาพร่างกายเพื่อการให้คำแนะนำในการออกกำลังกาย</font></B>
<center>
<font color=green size=3>การตอบข้อมูลขนาดร่างกาย เพื่อเราคำนวณค่า BMI BMR เปอร์เซนต์ไขมัน อัตราส่วนเอวต่อส่วนสูง และเอวต่อตะโพก เพื่อการแนะนำการออกกำลังกาย</font>
</center>
</div>
<div class="alert alert-danger" role="alert">
<? var banner = getDataUrl('1-Aif17_98xdCEdKamtFE--xrCv0IFbMS') ?>
<img src="data:<?= banner.type ?>;base64,<?= banner.bytes ?>"
width="100%" class="img-fluid" alt="Responsive image"><Br>
<Br>
<center>
<B><font size=5 color=black>น้ำหนัก ส่วนสูง รอบอก รอบเอว ตะโพก</font></B><Br>
</center>
<div class="form-row">
<div class="form-group col-md-2">
<center><label for="hiegth"><B><font size=4 color=#004d00>ส่วนสูง</font></B></label></center>
<input type="text area" class="form-control input1" id="hiegth" name="hiegth" maxlength="6" placeholder="ส่วนสูงเป็นเซนติเมตร">
</div>
<div class="form-group col-md-2">
<center><label for="weight"><B><font size=4 color=#004d00>น้ำหนัก</font></B></label></center>
<input type="text area" class="form-control input1" id="weight" name="weight" maxlength="6" placeholder="น้ำหนักกิโลกรัม">
</div>
<div class="form-group col-md-2">
<center><label for="chest"><B><font size=4 color=#004d00>รอบอก</font></B></label></center>
<input type="text area" class="form-control input1" id="chest" name="chest" maxlength="3" placeholder="รอบอกเป็นเซนติเมตร">
</div>
<div class="form-group col-md-2">
<center><label for="waist"><B><font size=4 color=#004d00>รอบเอว</font></B></label></center>
<input type="text area" class="form-control input1" id="waist" name="waist" maxlength="3" placeholder="รอบเอวเป็นเซนติเมตร">
</div>
<div class="form-group col-md-2">
<center><label for="hip"><B><font size=4 color=#004d00>รอบตะโพก</font></B></label></center>
<input type="text area" class="form-control input1" id="hip" name="hip" maxlength="3" placeholder="รอบตะโพกเป็นเซนติเมตร">
</div>
<div class="form-group col-md-2">
<center><label for="neck"><B><font size=4 color=#004d00>รอบคอ</font></B></label></center>
<input type="text area" class="form-control input1" id="neck" name="neck" maxlength="3" placeholder="รอบคอเป็นเซนติเมตร">
</div>
</div>
</div>
<div class="alert alert-success" role="alert">
<? var banner = getDataUrl('1FPWEDlWXMqC9aoFW9nhgpANrZhhM2DgE') ?>
<img src="data:<?= banner.type ?>;base64,<?= banner.bytes ?>" width="100%" class="img-fluid" alt="Responsive image"><Br>
<Br>
<center>
<div class="form-group col-md-4">
<label for="fat"><B><font size=5 color=black>ประมาณเปอร์เซนต์ไขมันของท่านจากภาพ</font></B></label>
<input type="number" class="form-control input1" id="fat" name="fat" maxlength="500" placeholder="เปอร์เซนต์ไขมันเมื่อเทียบจากภาพ">
</div>
</center>
</div>
<div class="alert alert-primary" role="alert">
<? var banner = getDataUrl('1ea1e48s_W-j9zmolFG1r1me-IYNk1ado') ?>
<img src="data:<?= banner.type ?>;base64,<?= banner.bytes ?>" width="100%" class="img-fluid" alt="Responsive image"><Br>
<BR>
<B><center><font size=5 color =black>ระบุตำแหน่งการสะสมไขมันของท่าน เพื่อทราบสาเหตุและรับคำแนะนำจากแอพพลิเคชั่น</font></center></B>
<div class="form-row">
<div class="form-check mt-2">
<input class="big" type="radio" name="shape" id="shape_0" value="0" hieght="10em" >
<label class="form-check-label" for="flexRadioDefault"><font size=6>แบบ 0</font></label>
</div>
<div class="form-check mt-2">
<input class="big" type="radio" name="shape" id="shape_1" value="1">
<label class="form-check-label" for="flexRadioDefault"><font size=6>แบบ 1</font></label>
</div>
<div class="form-check mt-2">
<input class="big" type="radio" name="shape" id="shape_2" value="2">
<label class="form-check-label" for="flexRadioDefault"><font size=6>แบบ 2</font></label>
</div>
<div class="form-check mt-2">
<input class="big" type="radio" name="shape" id="shape_3" value="3">
<label class="form-check-label" for="flexRadioDefault"><font size=6>แบบ 3</font></label>
</div>
<div class="form-check mt-2">
<input class="big" type="radio" name="shape" id="shape_4" value="4">
<label class="form-check-label" for="flexRadioDefault"><font size=6>แบบ 4</font></label>
</div>
<div class="form-check mt-2">
<input class="big" type="radio" name="shape" id="shape_5" value="5">
<label class="form-check-label" for="flexRadioDefault"><font size=6>แบบ 5</font></label>
</div>
<div class="form-check mt-2">
<input class="big" type="radio" name="shape" id="shape_6" value="6">
<label class="form-check-label" for="flexRadioDefault"><font size=6>แบบ 6</font></label>
</div>
</div>
</div>
<div class="alert alert-info" role="alert">
<? var banner = getDataUrl('1nfOSrkZEru8Oj2pOSvwg4zrJBw9mAihC') ?>
<img src="data:<?= banner.type ?>;base64,<?= banner.bytes ?>" width="100%" class="img-fluid" alt="Responsive image">
<Br>
<B><center><font size=5 color=blue>ระบุ Body Type ของท่าน เพื่อรับคำแนะนำในการออกกำลังกายและรับประทานอาหารให้เหมาะกับท่าน</font></center></B>
<div class="form-row">
<div class="form-check mt-2">
<input class="biger" type="radio" name="bodyType" id="bodytype_T" value="T">
<label class="form-check-label" for="flexRadioDefault1">
<font size=6 color=purple>ผอมบาง Extomorph</font>
</label>
</div>
<div class="form-check mt-2">
<input class="biger" type="radio" name="bodyType" id="bodytype_M" value="M">
<label class="form-check-label" for="flexRadioDefault1">
<font size=6 color=purple>สมส่วน Mesomorph</font>
</label>
</div>
<div class="form-check mt-2">
<input class="biger" type="radio" name="bodyType" id="bodytype_E" value="E">
<label class="form-check-label" for="flexRadioDefault1">
<font size=6 color=purple>อ้วนล่ำ Endomprph</font>
</label>
</div>
</div>
</div>
<div class="alert alert-danger" role="alert">
<center><label for="frequency"><B><font size=5 color=Green>ความถี่ในการออกกำลังกายต่อสัปดาห์</font></B></label></center>
<div class="form-group col-md-12">
<select id="frequency" class="form-select">
<option value="" disabled selected>ความถี่ของการออกกำลังกาย</option>
<option value="1.2">ไม่ได้ออกกำลังกายเลย </option>
<option value="1.375">อาทิตย์ละ 1-3 วัน</option>
<option value="1.55">อาทิตย์ละ 3-5 วัน</option>
<option value="1.725">ทุกวัน อาทิตย์ละ 6-7 วัน</option>
<option value="1.90">ทุกวันเช้าเย็น 6-7 วันต่อสัปดาห์</option>
</select>
</div>
</div>
<div class="alert alert-primary" role="alert">
<center>
<B><font color=#000066 size=5>ข้อมูลการสมัคร</font></B>
</center>
</div>
<div class="alert alert-info" role="alert">
<div class="form-row">
<div class="form-group col-md-6">
<label for="package"><font size=3 color=black>ประเภทการสมัคร</font></label>
<Br>
<select id="package" class="form-select">
<option value="ELIT"> ELIT วิ่งสะสมระยะ 1000++ km ค่าสมัคร 1000 บาท</option>
<option value="WALK">เดินสะสมระยะ 200 km ค่าสมัคร 800 บาท</option>
<option value="RUN">วิ่งสะสมระยะ 200 kmค่าสมัคร 800 บาท </option>
<option value="BIKE">ปั่นจักรยานสะสมระยะ 400 km ค่าสมัคร 800 บาท</option>
<option value="VIP">สมัคร VIP ส่งผลได้ทุกอย่าง ค่าสมัคร 1200 บาท </option>
<option value="TEAM">สมัครประเภททีม 4 คนขึ้นไปราคา คนละ 700 บาท แต่ละคนเลือกส่ง 1 อย่าง </option>
<option value="NISIT">เยาวชน ต่ำกว่า 18 ปี และนิสิตปัจจุบัน ค่าสมัคร 200 บาท</option>
</select>
</div>
<div class="form-group col-md-6">
<label for="team"><B><font size=3 color=black>ทีม</font></B></label>
<input type="text area" class="form-control" id="team" name="team" maxlength="200" placeholder="ระบุทีม (มีรางวัลระยะรวมทีมสูงสุดและทีมสมาชิกมากสุด)">
</div>
<div class="form-group col-md-12">
<center>
<B><font color=#000066 size=5>แบบเสื้อ</font></B>
</center>
<? var banner = getDataUrl('1FxI3CldeoEDI4jHP_5xUZCwCkdLz9c8m') ?>
<img src="data:<?= banner.type ?>;base64,<?= banner.bytes ?>" width="100%" class="img-fluid" alt="Responsive image">
</div>
<div class="form-group col-md-12">
<? var banner = getDataUrl('1zbz4kai7t3HFknVF_TODGL5kvWJQmzGH') ?>
<img src="data:<?= banner.type ?>;base64,<?= banner.bytes ?>" width="100%" class="img-fluid" alt="Responsive image">
</div>
<div class="form-group col-md-8">
<center>
<B><font color=#000066 size=5>การระบุขนาดเสื้อ</font></B>
<? var banner = getDataUrl('1iqHa7tdVPUs5FxDT14B5WHCYHW9NgwV7') ?>
<img src="data:<?= banner.type ?>;base64,<?= banner.bytes ?>" width="100%" class="img-fluid" alt="Responsive image"></center>
</div>
<div class="form-group col-md-4">
<label for="shirtsize"><font size=5 color=red>ขนาดเสื้อถ้าคนตัวสูงผอมให้เลือกตามความยาว (LENGTH) ถ้าคนอ้วนล่ำให้เลือกตามรอบอก(CHEST)</font></label>
<Br>
<select id="shirtsize" class="form-select">
<option value="" >ระบุขนาดเสื้อที่นี่</option>
<option value="SS">SS</option>
<option value="S">S</option>
<option value="M">M</option>
<option value="L">L</option>
<option value="XL">XL</option>
<option value="2XL">2XL</option>
<option value="3XL">3XL</option>
<option value="4XL">4XL</option>
<option value="5XL">5XL</option>
<option value="6XL">6XL</option>
</select>
</div>
</div>
</div>
<div class="alert alert-primary" role="alert">
<center>
<B><font color=#000066 size=5>คำแนะนำอื่น ๆ สำหรับผู้จัด<Br></font></B>
</center>
<div class="form-group col-md-12">
<label for="rec3"><B><font size=3 color=black>3</font></B></label>
<input type="text area" class="form-control" id="rec3" name="rec3" maxlength="50" placeholder="">
</div>
<div class="form-group col-md-12">
<label for="rec4"><B><font size=3 color=black>4</font></B></label>
<input type="text area" class="form-control" id="rec4" name="rec4" maxlength="50" placeholder="">
</div>
<div class="form-group col-md-12">
<label for="rec5"><B><font size=3 color=black>5</font></B></label>
<input type="text area" class="form-control" id="rec5" name="rec5" maxlength="13" placeholder="">
</div>
</div>
<div class="alert alert-danger" role="alert">
<div class="form-row">
<div class="form-group col-md-12">
<center><label for="consent"><B><font size=5 color=red>คำยินยอมให้ผู้จัดเก็บข้อมูลส่วนบุคคลที่กรอกแบบฟอร์มมา</font></B></label></center>
<select id="consent" class="form-select">
<option value="" disabled selected>การตกลงยินยอม</option>
<option value="YES">ยินยอม</option>
<option value="NO">ไม่ยินยอม</option>
</select>
</div>
</div>
<div class="row justify-content-center">
<div class="input-field col s6 text-center">
<button style="width:100%;height:100px" class="btn btn-secondary" id="button" type="submit" onclick="submitForm(); return false;">
<font size=8>กดส่งแบบฟอร์มสมัคร</font>
</button>
</div>
</div>
</div>
</div>
</div>
</form>
<div class="alert alert-info" role="alert">
<div id="success" style="display:none">
<h3 class="left-align teal-text">
<center>
<font color=#6600ff>ดำเนินการส่งข้อมูลการสมัครของท่านเรียบร้อย!</font>
</center>
</h3>
<div class="alert alert-danger" role="alert">
<center>
<a href="">
<font size=8>สมัครเพิ่มเติม</font>
</a>
</center>
<div class="alert alert-info" role="alert">
<center>
<a href="">
<font size=8>ตรวจข้อมูลการสมัคร</font>
</a>
</center>
<div class="alert alert-warning" role="alert">
<center>
<a href="https://lin.ee/Fi55SMK">
<font size=6>ติดต่อแอดมินทาง Official Line </font>
</a>
</center>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/js/materialize.min.js"></script>
<script type="text/javascript" src="https://earthchie.github.io/jquery.Thailand.js/jquery.Thailand.js/dependencies/JQL.min.js"></script>
<script type="text/javascript" src="https://earthchie.github.io/jquery.Thailand.js/jquery.Thailand.js/dependencies/typeahead.bundle.js"></script>
<link rel="stylesheet" href="https://earthchie.github.io/jquery.Thailand.js/jquery.Thailand.js/dist/jquery.Thailand.min.css">
<script type="text/javascript" src="https://earthchie.github.io/jquery.Thailand.js/jquery.Thailand.js/dist/jquery.Thailand.min.js"></script>
<script>
$.Thailand({
$district: $('#district'),
$amphoe: $('#amphoe'),
$province: $('#province'),
$zipcode: $('#zipcode'),
onDataFill: function(data) {
console.log(data)
$('#cnt').val('ไทย')
},
onLoad: function() {
console.info('Autocomplete is ready!');
$('#loader, .demo').toggle();
}
});
</script>
<script>
var file, reader = new FileReader();
reader.onloadend = function(e) {
if (e.target.error != null) {
showError("File " + file.name + " could not be read.");
return;
} else {
let formdata = $('#form').serializeArray()
console.log(formdata)
google.script.run
.withSuccessHandler(showSuccess)
.uploadFileToGoogleDrive(e.target.result, file.name,
$('input#idCard').val(),
$('#type').val(),
$('#gen').val(),
$('#gender').val(),
$('input#firstname').val(),
$('input#lastname').val(),
$('input#nickname').val(),
$('input#birthdate').val(),
$('#religion').val(),
$('#blood').val(),
$('input#moo').val(),
$('input#district').val(),
$('input#amphoe').val(),
$('input#province').val(),
$('input#cnt').val(),
$('input#zipcode').val(),
$('input#ptel').val(),
$('input#email').val(),
$('input#line').val(),
$('input#emergen').val(),
$('input#emergtel').val(),
$('#dm').is(":checked") ? 'เบาหวาน' : 'No',
$('#HP').is(":checked") ? 'ความดันสูง' : 'No',
$('#LP').is(":checked") ? 'ความดันต่ำ' : 'No',
$('#heart').is(":checked") ? 'โรคหัวใจ' : 'No',
$('#kidney').is(":checked") ? 'โรคไต' : 'No',
$('#asma').is(":checked") ? 'หอบหืด' : 'No',
$('input#hiegth').val(),
$('input#weight').val(),
$('input#chest').val(),
$('input#waist').val(),
$('input#hip').val(),
$('input#neck').val(),
$('input#fat').val(),
$('input[name="shape"]:checked').attr('id').split('_')[1],
$('input[name="bodyType"]:checked').attr('id').split('_')[1],
$('#package').val(),
$('input#team').val(),
$('#shirtsize').val(),
$('#consent').val(),
$('#frequency').val(),
$('input#rec3').val(),
$('input#rec4').val(),
$('input#rec5').val(),
$('input#PicID').val(),
$('input#PicURL').val()
);
}
};
function showSuccess(e) {
if (e === "OK") {
$('#forminner').hide();
$('#success').show();
$('#image').hide();
//$('input#distance').val("");
//$('input#ebib').val("");
} else {
showError(e);
}
}
function restartForm() {
$('#form').trigger("reset");
$('#forminner').show();
$('#success').hide();
$('#button').show();
}
function submitForm() {
var idCard = $('input#idCard').val();
if (idCard.length === 0) {
showError("กรุณากรอกเลขประจำตัวประชาชนของท่านด้วย");
return;
}
var gender = $('#gender').find(':selected').val();
console.log(gender)
if(gender.length === 0){
showError("กรุณาเลือกเพศของท่าน");
return;
}
var firstname = $('input#firstname').val();
if (firstname.length === 0) {
showError("กรุณากรอกชื่อของท่านด้วย");
return;
}
var lastname = $('input#lastname').val();
if (lastname.length === 0) {
showError("กรุณากรอกนามสกุลของท่านด้วย");
return;
}
var gen = $('#gen').val();
console.log(gen)
if (!gen || gen == '') {
showError("กรุณาระบุรุ่นของท่าน");
return;
}
var birthdate = $('input#birthdate').val();
if (birthdate.length === 0) {
showError("กรุณากรอกวันเดือนปีเกิดของท่านด้วย");
return;
}
var ptel = $('input#ptel').val();
if (ptel.length === 0) {
showError("กรุณากรอกหมายเลขโทรศัพท์ของท่านด้วย");
return;
}
var emergen = $('input#emergen').val();
if (emergen.length === 0) {
showError("กรุณากรอกชื่อผู้ติดต่อกรณีฉุกเฉิน");
return;
}
var emergtel = $('input#emergtel').val();
if (emergtel.length === 0) {
showError("กรุณากรอกเบอร์โทรติดต่อกรณีฉุกเฉิน");
return;
}
var district = $('input#district').val();
if (district.length === 0) {
showError("กรุณากรอกตำบลของท่าน");
return;
}
var files = $('#files')[0].files;
if (files.length === 0) {
showError("ท่านต้องส่งไฟล์ภาพของท่านด้วยครับ");
return;
}
var bodyType = $('input[name="bodyType"]:checked').attr('id').split('_')[1]
if (!bodyType || bodyType.length == 0) {
showError("ท่านต้องระบุ Body Type ของท่าน");
return;
}
var shape = $('input[name="shape"]:checked').attr('id').split('_')[1]
if (!shape || shape.length == 0) {
showError("ท่านต้องระบุตำแหน่งการสะสมไขมันของท่าน");
return;
}
var consent = $('#consent').val();
console.log(consent)
if (consent != 'YES') {
showError("กรุณากดการตกลงยินยอมให้ข้อมูลด้วยครับ");
return;
}
var frequency = $('#frequency').find(':selected').val();
console.log(frequency)
if(frequency.length === 0){
showError("กรุณาเลือกแจ้งความถี่ของการออกกำลังกายของท่าน");
return;
}
document.getElementById("button").style.display = "none"
file = files[0];
if (file.size > 1024 * 1024 * 20) {
showError("The file size should be < 20 MB. ");
return;
}
showMessage("...กำลังบันทึกระเบียนทันตกรรมให้ท่าน...");
reader.readAsDataURL(file);
}
function showError(e) {
Swal.fire({
title: 'ขออภัย!',
text: e,
icon: 'error',
confirmButtonText: 'รับทราบ'
})
}
function showMessage(e) {
Swal.fire({
title: 'กำลังดำเนินการส่งข้อมูลให้ท่าน!',
text: 'กรุณาจนกระทั่งระบบแจ้งเตือนการสมัครสำเร็จ',
icon: 'info',
confirmButtonText: 'รับทราบ'
})
}
document.getElementById("files").onchange = function() {
var reader = new FileReader();
reader.onload = function(e) {
document.getElementById("image").src = e.target.result;
$('#image').show();
};
reader.readAsDataURL(this.files[0]);
};
</script>
<script src="//cdn.jsdelivr.net/npm/sweetalert2@10"></script>
<script>
$(document).ready(function() {
$('#idCard').on('keyup', function() {
if ($.trim($(this).val()) != '' && $(this).val().length == 13) {
id = $(this).val().replace(/-/g, "");
var result = Script_checkID(id);
if (result === false) {
Swal.fire({
position: 'center',
icon: 'error',
title: '<font size=5 color=red>รูปแบบเลขบัตรประชาชนไม่ถูกต้อง</font>',
text: 'กรุณากรอกให้ถูกต้อง',
// showConfirmButton: true,
confirmButtonText: '<font size=5>รับทราบ</font>'
// timer: 1500
})
uidCard.value = ""
} else {
google.script.run.withSuccessHandler(updateData).getCode(uidCard.value);
}
} else {
$('span.error').removeClass('true').text('');
}
})
});
function Script_checkID(id) {
if (!IsNumeric(id)) return false;
if (id.substring(0, 1) == 0) return false;
if (id.length != 13) return false;
for (i = 0, sum = 0; i < 12; i++)
sum += parseFloat(id.charAt(i)) * (13 - i);
if ((11 - sum % 11) % 10 != parseFloat(id.charAt(12))) return false;
return true;
}
function IsNumeric(input) {
var RE = /^-?(0|INF|(0[1-7][0-7]*)|(0x[0-9a-fA-F]+)|((0|[1-9][0-9]*|(?=[\.,]))([\.,][0-9]+)?([eE]-?\d+)?))$/;
return (RE.test(input));
}
</script>
<script>
function updateData(data) {
console.log(data)
if (data) {
Swal.fire({
position: 'center',
icon: 'info',
title: '<a href="https://script.google.com/macros/s/AKfycby9_MZjZhl64PpYu-CTjxnWNze_j2LLdWp7cgWQ9x-4Kpo6C76F/exec"><B><font size=5 color=#3366ff>เลขบัตรประชาชนนี้ลงทะเบียนแล้วกรุณาตรวจสอบที่นี่</font></B></a>',
text: 'คลิกที่ลิงค์ด้านบนนี้',
confirmButtonText: '<font size=5>รับทราบ</font>'
//showConfirmButton: true,
//timer: 5000
})
}
}
</script>
<script>
var uidCard = document.getElementById("idCard")
document.getElementById("form").addEventListener("submit", saveData)
function saveData() {
event.preventDefault()
var data = {
idCard: uidCard.value,
}
google.script.run.withSuccessHandler(success).recordData(data)
}
function success() {
uidCard.value = ""
}
</script>
<script>
$(document).ready(function() {
$("#gen").select2({
theme: "bootstrap-5",
width: '100%'
});
});
$('#upload-btn').on('click', () => $('#imgUpload').click())
</script>
</div>
</div>
</div>
</body>
</html>Last updated