code.gs
function doGet() {
var htmlOutput = HtmlService.createTemplateFromFile('index');
const userEmail = Session.getActiveUser().getEmail();
htmlOutput.email = userEmail;
return htmlOutput.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);
// return HtmlService.createTemplateFromFile('index').evaluate()
}
function include(filename) {
return HtmlService.createHtmlOutputFromFile(filename).getContent();
}
function getData() {
const userEmail = Session.getActiveUser().getEmail();
var sourceSheetName = "vilpost"; // Replace with the name of the source sheet
var sourceSheet = SpreadsheetApp.openById("1gvaLOLOTUYZBjmWHoCVb5Kh0QkVRPu7aqBzrDdU-p0Q").getSheetByName(sourceSheetName);
var obj = sourceSheet.getDataRange().getDisplayValues().slice(1)
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) {
const userEmail = Session.getActiveUser().getEmail();
var ss = SpreadsheetApp.openById('1i4gMx9o4N5JSyfFsbJaP1MrQ0sGhR0AMCiNbYRiD3ME');
var sheet = ss.getSheetByName('Data');
var lastRow = sheet.getLastRow();
var folder = DriveApp.getFolderById("1JFbLbeVYFkbojcy0tJ1SeLg1EXgh8a_r"); //แก้เป็นไอดีโฟลเดอร์ของเรา
var file, file2 = ''
var rowData = [
// new Date(),
lastRow,
obj.data1,
obj.data2,
obj.data3,
obj.data4,
obj.data5,
obj.data6,
obj.data7,
obj.data8,
obj.data9,
obj.data10,
obj.data11,
obj.data12,
obj.data13,
obj.province,
// obj.data14,
obj.amphoe,
// obj.data13,
obj.district,
obj.colB,
obj.colC,
obj.data19,
obj.zipcode,
obj.data21,
obj.data22,
obj.data23,
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,
obj.data37,
obj.colA,
userEmail
];
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.openById("1i4gMx9o4N5JSyfFsbJaP1MrQ0sGhR0AMCiNbYRiD3ME").getSheets()[0].appendRow(rowData);
return true
}
var ss= SpreadsheetApp.openById("1i4gMx9o4N5JSyfFsbJaP1MrQ0sGhR0AMCiNbYRiD3ME");
function getData12(){
var detial = ss.getSheets()[1].getRange('N2:N').getValues()
return detial;
}
function getData2(){
var detial = ss.getSheets()[1].getRange('J2:J').getValues()
return detial;
}
function getData13(){
var detial =ss.getSheets()[1].getRange("P2:P").getValues()
return detial;
}
function getData25(){
var detial = ss.getSheets()[1].getRange('AG2:AG').getValues()
return detial;
}
function getData26(){
var detial = ss.getSheets()[1].getRange('AG2:AG').getValues()
return detial;
}
function getData27(){
var detial = ss.getSheets()[1].getRange('AG2:AG').getValues()
return detial;
}
function getData29(){
var detial = ss.getSheets()[1].getRange('AG2:AG').getValues()
return detial;
}
function getData31(){
var detial = ss.getSheets()[1].getRange('AG2:AG').getValues()
return detial;
}
function getData32(){
var detial = ss.getSheets()[1].getRange('AC2:AC').getValues()
return detial;
}
function getData33(){
var detial = ss.getSheets()[1].getRange('Y2:Y').getValues()
return detial;
}
function getData34(){
var detial = ss.getSheets()[1].getRange('Z2:Z').getValues()
return detial;
}
function getData35(){
var detial = ss.getSheets()[1].getRange('AC2:AC').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')?>
<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>
<span>Logged In: <?= email ?></span>
<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="last_name"><i class="fas fa-user-plus"></i> เลขประจำตัวประชาชน</label>
<input type="text" class="form-control" id="data1" placeholder="เลขประจำตัวประชาชน" >
</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="data2" 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="data3" 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="data4" 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="data5" 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="data5" 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="data6" >
</div>
</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="data7" placeholder="ชื่อเล่น." >
</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" >
</div>
</div>
<div class="row my-3">
<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="data9" >
</div>
<div class="form-group col-md-6">
<label for="education"><i class="fas fa-user-graduate"></i> สถานภาพสมรส </label>
<select id="data10" 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="education"><i class="fas fa-user-graduate"></i> ระดับศึกษา </label>
<select id="data11" 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>
<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="last_name"><i class="fas fa-book-reader"></i> อาชีพ</label>
<input type="text" class="form-control" id="data12" placeholder="เลือกอาชีพ" >
</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="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="district" placeholder="ตำบล" required>
<!-- <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="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="data15" 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="data20" placeholder="รหัสไปรษณีย์ " required> -->
</div>
<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>
<div class="row my-3">
<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 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>
<div class="row my-3">
<div class="form-group col-md-4">
<label for="last_name"><i class="fas fa-user-plus"></i> บ้านเลขที่ </label>
<input type="text" class="form-control" id="data19" placeholder="บ้านเลขที่ " required>
</div>
<div class="form-group col-md-4">
<label for="phone"><i class="fas fa-mobile-alt"></i> เบอร์โทรศัพท์1</label>
<input type="text" class="form-control" id="data21" placeholder="เบอร์โทรศัพท์1" required>
</div>
<div class="form-group col-md-4">
<label for="phone"><i class="fas fa-mobile-alt"></i> เบอร์โทรศัพท์2</label>
<input type="text" class="form-control" id="data22" placeholder="เบอร์โทรศัพท์2">
</div>
</div>
<div class="row">
<label for="workplace"><i class="fas fa-address-card"></i> สถานที่ทำงาน....</label>
<textarea class="form-control" rows="3" id="data23" placeholder="ชื่อสถานที่ทำงาน....หมู่ที่...ตำบล...อำเภอ....จังหวัด..."></textarea>
</div>
<div class="row">
<div class="form-group col-md-6">
<label for="last_name"><i class="fas fa-book-reader"></i> EmailAddress....</label>
<input type="email" class="form-control" id="data24" placeholder="EmailAddress....">
</div>
<div class="form-group col-md-6">
<label for="last_name"><i class="fas fa-book-reader"></i> รับใช้พระเจ้าด้านที่ 1 </label>
<input type="text" class="form-control" id="data25" placeholder="รับใช้พระเจ้าด้านที่ 1." required>
</div>
</div>
<div class="row">
<div class="form-group col-md-6">
<label for="last_name"><i class="fas fa-book-reader"></i> รับใช้พระเจ้าด้านที่ 2 </label>
<input type="text" class="form-control" id="data26" placeholder="รับใช้พระเจ้าด้านที่ 2." >
</div>
<div class="form-group col-md-6">
<label for="last_name"><i class="fas fa-book-reader"></i> รับใช้พระเจ้าด้านที่ 3 </label>
<input type="text" class="form-control" id="data27" placeholder="รับใช้พระเจ้าด้านที่ 3." >
</div>
</div>
<div class="row my-3">
<div class="form-group col-md-6">
<label for="last_name"><i class="fas fa-book-reader"></i> รับใช้พระเจ้าด้านที่ 4 </label>
<input type="text" class="form-control" id="data28" placeholder="รับใช้พระเจ้าด้านที่ 4." >
</div>
<div class="form-group col-md-6">
<label for="last_name"><i class="fas fa-book-reader"></i> รับใช้พระเจ้าด้านที่ 5 </label>
<input type="text" class="form-control" id="data29" placeholder="รับใช้พระเจ้าด้านที่ 5." >
</div>
</div>
<div class="row my-3">
<div class="form-group col-md-6">
<label for="last_name"><i class="fas fa-book-reader"></i> รับใช้พระเจ้าด้านที่ 6 </label>
<input type="text" class="form-control" id="data30" placeholder="รับใช้พระเจ้าด้านที่ 6." >
</div>
<div class="form-group col-md-6">
<label for="last_name"><i class="fas fa-book-reader"></i> รับใช้พระเจ้าด้านที่ 7 </label>
<input type="text" class="form-control" id="data31" placeholder="รับใช้พระเจ้าด้านที่ 7." >
</div>
</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="data32" 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="data33" placeholder="รหัสเซลล์." >
</div>
</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="พี่เลี้ยง." >
</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="data37" class="form-control">
<option selected disabled 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="data36" 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="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="imagebank">
</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>
ขอพระพักตร์พระองค์ทอแสงเหนือข้าพระองค์ทั้งหลาย ขอทรงช่วยข้าพระองค์ให้รอดด้วยความรักมั่นคงของพระองค์ พระเจ้าอวยพระพร นะครับ
</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 = $('input[name="data5"]:checked').val()// จัดการตัวเลือกแบบ radiobox,
obj.data6 = $('#data6').val()
obj.data7 = $('#data7').val()
// thaiDate,
obj.data8 = $('#data8').val()
obj.data9 = $('#data9').val()
obj.data10 = $('#data10').val()
obj.data11 = $('#data11').val()
obj.data12 = $('#data12').val()
obj.data13 = $('#data13').val()
obj.province = $('#province').val()
obj.amphoe = $('#amphoe').val()
obj.district = $('#district').val()
obj.colB = $('#colB').val()
obj.colC = $('#colC').val()
// obj.data16 = $('#data16').val()
obj.data19 = $('#data19').val()
obj.zipcode = $('#zipcode').val()
obj.data21 = $('#data21').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.data37 = $('#data37').val()
// obj.data38 = $('#data38').val()
obj.colA = $('#colA').val()
obj.userEmail = $('#userEmail').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() {getData2();});
$( document ).ready(function() {getData12();});
$( document ).ready(function() {getData13();});
$( document ).ready(function() {getData25();});
$( document ).ready(function() {getData26();});
$( document ).ready(function() {getData27();});
$( document ).ready(function() {getData28();});
$( document ).ready(function() {getData29();});
$( document ).ready(function() {getData30();});
$( document ).ready(function() {getData31();});
$( document ).ready(function() {getData32();});
$( document ).ready(function() {getData33();});
$( document ).ready(function() {getData34();});
$( document ).ready(function() {getData35();});
function getData2(){
google.script.run.withSuccessHandler(function(ar){
detial = [];
ar.forEach(function(item, index){
detial.push(item[0]);
});
$("#data2").autocomplete({
source: detial
});
}).getData2();
}
function getData12(){
google.script.run.withSuccessHandler(function(ar){
detial = [];
ar.forEach(function(item, index){
detial.push(item[0]);
});
$("#data12").autocomplete({
source: detial
});
}).getData12();
}
function getData13(){
google.script.run.withSuccessHandler(function(ar){
detial = [];
ar.forEach(function(item, index){
detial.push(item[0]);
});
$("#data13").autocomplete({
source: detial
});
}).getData13();
}
function getData25(){
google.script.run.withSuccessHandler(function(ar){
detial = [];
ar.forEach(function(item, index){
detial.push(item[0]);
});
$("#data25").autocomplete({
source: detial
});
}).getData25();
}
function getData26(){
google.script.run.withSuccessHandler(function(ar){
detial = [];
ar.forEach(function(item, index){
detial.push(item[0]);
});
$("#data26").autocomplete({
source: detial
});
}).getData26();
}
function getData27(){
google.script.run.withSuccessHandler(function(ar){
detial = [];
ar.forEach(function(item, index){
detial.push(item[0]);
});
$("#data27").autocomplete({
source: detial
});
}).getData27();
}
function getData28(){
google.script.run.withSuccessHandler(function(ar){
detial = [];
ar.forEach(function(item, index){
detial.push(item[0]);
});
$("#data28").autocomplete({
source: detial
});
}).getData28();
}
function getData29(){
google.script.run.withSuccessHandler(function(ar){
detial = [];
ar.forEach(function(item, index){
detial.push(item[0]);
});
$("#data29").autocomplete({
source: detial
});
}).getData29();
}
function getData30(){
google.script.run.withSuccessHandler(function(ar){
detial = [];
ar.forEach(function(item, index){
detial.push(item[0]);
});
$("#data30").autocomplete({
source: detial
});
}).getData30();
}
function getData31(){
google.script.run.withSuccessHandler(function(ar){
detial = [];
ar.forEach(function(item, index){
detial.push(item[0]);
});
$("#data31").autocomplete({
source: detial
});
}).getData31();
}
function getData32(){
google.script.run.withSuccessHandler(function(ar){
detial = [];
ar.forEach(function(item, index){
detial.push(item[0]);
});
$("#data32").autocomplete({
source: detial
});
}).getData32();
}
function getData33(){
google.script.run.withSuccessHandler(function(ar){
detial = [];
ar.forEach(function(item, index){
detial.push(item[0]);
});
$("#data33").autocomplete({
source: detial
});
}).getData33();
}
function getData34(){
google.script.run.withSuccessHandler(function(ar){
detial = [];
ar.forEach(function(item, index){
detial.push(item[0]);
});
$("#data34").autocomplete({
source: detial
});
}).getData34();
}
function getData35(){
google.script.run.withSuccessHandler(function(ar){
detial = [];
ar.forEach(function(item, index){
detial.push(item[0]);
});
$("#data35").autocomplete({
source: detial
});
}).getData35();
}
</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>
</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.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>
ไม่มีความคิดเห็น:
แสดงความคิดเห็น
หมายเหตุ: มีเพียงสมาชิกของบล็อกนี้เท่านั้นที่สามารถแสดงความคิดเห็น