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);
}
var folder = DriveApp.getFolderById('1N2QhF2K1py64d5UZ0Sz95yIXwsELYJNggEwv6GwX_22E1Ilehk5rpgZz0q_GKtRqDPZnDSCj') //ChangeIdFolder
function saveData(obj){
if(obj.myFile.length > 0){
var file = folder.createFile(obj.myFile).getUrl()
}
// let Id = "1kCJx4R7qoVga-jAlLSSzfumeZZ2cxIp59xPBeLzv4Ow"; //แก้ 1
// let ss=SpreadsheetApp.openById(Id);
// let sheet = ss.getSheetByName("ชีต1");
// sheet.appendRow([
// new Date(),
// obj.firstname,
// obj.position,
// obj.cert,
// file
// ])
let ss = SpreadsheetApp.getActiveSpreadsheet().getSheetByName('ชีต1')
ss.appendRow([
new Date(),
obj.firstname,
obj.position,
obj.cert,
file
])
}
function include(filename) {
return HtmlService.createHtmlOutputFromFile(filename)
.getContent();
}
******************
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<base target="_top">
<script src="https://cdn.datatables.net/1.13.4/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/rowreorder/1.3.3/js/dataTables.rowReorder.min.js"></script>
<script src="https://cdn.datatables.net/responsive/2.4.1/js/dataTables.responsive.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.13.4/css/jquery.dataTables.min.css" />
<link rel="stylesheet" href="https://cdn.datatables.net/rowreorder/1.3.3/css/rowReorder.dataTables.min.css" />
<link rel="stylesheet" href="https://cdn.datatables.net/responsive/2.4.1/css/responsive.dataTables.min.css" />
<script src="https://code.jquery.com/jquery-3.6.4.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" />
<style>
@import url('https://fonts.googleapis.com/css2?family=Kanit&display=swap');
body {
font-family: 'Kanit', sans-serif;
font-size: .875rem;
}
</style>
<?!= include('css');?>
</head>
<body>
<div class="container">
<div class="col-md-6 mx-auto">
<form id="myForm" onsubmit="submitForm(this)">
<div class="col-md-12 text-center">
<h5 class="mb-2 p-2 bg-primary text-white"><i class="fa-solid fa-align-justify"></i> ฟอร์มบันทึกข้อมูลลงทะเบียนสมาชิก สมาคมฌาปนกิจสงเคราะห์ โกเชน </h5>
</div>
<div class="row">
<div class="col-md-6 mb-2">
<label><i class="fa-solid fa-caret-right"></i> ชื่อ สกุล</label>
<input type="text" class="form-control" name="firstname" placeholder="กรุณาพิมพ์ชื่อ สกุล" required >
</div>
<div class="col-md-6 mb-2">
<label><i class="fa-solid fa-caret-right"></i> ตำแหน่ง</label>
<select class="form-control" name="position" required>
<option disabled selected value="">เลือกตำแหน่ง</option>
<option>ผู้อำนวยการ</option>
<option>ครู</option>
<option>พนักงานราชการ</option>
<option>ครูอัตราจ้าง</option>
</select>
</div>
<div class="col-md-6 mb-2">
<label><i class="fa-solid fa-caret-right"></i> ท่านเคยผ่านการอบรมหรือไม่</label>
<select class="form-control" id="cert" name="cert" required onchange="attcert(value)">
<option disabled selected value="">เลือก</option>
<option>ผ่าน</option>
<option>ไม่ผ่าน</option>
</select>
</div>
<div class="col-md-6 mb-2" id="pcert" style="display:none">
<label><i class="fa-solid fa-caret-right"></i> ไฟล์เกียรติบัตร</label>
<input type="file" class="form-control" id="myFile" name="myFile">
</div>
</div>
<div class="col-md-12 mt-2">
<button type="submit" class="btn btn-primary w-100" id="btn1" ><i class="fa-solid fa-floppy-disk"></i> บันทึกข้อมูล</button>
</div>
</form>
</div>
</div>
<script>
function attcert(value){
if(value == "ผ่าน"){
$('#pcert').show();
}else{
$('#pcert').hide();
}
}
function submitForm(obj){
event.preventDefault()
let cert = $('#cert').val()
let file = $('#myFile').val()
if(cert == "ผ่าน"){
if(file == ""){
Swal.fire({
position: 'top',
icon: 'error',
title: 'กรุณาแนบไฟล์เกียรติบัตร',
showConfirmButton: false,
timer: 1500
})
}else if(file!=""){
saveData(obj)
}
}
else{
saveData(obj)
}
}
function saveData(obj){
$('#btn1').html('<i>Loading...</i>')
$('#btn1').attr("disabled", true);
google.script.run.withSuccessHandler(()=>{
$('#myForm')[0].reset()
$('#btn1').html('บันทึกข้อมูล')
$('#btn1').attr("disabled", false);
Swal.fire({
position: 'top',
icon: 'success',
title: 'บันทึกข้อมูลเรียบร้อย',
showConfirmButton: false,
timer: 1500
})
}).saveData(obj)
}
</script>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></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>
ไม่มีความคิดเห็น:
แสดงความคิดเห็น
หมายเหตุ: มีเพียงสมาชิกของบล็อกนี้เท่านั้นที่สามารถแสดงความคิดเห็น