Skip to content

Instantly share code, notes, and snippets.

@neno-tech

neno-tech/code.gs

Last active December 12, 2023 18:09
Show Gist options
  • Star 5 You must be signed in to star a gist
  • Fork 7 You must be signed in to fork a gist
  • Save neno-tech/bcd8e4a8e4c2771662c9800a0e8656fe to your computer and use it in GitHub Desktop.
Save neno-tech/bcd8e4a8e4c2771662c9800a0e8656fe to your computer and use it in GitHub Desktop.
Download ZIP
เรียนรู้เว็บแอปบันทึกข้อมูลลงชีตทีละส่วน
Raw
code.gs
function doGet() {
return HtmlService.createTemplateFromFile('index').evaluate()
.addMetaTag('viewport', 'width=device-width, initial-scale=1')
.setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL)
}
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css"
integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-6">
<br>
<form id="myForm" onsubmit="handleFormSubmit(this)">
<div class="form-row">
<div class="form-group col-md-6">
<label for="first_name">ชื่อ</label>
<input type="text" class="form-control" id="first_name" name="first_name" placeholder="ชื่อ">
</div>
<div class="form-group col-md-6">
<label for="last_name">สกุล</label>
<input type="text" class="form-control" id="last_name" name="last_name" placeholder="สกุล">
</div>
</div>
<div class="form-row">
<div class="form-group col-md-6">
<p>เพศ</p>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="gender" id="male" value="ชาย">
<label class="form-check-label" for="male">ชาย</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="gender" id="female" value="หญิง">
<label class="form-check-label" for="female">หญิง</label>
</div>
</div>
<div class="form-group col-md-6">
<label for="dateOfBirth">วันเกิด</label>
<input type="date" class="form-control" id="dateOfBirth" name="dateOfBirth">
</div>
</div>
<div class="form-group">
<label for="email">อีเมล</label>
<input type="email" class="form-control" id="email" name="email" placeholder="อีเมล">
</div>
<div class="form-group">
<label for="phone">เบอร์โทร</label>
<input type="tel" class="form-control" id="phone" name="phone" placeholder="เบอร์โทร">
</div>
<button type="submit" class="btn btn-primary btn-block">บันทึก</button>
</form>
<div id="output"></div>
</div>
</div>
</body>
</html>
Raw
options
-----row center--------------
<div class="row justify-content-md-center">
-----bootstrap card--------------
<div class="card border-primary mb-6 " style="max-width:48rem;">
<div class="card-header text-white bg-primary">
ฟอร์มบันทึกข้อมูล
</div>
<div class="card-body">
</div>
-----google font--------------
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Prompt:wght@400&display=swap" rel="stylesheet">
<style>
body {
font-family: 'Prompt', sans-serif;
}
</style>
-----font awesome--------------
<script src="https://kit.fontawesome.com/6a972cf3a7.js" crossorigin="anonymous"></script>
<i class="fas fa-address-card"></i>
-----sweet alert--------------
<script src="//cdn.jsdelivr.net/npm/sweetalert2@11"></script>
Swal.fire({
position: 'center',
icon: 'success',
title: 'บันทึกเรียบร้อย',
showConfirmButton: false,
timer: 1500
})
Raw
่javascript
-----code.gs---------
function processForm(formObject){
var ss= SpreadsheetApp.openById('xxx');
var ws=ss.getSheets()[0]
ws.appendRow([
new Date(),
formObject.first_name,
formObject.last_name,
formObject.gender,
formObject.dateOfBirth,
formObject.email,
formObject.phone
]);
}
------- index.html------
<script>
function preventFormSubmit(){
var forms=document.querySelectorAll('form');
for (var i=0;i<forms.length;i++){
forms[i].addEventListener('submit',function(event){
event.preventDefault();
});
}
}
window.addEventListener('load',preventFormSubmit);
function handleFormSubmit(formObject){
google.script.run.processForm(formObject);
document.getElementById("myForm").reset();
}
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment