code.gs
function doGet() {
return HtmlService.createTemplateFromFile('index').evaluate()
.addMetaTag('viewport', 'width=device-width, initial-scale=1')
// .setFaviconUrl('https://drive.google.com/file/d/1edLz97zRkTjqksjx7eo_SXQavnPctOOG/view')
.setTitle('ลงทะเบียนผู้ขอรับทุนการศึกษา สมาคมฌาปนกิจสงเคราะห์ โกเชน')
.setSandboxMode(HtmlService.SandboxMode.IFRAME)
.setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL);
}
function include(filename) {
return HtmlService.createHtmlOutputFromFile(filename).getContent();
}
// 777
function getData() {
var sourceSheetName = "list"; // Replace with the name of the source sheet
var sourceSheet = SpreadsheetApp.openById("1j---------WA").getSheetByName(sourceSheetName);
var obj = sourceSheet.getDataRange().getDisplayValues().slice(2)
var data ={}
obj.forEach(([colA,colB,colC])=>{
const firstCol = data[colA]
if(!firstCol){
data[colA] = {}
data[colA][colB] = [colC]
}else{
const secondCol = firstCol[colB]
if(!secondCol){
firstCol[colB] = [colC]
}else{
secondCol.push(colC)
}
}
})
Logger.log(data)
return data
}
function uploadFile(blob) {
// ตรวจสอบขนาดของไฟล์ก่อนที่จะอนุญาตให้อัปโหลด
if (blob.getBytes().length > 1000000) { // ขนาดไม่เกิน 1 MB
return "ขนาดไฟล์เกินจากที่กำหนด";
}
// ทำอะไรกับไฟล์ที่ถูกอัปโหลด ที่นี้คุณสามารถบันทึกไฟล์ลงใน Google Drive หรือทำอะไรก็ตามตามที่คุณต้องการ
// ตัวอย่าง: saveFileToDrive(blob);
// return "อัปโหลดไฟล์สำเร็จ";
}
function saveData(obj) {
var ss = SpreadsheetApp.openById('1-------------------------------------------4');
var sheet = ss.getSheetByName('savedata');
var lastRow = sheet.getLastRow();
var folder = DriveApp.getFolderById("1q-------------X"); //แก้เป็นไอดีโฟลเดอร์ของเรา
var file, file2 = ''
var rowData = [
lastRow,
new Date(),
obj.data1,
obj.data2,
obj.data3,
obj.data4,
obj.data5,
obj.data6,
obj.data7,
obj.data8,
obj.data9,
obj.data10,
obj.data11,
obj.district,
// obj.data12,
obj.amphoe,
// obj.data13,
obj.province,
// obj.data14,
obj.zipcode,
// obj.data15,
// "'" + obj.data16,
obj.data16,
obj.data17,
obj.data18,
obj.data19,
obj.colC,
// obj.data20,
obj.colB,
// obj.data21,
obj.colA,
// obj.data22,
obj.data23,
// "'" + obj.data24,
obj.data24,
obj.data25,
obj.data26,
obj.data27,
obj.data28,
obj.data29,
obj.data30,
obj.data31,
obj.data32,
obj.data33,
obj.data34,
obj.data35,
obj.data36,
];
if (obj.imagedata) {
Object.keys(obj.imagedata).forEach(key => {
Logger.log(key)
let image = obj.imagedata[key]
let datafile = Utilities.base64Decode(image.data)
let blob = Utilities.newBlob(datafile, image.type, image.name);
file = folder.createFile(blob).getUrl()
rowData.push(file)
})
}
SpreadsheetApp.getActive().getSheets()[0].appendRow(rowData);
return true
}
var ss= SpreadsheetApp.getActiveSpreadsheet()
function getData28(){
var detial = ss.getSheets()[1].getRange('N2:N').getValues()
return detial;
}
function getData34(){
var detial =ss.getSheets()[1].getRange("R2:R").getValues()
return detial;
}
function getData36(){
var detial = ss.getSheets()[2].getRange("B3:B").getValues()
return detial;
}
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link href="https://fonts.googleapis.com/css2?family=Prompt" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<style>
body { font-family: 'Prompt' !important; }
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js
" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous"></script>
<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" />
<link rel="preconnect" href="https://fonts.gstatic.com
" />
<link href="https://fonts.googleapis.com/css2?family=Prompt&display=swap
" rel="stylesheet" />
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css
" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous" />
<link rel="stylesheet" href="https://earthchie.github.io/jquery.Thailand.js/jquery.Thailand.js/dist/jquery.Thailand.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/css/bootstrap-datepicker.min.css
" integrity="sha512-mSYUmp1HYZDFaVKK//63EcZq4iFWFjxSL+Z3T/aCt4IO9Cejm03q3NKKYN6pFQzY0SBOr8h+eCIAZHPXcpZaNw=="
crossorigin="anonymous" />
<style>
body {
font-family: "Prompt", sans-serif
}
</style>
<?!=include('css')?>
<?!= include('css');?>
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" integrity="sha512-Fo3rlrZj/k7ujTnHg4CGR2D7kSs0v4LLanw2qksYuRlEzO+tcaEPQogQ0KaoGN26/zrn20ImR1DfuLWnOo7aBA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<link href="https://fonts.googleapis.com/css2?family=Prompt:wght@400&display=swap" rel="stylesheet">
<style>body{font-family: 'Prompt';}
.form-control:focus {
border-color: #6265e4 !important;
box-shadow: 0 0 5px rgba(98, 101, 228, 1) !important;
}
</style>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css"
integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<!--AutoComplete-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.1/css/bootstrap.min.css" />
<script src="https://kit.fontawesome.com/6a972cf3a7.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css">
<link href="https://fonts.googleapis.com/css2?family=Niramit:wght@400&display=swap" rel="stylesheet">
<link href="https://ltschool.web.app/css/Bootstrapcolor.css" rel="stylesheet" type="text/css">
<style>
body {
font-family: 'Prompt', sans-serif;
}
</style>
<style>
.ui-autocomplete {
position: absolute;
top: 100%;
left: 0;
z-index: 1000;
display: none;
float: left;
min-width: 160px;
padding: 5px 0;
margin: 2px 0 0;
list-style: none;
font-size: 14px;
text-align: left;
background-color: #ffffff;
border: 1px solid #cccccc;
border: 1px solid rgba(0, 0, 0, 0.15);
border-radius: 4px;
-webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
background-clip: padding-box;
}
.ui-autocomplete>li>div {
display: block;
padding: 3px 20px;
clear: both;
font-weight: normal;
line-height: 1.42857143;
color: #333333;
white-space: nowrap;
}
.ui-state-hover,
.ui-state-active,
.ui-state-focus {
text-decoration: none;
color: #262626;
background-color: #f5f5f5;
cursor: pointer;
}
.ui-helper-hidden-accessible {
border: 0;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}
</style>
<?!=include('css')?>
</head>
<body>
<div class="card">
<div class="card-header h5 bg-danger text-white">
<i class="fas fa-sign-in-alt"></i> ..ขอพระพักตร์พระองค์ทอแสงเหนือข้าพระองค์ทั้งหลาย ขอทรงช่วยข้าพระองค์ให้รอดด้วยความรักมั่นคงของพระองค์ พระเจ้าอวยพระพร นะครับ
</div>
<div class="card-body">
<div class="container">
<div class="jumbotron bg-white d-flex align-items-center min-vh-100 justify-content-center">
<!-- <div class="row"> -->
<div class="col-md-6">
<!-- -------------------------------เริ่มฟอร์ม------------------------------------------ -->
<form id="myForm" onsubmit="submitForm()">
<p class="h3 mb-4 text-center"><i class="fas fa-chalkboard-teacher"></i> ฟอร์มบันทึกข้อมูลลงทะเบียนผู้ขอรับทุนการศึกษา สมาคมฌาปนกิจสงเคราะห์ โกเชน</p>
<!-- -------------------------------ชื่อ + สกุล------------------------------------------ -->
<div class="row my-3">
<div class="form-group col-md-6">
<label for="education"><i class="fas fa-user-graduate"></i> รอบทุนการศึกษา </label>
<select id="data1" class="form-control" required>
<option selected disabled value="">เลือก..</option>
<option value="รอบ 1 กรกฎาคม 2023">รอบ 1 กรกฎาคม 2023</option>
<option value="รอบ 1 มกราคม 2024">รอบ 1 มกราคม 2024</option>
<option value="รอบ 1 กรกฎาคม 2024">รอบ 1 กรกฎาคม 2024</option>
<option value="รอบ 1 มกราคม 2025">รอบ 1 มกราคม 2025</option>
<option value="รอบ 1 กรกฎาคม 2025">รอบ 1 กรกฎาคม 2025</option>
<option value="รอบ 1 มกราคม 2026">รอบ 1 มกราคม 2026</option>
<option value="รอบ 1 กรกฎาคม 2026">รอบ 1 กรกฎาคม 2026</option>
<option value="รอบ 1 มกราคม 2027">รอบ 1 มกราคม 2027</option>
<option value="รอบ 1 กรกฎาคม 2027">รอบ 1 กรกฎาคม 2027</option>
<option value="รอบ 1 มกราคม 2028">รอบ 1 มกราคม 2028</option>
<option value="รอบ 1 กรกฎาคม 2028">รอบ 1 กรกฎาคม 2028</option>
</select>
</div>
<div class="form-group col-md-6">
<label for="dateOfBirth"><i class="fas fa-birthday-cake"></i> วันเดือนปี ขอทุนการศึกษา</label>
<input type="date" class="form-control" id="data2" required>
</div>
</div>
<div class="row my-3">
<div class="form-group col-md-6">
<label for="education"><i class="fas fa-user-graduate"></i> คำนำหน้า </label>
<select id="data3" class="form-control" required>
<option selected disabled value="">เลือก..</option>
<option value="ด.ช.">ด.ช.</option>
<option value="ด.ญ.">ด.ญ.</option>
<option value="นาย">นาย</option>
<option value="นางสาว">นางสาว</option>
</select>
</div>
<div class="form-group col-md-6">
<label for="last_name"><i class="fas fa-user-plus"></i> ชื่อ ผู้ขอรับทุนการศึกษา</label>
<input type="text" class="form-control" id="data4" placeholder="ชื่อ ผู้ขอรับทุนการศึกษา" required>
</div>
</div>
<div class="row my-3">
<div class="form-group col-md-6">
<label for="last_name"><i class="fas fa-user-plus"></i> นามสกุล ผู้ขอรับทุนการศึกษา</label>
<input type="text" class="form-control" id="data5" placeholder="นามสกุล ผู้ขอรับทุนการศึกษา" required>
</div>
<div class="form-group col-md-6">
<label for="last_name"><i class="fas fa-user-plus"></i> เลขประจำตัวประชาชน</label>
<input type="text" class="form-control" id="data6" placeholder="เลขประจำตัวประชาชน" required>
</div>
</div>
<!-- -------------------------------เพศ + วันเกิด------------------------------------------ -->
<div class="row my-3">
<div class="form-group col-md-6">
<p><i class="fas fa-restroom"></i> เพศ</p>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="data7" id="id1" value="ชาย" required>
<label class="form-check-label" for="male">ชาย</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="data7" id="id2" value="หญิง" required>
<label class="form-check-label" for="female">หญิง</label>
</div>
</div>
<div class="form-group col-md-6">
<label for="dateOfBirth"><i class="fas fa-birthday-cake"></i> วันเดือนปี เกิด</label>
<input type="date" class="form-control" id="data8" required>
</div>
</div>
<div class="row my-3">
<div class="form-group col-md-6">
<label for="last_name"><i class="fas fa-user-plus"></i> บ้านเลขที่ </label>
<input type="text" class="form-control" id="data9" placeholder="บ้านเลขที่ " required>
</div>
<div class="form-group col-md-6">
<label for="last_name"><i class="fas fa-user-plus"></i> หมู่ที่</label>
<input type="text" class="form-control" id="data10" placeholder="หมู่ที่" required>
</div>
</div>
<div class="row my-3">
<div class="form-group col-md-6">
<label for="last_name"><i class="fas fa-user-plus"></i> ชื่อบ้าน </label>
<input type="text" class="form-control" id="data11" placeholder="ชื่อบ้าน " required>
</div>
<div class="form-group col-md-6">
<label for="last_name"><i class="fas fa-user-plus"></i> ตำบล.</label>
<input type="text" class="form-control" id="district" placeholder="ตำบล" required>
<!-- <input type="text" class="form-control" id="data12" placeholder="ตำบล" required> -->
</div>
</div>
<div class="row my-3">
<div class="form-group col-md-6">
<label for="last_name"><i class="fas fa-user-plus"></i> อำเภอ </label>
<input type="text" class="form-control" id="amphoe" placeholder="อำเภอ " required>
<!-- <input type="text" class="form-control" id="data13" placeholder="อำเภอ " required> -->
</div>
<div class="form-group col-md-6">
<label for="last_name"><i class="fas fa-user-plus"></i> จังหวัด.</label>
<!-- <input type="text" class="form-control" id="data14" placeholder="จังหวัด" required> -->
<input type="text" class="form-control" id="province" placeholder="จังหวัด" required>
</div>
</div>
<div class="row my-3">
<div class="form-group col-md-6">
<label for="last_name"><i class="fas fa-envelope"></i> รหัสไปรษณีย์ </label>
<input type="text" class="form-control" id="zipcode" placeholder="รหัสไปรษณีย์ " required>
<!-- <input type="text" class="form-control" id="data15" placeholder="รหัสไปรษณีย์ " required> -->
</div>
<div class="form-group col-md-6">
<label for="phone"><i class="fas fa-mobile-alt"></i> เบอร์โทรศัพท์</label>
<input type="text" class="form-control" id="data16" placeholder="เบอร์โทรศัพท์" required>
</div>
</div>
<div class="row my-3">
<div class="form-group col-md-6">
<label for="education"><i class="fas fa-user-graduate"></i> กำลังเรียน ชั้น. </label>
<select id="data17" class="form-control" required>
<option selected disabled value="">เลือก..</option>
<option value="ประถมศึกษาปีที่ 1">ประถมศึกษาปีที่ 1</option>
<option value="ประถมศึกษาปีที่ 2">ประถมศึกษาปีที่ 2</option>
<option value="ประถมศึกษาปีที่ 3">ประถมศึกษาปีที่ 3</option>
<option value="ประถมศึกษาปีที่ 4">ประถมศึกษาปีที่ 4</option>
<option value="ประถมศึกษาปีที่ 5">ประถมศึกษาปีที่ 5</option>
<option value="ประถมศึกษาปีที่ 6">ประถมศึกษาปีที่ 6</option>
<option value="มัธยมศึกษาปีที่ 1">มัธยมศึกษาปีที่ 1</option>
<option value="มัธยมศึกษาปีที่ 2">มัธยมศึกษาปีที่ 2</option>
<option value="มัธยมศึกษาปีที่ 3">มัธยมศึกษาปีที่ 3</option>
<option value="มัธยมศึกษาปีที่ 4">มัธยมศึกษาปีที่ 4</option>
<option value="มัธยมศึกษาปีที่ 5">มัธยมศึกษาปีที่ 5</option>
<option value="มัธยมศึกษาปีที่ 6">มัธยมศึกษาปีที่ 6</option>
</select>
</div>
<div class="form-group col-md-6">
<label for="last_name"><i class="fa fa-fort-awesome"></i> โรงเรียน.</label>
<input type="text" class="form-control" id="data18" placeholder="โรงเรียน" required>
</div>
</div>
<div class="row">
<div class="col mb-3">
<label style="font-size:16px; color:black" for="colA"> จังหวัด</label>
<select class="form-control" id="colA" class="selectpicker show-tick" required>
<option value="" selected='selected'>เลือกจังหวัด</option>
</select>
</div>
<div class="col mb-3">
<label style="font-size:16px; color:black" for="colฺB"> อำเภอ</label>
<select class="form-control" id="colB" class="selectpicker show-tick" required>
<option value="" selected='selected'>เลือกอำเภอ</option>
</select>
</div>
</div>
<div class="row">
<div class="col mb-3">
<label style="font-size:16px; color:black" for="colC" > ตำบล</label>
<select class="form-control" id="colC" class="selectpicker show-tick" required>
<option value="" selected='selected'>เลือกตำบล</option>
</select>
</div>
<div class="form-group col-md-6">
<label for="last_name"><i class="fas fa-user-graduate"></i> ที่อยู่ </label>
<input type="text" class="form-control" id="data19" placeholder="ที่อยู่ " required>
</div>
</div>
<div class="row my-3">
<div class="form-group col-md-6">
<label for="last_name"><i class="fas fa-envelope"></i> รหัสไปรษณีย์ </label>
<!-- <input type="text" class="form-control" id="zipcode" placeholder="รหัสไปรษณีย์ " required> -->
<input type="text" class="form-control" id="data23" placeholder="รหัสไปรษณีย์ " required>
</div>
<div class="form-group col-md-6">
<label for="phone"><i class="fas fa-mobile-alt"></i> เบอร์โทรศัพท์ครู</label>
<input type="text" class="form-control" id="data24" placeholder="เบอร์โทรศัพท์ครู" required>
</div>
</div>
<div class="row my-3">
<div class="form-group col-md-6">
<label for="inputBlood"><i class="fas fa-bong"></i> ความสัมพันธ์ฯกับสมาชิกฯ โกเชน</label>
<select id="data25" class="form-control" required>
<option selected disabled value="">เลือก..</option>
<option value="พ่อ/แม่">พ่อ/แม่</option>
<option value="ปู่/ย่า ตา/ยาย">ปู่/ย่า ตา/ยาย</option>
<option value="ลุง/ป้า/น้า/อา">ลุง/ป้า/น้า/อา</option>
</select>
</div>
<div class="form-group col-md-6">
<label for="education"><i class="fas fa-user-graduate"></i> พักอาศัยอยู่กับ</label>
<select id="data26" class="form-control" required>
<option selected disabled value="">เลือก..</option>
<option value="พ่อ แม่">พ่อ แม่</option>
<option value="ปู่/ย่า/ ตา/ยาย">ปู่/ย่า/ ตา/ยาย</option>
<option value="ลุง/ป้า/น้า/อา">ลุง/ป้า/น้า/อา</option>
<option value="พ่่อ หรือแม่ ซึ่งแยกกันอยู่เนื่องจากอาชีพ">พ่่อ หรือแม่ ซึ่งแยกกันอยู่เนื่องจากอาชีพ</option>
<option value="พ่่อ หรือแม่ ซึ่งแยกกันอยู่เนื่องจากหย่าร้าง">พ่่อ หรือแม่ ซึ่งแยกกันอยู่เนื่องจากหย่าร้าง</option>
<option value="พ่่อ หรือแม่ ซึ่งแยกกันอยู่เนื่องจากการเสียชีวิต">พ่่อ หรือแม่ ซึ่งแยกกันอยู่เนื่องจากการเสียชีวิต</option>
</select>
</div>
</div>
<div class="row my-3">
<div class="form-group col-md-6">
<label for="inputBlood"><i class="fas fa-bong"></i> ผู้สนับสนุนค่าใช้จ่ายในการศึกษา</label>
<select id="data27" class="form-control" required>
<option selected disabled value="">เลือก..</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-6">
<label for="education"><i class="fas fa-user-graduate"></i> รายได้ /เดือน ของผู้เลี้ยงดู</label>
<select id="data29" class="form-control" required>
<option selected disabled value="">เลือก..</option>
<option value="น้อยกว่า 3,000 บาท">น้อยกว่า 3,000 บาท</option>
<option value="3,000-9,000 บาท">3,000-9,000 บาท</option>
<option value="9,001-15,000 บาท">9,001-15,000 บาท</option>
<option value="15,001-21,000 บาท">15,001-21,000 บาท</option>
<option value="21,001-27,000 บาท">21,001-27,000 บาท</option>
<option value="มากกว่า 27,000 บาท">มากกว่า 27,000 บาท</option>
</select>
</div>
</div>
<div class="row my-3">
<div class="form-group col-md-6">
<label for="last_name"><i class="fa fa-fort-awesome"></i> อาชีพผู้สนับสนุนค่าใช้จ่ายในการศึกษา.</label>
<input type="text" class="form-control" id="data28" placeholder="อาชีพผู้สนับสนุนค่าใช้จ่ายในการศึกษา." required>
</div>
<div class="form-group col-md-6">
<label for="last_name"><i class="fas fa-church"></i> ผู้ขอรับทุนฯ มานมัสการพระเจ้า.....ครั้ง</label>
<input type="text" class="form-control" id="data30" placeholder="ผู้ขอรับทุนฯ มานมัสการพระเจ้า." required>
</div>
</div>
<div class="row my-3">
<div class="form-group col-md-6">
<label for="last_name"><i class="fas fa-user-plus"></i> เกณฑ์เกรดเฉลี่ยผู้ขอรับทุนฯ</label>
<input type="text" class="form-control" id="data31" placeholder="เกณฑ์เกรดเฉลี่ยผู้ขอรับทุนฯ " required>
</div>
<div class="form-group col-md-6">
<label for="inputBlood"><i class="fas fa-bong"></i> เกณฑ์ความประพฤติผู้ขอรับทุนฯ</label>
<select id="data32" class="form-control" required>
<option selected disabled value="">เลือก..</option>
<option value="ดีมาก">ดีมาก</option>
<option value="ดี">ดี</option>
<option value="พอใช้">พอใช้</option>
<option value="ต้องปรับปรุง">ต้องปรับปรุง</option>
</select>
</div>
</div>
<div class="row my-3">
<label for="address"><i class="fas fa-address-card"></i> ข้อเสนอแนะ</label>
<textarea class="form-control" rows="5" id="data33" placeholder="ข้อเสนอแนะ"></textarea>
</div>
<div class="row my-3">
<div class="form-group col-md-6">
<label for="last_name"><i class="fas fa-book-reader"></i> ธนาคาร</label>
<input type="text" class="form-control" id="data34" placeholder="ธนาคาร." required>
</div>
<div class="form-group col-md-6">
<label for="last_name"><i class="fas fa-book-reader"></i> เลขที่ บัญชีธนาคาร</label>
<input type="text" class="form-control" id="data35" placeholder="เลขที่ บัญชีธนาคาร." required>
</div>
</div>
<div class="row my-3">
<div class="form-group col-md-6">
<label for="last_name"><i class="fas fa-users"></i> ชื่อ-นามสกุลสมาชิกฯ โกเชน</label>
<input type="text" class="form-control" id="data36" placeholder="ชื่อ-นามสกุลสมาชิกฯ โกเชน." required>
</div>
<div class="form-group col-md-6">
<label for="check_site"><i class="fas fa-bong"></i> เช็คขนาดทุกไฟล์ ก่อน Upload </label>
<input type="file" id="fileInput" onchange="handleFileChange()">
<div id="result"></div>
<script>
function handleFileChange() {
var fileInput = document.getElementById('fileInput');
var file = fileInput.files[0];
var resultDiv = document.getElementById('result');
// ตรวจสอบขนาดของไฟล์ก่อนที่จะอัปโหลด
if (file.size > 1000000) { // ขนาดไม่เกิน 1 MB
resultDiv.innerHTML = "ขนาดไฟล์เกินจากที่กำหนด";
return;
}else{
resultDiv.innerHTML = "ขนาดไฟล์พอดี";
}
// // ทำการอัปโหลดไฟล์
// var formData = new FormData();
// formData.append('file', file);
// google.script.run.withSuccessHandler(function (response) {
// resultDiv.innerHTML = response;
// }).uploadFile(formData);
}
</script>
</div>
</div>
<div class="row my-3">
<!-- -------------------------------อัปโหลดไฟล์1------------------------------------------ -->
<!-- <div class="form-group my-3"> -->
<div class="form-group col-md-6">
<label for="formFile" class="form-label"><i class="fas fa-upload"></i> บัตรประชาชนผู้ขอรับทุนฯ</label>
<input class="form-control" type="file" name="uploadfile" id="imageidcard">
</div>
<!-- </div> -->
<!-- -------------------------------อัปโหลดไฟล์2------------------------------------------ -->
<!-- <div class="form-group my-3"> -->
<div class="form-group col-md-6">
<label for="formFile" class="form-label"><i class="fas fa-upload"></i> ทะเบียนบ้านผู้ขอรับทุนฯ</label>
<input class="form-control" type="file" name="uploadfile" id="imagehouse">
</div>
<!-- </div> -->
</div>
<div class="row my-3">
<!-- -------------------------------อัปโหลดไฟล์3------------------------------------------ -->
<!-- <div class="form-group my-3"> -->
<div class="form-group col-md-6">
<label for="formFile" class="form-label"><i class="fas fa-upload"></i> บัตรประชาชนสมาชิกสมาคมฯ</label>
<input class="form-control" type="file" name="uploadfile" id="imagememberid">
</div>
<!-- </div> -->
<!-- -------------------------------อัปโหลดไฟล์4------------------------------------------ -->
<!-- <div class="form-group my-3"> -->
<div class="form-group col-md-6">
<label for="formFile" class="form-label"><i class="fas fa-upload"></i> ทะเบียนบ้านสมาชิกสมาคมฯ</label>
<input class="form-control" type="file" name="uploadfile" id="imagememberh">
</div>
<!-- </div> -->
</div>
<div class="row my-3">
<!-- -------------------------------อัปโหลดไฟล์5------------------------------------------ -->
<!-- <div class="form-group my-3"> -->
<div class="form-group col-md-6">
<label for="formFile" class="form-label"><i class="fas fa-upload"></i> ผลการเรียนภาคเรียนที่ผ่านมา</label>
<input class="form-control" type="file" name="uploadfile" id="imagegrade">
<!-- </div> -->
</div>
<!-- -------------------------------อัปโหลดไฟล์6------------------------------------------ -->
<!-- <div class="form-group my-3"> -->
<div class="form-group col-md-6">
<label for="formFile" class="form-label"><i class="fas fa-upload"></i> สมุดบัญชี ธนาคาร</label>
<input class="form-control" type="file" name="uploadfile" id="imagebank">
</div>
<!-- </div> -->
</div>
<div class="row my-3">
<!-- -------------------------------อัปโหลดไฟล์7------------------------------------------ -->
<!-- <div class="form-group my-3"> -->
<div class="form-group col-md-12">
<label for="formFile" class="form-label"><i class="fas fa-upload"></i> แบบขอรับทุนการศึกษา </label>
<input class="form-control" type="file" name="uploadfile" id="imagerecieve">
<!-- </div> -->
</div>
</div>
<!-- -------------------------------บันทึกข้อมูล------------------------------------------ -->
<div class="form-group text-center my-3">
<button type="submit" class="btn btn-primary btn-block" id="btn1"><i class="fas fa-cloud-upload-alt"></i> บันทึกข้อมูล</button>
</div>
<div class="form-group">
<button class="btn btn-primary" id="btn2" type="button" disabled style="display : none">
<span class="spinner-grow spinner-grow-sm" role="status" ></span>
กำลังอัปโหลด...
</button>
</div>
</form>
<!-- -------------------------------จบฟอร์ม------------------------------------------ -->
</div>
</div>
</div>
</div>
<div class="card-footer bg-info text-center text-white"><i class="fab fa-pagelines"></i>
ฉธบ. 28:13 ถ้าท่านเชื่อฟังพระบัญญัติของพระยาห์เวห์พระเจ้าของท่าน ซึ่งข้าพเจ้าบัญชาท่านในวันนี้ และระวังที่จะทำตาม พระยาห์เวห์จะทรงทำให้ท่านเป็นหัวไม่ใช่เป็นหาง ทำให้สูงขึ้นเท่านั้นไม่ใช่ให้ต่ำลง
</div>
</div>
<!-- -------------------------------JAVASCRIPT------------------------------------------ -->
<script>
let imagedata ={}
$('input[type="file"]').on('change',function(){
let files = []
for(var i=0; i<$(this)[0].files.length; i++){
files.push($(this)[0].files[i])
}
files.forEach((file,i)=>{
let reader = new FileReader()
reader.onloadend = (e)=>{
imagedata[$(this).attr('id')+(i+1)]={
data:e.target.result.split(',')[1],
name:file.name,
type:file.type
}
}
reader.readAsDataURL(file)
})
})
function submitForm(obj) {
event.preventDefault();
$('#btn1').hide()
$('#btn2').show()
var obj = {}
obj.data1 = $('#data1').val()
obj.data2 = $('#data2').val()
// thaiDate,
obj.data3 = $('#data3').val()
obj.data4 = $('#data4').val()
obj.data5 = $('#data5').val()
obj.data6 = $('#data6').val()
obj.data7 = $('input[name="data7"]:checked').val()// จัดการตัวเลือกแบบ radiobox,
// thaiDate,
obj.data8 = $('#data8').val()
obj.data9 = $('#data9').val()
obj.data10 = $('#data10').val()
obj.data11 = $('#data11').val()
obj.district = $('#district').val()
// obj.data12 = $('#data12').val()
obj.amphoe = $('#amphoe').val()
// obj.data13 = $('#data13').val()
obj.province = $('#province').val()
// obj.data14 = $('#data14').val()
obj.zipcode = $('#zipcode').val()
// obj.data15 = $('#data15').val()
// "'" + obj.data16 = $('#data16').val()
obj.data16 = $('#data16').val()
obj.data17 = $('#data17').val()
obj.data18 = $('#data18').val()
obj.data19 = $('#data19').val()
obj.colC = $('#colC').val()
// obj.data20 = $('#data20').val()
obj.colB = $('#colB').val()
// obj.data21 = $('#data21').val()
obj.colA = $('#colA').val()
// obj.data22 = $('#data22').val()
obj.data23 = $('#data23').val()
// "'" + obj.data24 = $('#data24').val()
obj.data24 = $('#data24').val()
obj.data25 = $('#data25').val()
obj.data26 = $('#data26').val()
obj.data27 = $('#data27').val()
obj.data28 = $('#data28').val()
obj.data29 = $('#data29').val()
obj.data30 = $('#data30').val()
obj.data31 = $('#data31').val()
obj.data32 = $('#data32').val()
obj.data33 = $('#data33').val()
obj.data34 = $('#data34').val()
obj.data35 = $('#data35').val()
obj.data36 = $('#data36').val()
obj.imagedata = imagedata
savedata(obj)
}
// เมื่อบันทึกไฟล์สำเร็จ
function savedata(obj){
google.script.run.withSuccessHandler(function (success) {
document.getElementById("myForm").reset()
$('#btn1').show()
$('#btn2').hide()
Swal.fire({
position: 'center',
icon: 'success',
title: 'บันทึกข้อมูลเรียบร้อย',
showConfirmButton: false,
timer: 1500
})
})
.saveData(obj);
}
</script>
<script src="//cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<!---form--->
</div>
<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)
var html = '<b>ที่อยู่:</b> ตำบล' + data.district + ' อำเภอ' + data.amphoe + ' จังหวัด' + data.province + ' ' + data.zipcode;
$('#demo2-output').html('')
},
onLoad: function () {
console.info('Autocomplete is ready!');
$('#loader, .demo').toggle();
}
});
</script>
<script>
$( document ).ready(function() {getData28();});
$( document ).ready(function() {getData34();});
$( document ).ready(function() {getData36();});
function getData28(){
google.script.run.withSuccessHandler(function(ar){
detial = [];
ar.forEach(function(item, index){
detial.push(item[0]);
});
$("#data28").autocomplete({
source: detial
});
}).getData28();
}
function getData34(){
google.script.run.withSuccessHandler(function(ar){
detial = [];
ar.forEach(function(item, index){
detial.push(item[0]);
});
$("#data34").autocomplete({
source: detial
});
}).getData34();
}
function getData36(){
google.script.run.withSuccessHandler(function(ar){
สมาชิกสมาคมฯโกเชน = [];
ar.forEach(function(item, index){
สมาชิกสมาคมฯโกเชน.push(item[0]);
});
$("#data36").autocomplete({
source: สมาชิกสมาคมฯโกเชน
});
}).getData36();
}
</script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/js/bootstrap.bundle.min.js
" integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous">
</script>
<?!= include('javaScript');?>
<script>
window.onload = function(){
google.script.run.withSuccessHandler(dropDownList).getData()
}
//ดรอปดาวน์
function dropDownList(data){
var colA = document.getElementById('colA')
var colB = document.getElementById('colB')
var colC = document.getElementById('colC')
for(var x in data){
colA.options[colA.options.length] = new Option(x,x)
}
colA.onchange = function(){
colB.length = 1
colC.length = 1
for(var y in data[this.value]){
colB.options[colB.options.length] = new Option(y,y)
}
}
colB.onchange = function(){
colC.length = 1
var z = data[colA.value][this.value]
for(var i = 0 ; i< z.length; i++){
colC.options[colC.options.length] = new Option(z[i],z[i])
}
}
}
function save(){
var obj={}
obj.colA = document.getElementById('colA').value
obj.colB = document.getElementById('colB').value
obj.colC = document.getElementById('colC').value
google.script.run.saveData(obj)
document.getElementById('colA').value = ""
document.getElementById('colB').value = ""
document.getElementById('colC').value = ""
}
</script>
<h5 style="text-align: center;"><b><a href="https://script.google.com/macros/s/AKfycbyMjy3MGmsFqLGGeZBhnE6O9FShM89YdOQqSyX2nob8mH732D7nfaOWxdPjMeK-EJIL/exec" rel="nofollow"> ลงทะเบียนผู้ขอรับทุนการศึกษาครบแล้ว ต้องการ Update ข้อมูลผู้ขอรับทุนการศึกษา ให้เรียบร้อยแล้วครับ</a><br /></b>
</body>
</html>
css.html
<style>
@import url('https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200;0,300;0,400;0,600;0,700;1,200;1,300&display=swap');
</style>
<style>
html,
body,
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: "Kanit", sans-serif;
}
.autocomplete {
position: relative;
}
#matchList {
position: absolute;
z-index: 99;
background-color: white;
left: 0;
right: 0;
/* vertical scroll bar */
max-height: 350px;
overflow-y: auto;
/* prevent horizontal scrollbar */
overflow-x: hidden;
}
#matchList:hover {
cursor: pointer;
}
li > span {
pointer-events: none;
}
</style>
javaScript.html
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/js/bootstrap.bundle.min.js
" integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous">
</script>
<script>
$(document).ready(function() {
var table = $('#example').DataTable( {
rowReorder: {
selector: 'td:nth-child(2)'
},
responsive: true
} );
} );
</script>
<script>
import DataTable from 'datatables.net-dt';
import 'datatables.net-responsive-dt';
let table = new DataTable('#myTable', {
responsive: true
});
</script>
<script>
bower install --save datatables.net
bower install --save datatables.net-dt
</script>
<!--
<script>
google.script.run.getSheetData();
</script>
<script>
google.script.run.generateAndEmailLetters();
</script>
<script>
google.script.run.withSuccessHandler(showData).getData();
function showData(dataArray){
$(document).ready(function(){
$('#data-table').DataTable({
data: dataArray,
columns: [
{"title":"ลำดับ"},
{"title":"ชื่อ-สกุล"},
{"title":"เลขที่สมาชิก"},
{"title":"อายุปัจจุบัน"},
{"title":"อายุ(เป็นสมาชิก)"},
{"title":"โทรศัพท์"},
{"title":"ที่อยู่"},
{"title":"กำหนดเรียกเก็บ"},
{"title":"บำรุงรายปี"},
{"title":"สงเคราะห์ล่วงหน้า"},
{"title":"ทุนการศึกษา"},
{"title":"รวม"},
{"title":"บาทไทย"},
{"title":"เงินคงเหลือ"},
{"title":"ศูนย์ประสานงาน"}
]
});
});
};
</script>
-->
ไม่มีความคิดเห็น:
แสดงความคิดเห็น
หมายเหตุ: มีเพียงสมาชิกของบล็อกนี้เท่านั้นที่สามารถแสดงความคิดเห็น