Skip to content

Instantly share code, notes, and snippets.

@neno-tech

neno-tech/code.gs

Last active February 5, 2022 16:28
Show Gist options
  • Save neno-tech/20ed5f07bac8151ef18139100d644e68 to your computer and use it in GitHub Desktop.
Save neno-tech/20ed5f07bac8151ef18139100d644e68 to your computer and use it in GitHub Desktop.
Download ZIP
ฟอร์มเว็บแอปแบบเขียนโค้ดสั้นสุดๆ โดยใช้การเช็คค่ากับ Header
Raw
code.gs
function doGet() {
return HtmlService.createTemplateFromFile('55')
.evaluate()
.addMetaTag('viewport', 'width=device-width, initial-scale=1')
.setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL)
}
function saveData(obj) {
let ss = SpreadsheetApp.getActive().getSheets()[0]
let header = ss.getRange(1, 1, 1, ss.getLastColumn()).getValues()[0]
let newrow = []
Object.keys(obj).forEach(key => {
newrow[header.indexOf(key)] = obj[key]
})
SpreadsheetApp.getActive().getSheets()[0].appendRow(newrow);
return true
}
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/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>
</head>
<body>
<div class="card">
<div class="card-body">
<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="first_name"><i class="fas fa-user"></i> ชื่อ</label>
<input type="text" class="form-control" id="first_name" name="first_name" 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="last_name" name="last_name" 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="sex" id="male" 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="sex" id="female" 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="dateOfBirth" name="dateOfBirth" required>
</div>
</div>
<!-- -------------------------------อีเมล + เบอร์โทร------------------------------------------ -->
<div class="row my-3">
<div class="form-group col-md-6">
<label for="email"><i class="fas fa-envelope"></i> อีเมล</label>
<input type="email" class="form-control" id="email" name="email" placeholder="อีเมล" required>
</div>
<div class="form-group col-md-6">
<label for="phone"><i class="fas fa-mobile-alt"></i> เบอร์โทร</label>
<input type="tel" class="form-control" id="phone" name="phone" 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="inputBlood" name="inputBlood" class="form-control" required>
<option selected disabled value="">เลือก..</option>
<option value="A">A</option>
<option value="B">B</option>
<option value="AB">AB</option>
<option value="O">O</option>
</select>
</div>
<div class="form-group col-md-6">
<label for="education"><i class="fas fa-user-graduate"></i> ระดับการศึกษา</label>
<select id="education" name="education" 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="3" id="address" name="address" placeholder="ที่อยู่" required></textarea>
</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>
<!-- -------------------------------JAVASCRIPT------------------------------------------ -->
<script>
function submitForm(obj) {
event.preventDefault();
$('#btn1').hide()
$('#btn2').show()
var obj = {}
let formdata = $('#myForm').serializeArray()
formdata.forEach(el => obj[el.name] = el.value)
console.log(obj)
savedata(obj)
}
// เมื่อบันทึกไฟล์สำเร็จ
function savedata(obj){
google.script.run.withSuccessHandler(function (success) {
document.getElementById("myForm").reset()
// imagedata = {}
$('#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>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment