Code.gs
function doGet() {
return HtmlService.createTemplateFromFile('index').evaluate()
.setTitle("แบบฟอร์มบันทึกข้อมูล")
.addMetaTag('viewport','width=device-width , initial-scale=1')
.setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL)
}
function include(filename) {
return HtmlService.createHtmlOutputFromFile(filename)
.getContent();
}
var ss = SpreadsheetApp.getActive().getSheets()[0]
var data = ss.getDataRange().getValues()
function processForm(formObject) {
var output = {}
ss.appendRow( [formObject.name,
"'"+formObject.school,
"'"+formObject.tel,
"'"+formObject.email,
"'"+formObject.note,
new Date()
])
data = ss.getRange(ss.getLastRow(),1,1,ss.getLastColumn()).getDisplayValues()[0]
output.data = data
return output
}
index.html
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>แบบฟอร์มบันทึกข้อมูล</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<link href='https://fonts.googleapis.com/css?family=Kanit' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"/>
<script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>
<style>
body {
font-family: "Kanit", sans-serif;
font-size:.875rem;
}
a {
color: #000;
text-decoration: none;
}
</style>
</head>
<body>
<div class="container mt-2" id="p1">
<div class="col-md-6 mx-auto">
<nav class="navbar navbar-expand-lg navbar-dark bg-success">
<div class="container">
<h6 class="text-white mt-2"><i class="fas fa-address-book"></i> แบบฟอร์มบันทึกข้อมูล</h6>
</div>
</nav>
</div>
<form id="myForm" onsubmit="handleFormSubmit(this)">
<div class="col-md-6 mx-auto">
<div class="row">
<div class="col-md-6 col-6 mb-2">
<label style="font-size:13px" class="form-label"><i class="fa-solid fa-circle-user"></i> ชื่อ สกุล</label>
<input type="text" class="form-control" id="name" name="name" required>
</div>
<div class="col-md-6 col-6 mb-2">
<label style="font-size:13px" class="form-label"><i class="fa-solid fa-chalkboard-user"></i> โรงเรียน</label>
<input type="tel" class="form-control" id="school" name="school" required>
</div>
</div>
<div class="row">
<div class="col-md-6 col-6 mb-2">
<label style="font-size:13px" class="form-label"><i class="fa-solid fa-mobile-screen"></i> เบอร์โทร</label>
<input type="tel" class="form-control" id="tel" name="tel" minlength="10" maxlength="10" pattern="[0]{1}[0-9]{9}">
</div>
<div class="col-md-6 col-6 mb-2">
<label style="font-size:13px" class="form-label"><i class="fa-solid fa-envelope"></i> อีเมล์</label>
<input type="email" class="form-control" id="email" name="email" required>
</div>
</div>
<div class="col-md-12">
<label style="font-size:13px" class="form-label"><i class="fa-solid fa-book-open"></i> หมายเหตุ(ถ้ามี)</label>
<textarea type= "text" class="form-control" id="note" name="note" rows="3" ></textarea>
</div>
<button type="submit" id="btn1" class="btn bg-success btn-block text-white my-3 col-md-12 col-12"><i class="fas fa-paper-plane"></i> บันทึกข้อมูล</button>
<button id="btn2" class="btn btn-success btn-block text-white my-3 col-md-12 col-12 " type="button" disabled style="display:none">
<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
รอสักครู่...
</button>
</div>
</form>
</div>
<div class="col-md-6 col-6 mx-auto" id="p2" style="display:none">
<table id="tb" class="mt-2 table table-striped table-bordered" style="width:100%"></table>
<center><button type="submit" class="btn bg-success text-white" onclick="goback()"><i class="fa-solid fa-arrow-rotate-right"></i> กลับหน้าหลัก</button></center>
</div>
<footer class="text-muted text-center fixed-bottom">
<div class="container">
<p>Credit Examblog © 2022 <a href="https://examblog64.blogspot.com" target="_blank">ติดต่อผู้พัฒนา</a></p>
</div>
</footer>
<?!= include('js'); ?>
<script src="//cdn.jsdelivr.net/npm/sweetalert2@11"></script>
</body>
</html>
js
<script>
function preventFormSubmit() {
var forms = document.querySelectorAll('form');
for (var i = 0; i < forms.length; i++) {
forms[i].addEventListener('submit', function(event) {
event.preventDefault();
$('#btn1').hide()
$('#btn2').show()
});
}
}
window.addEventListener('load', preventFormSubmit);
function handleFormSubmit(formObject) {
google.script.run.withSuccessHandler(success).processForm(formObject);
}
function success(output){
document.getElementById("myForm").reset();
$('#btn2').hide()
$('#btn1').show()
Swal.fire({
position: 'top',
html: "<table style='text-align: left;font-size:.875rem;' class='table table-striped table-bordered'>" +
'<thead class="bg-success text-white">'+
'<tr>'+
'<th colspan="2" style="text-align: center;">รายละเอียด</th>'+
'</tr>'+
'</thead>'+
'<tbody>'+
'<tr>'+
'<th>ชื่อ สกุล</th>'+
'<td>'+output.data[0]+'</td>'+
'</tr>'+
'<tr>'+
'<th>โรงเรียน</th>'+
'<td>'+output.data[1]+'</td>'+
'</tr>'+
'<tr>'+
'<th>เบอร์โทร</th>'+
'<td>'+output.data[2]+'</td>'+
'</tr>'+
'<tr>'+
'<th>อีเมล์</th>'+
'<td>'+output.data[3]+'</td>'+
'</tr>'+
'<tr>'+
'<th>วันที่</th>'+
'<td>'+output.data[5]+'</td>'+
'</tr>'+
'</tbody>'+
'</table>',
allowOutsideClick: false,
confirmButtonColor: '#000',
confirmButtonText: 'ตกลง',
showClass: {
popup: 'animate__animated animate__fadeInDown'},
hideClass: {
popup: 'animate__animated animate__fadeOutUp'},
})
}
</script>
js2
<script>
function preventFormSubmit() {
var forms = document.querySelectorAll('form');
for (var i = 0; i < forms.length; i++) {
forms[i].addEventListener('submit', function(event) {
event.preventDefault();
$('#btn1').hide()
$('#btn2').show()
});
}
}
window.addEventListener('load', preventFormSubmit);
function handleFormSubmit(formObject) {
google.script.run.withSuccessHandler(success).processForm(formObject);
}
function success(output){
document.getElementById("myForm").reset();
$('#btn2').hide()
$('#btn1').show()
$('#p1').hide()
$('#p2').show()
Swal.fire({
position: 'top',
icon: 'success',
title: 'บันทึกข้อมูลเรียบร้อย',
showClass: {
popup: 'animate__animated animate__fadeInDown'},
hideClass: {
popup: 'animate__animated animate__fadeOutUp'},
showConfirmButton: false,
timer: 1500
})
var div = document.createElement('div')
div.setAttribute('id','tb')
document.body.appendChild(div)
document.getElementById('tb').innerHTML = "<table> "+
'<thead class="bg-success text-white">'+
'<tr>'+
'<th colspan="2" style="text-align: center;">รายละเอียด</th>'+
'</tr>'+
'</thead>'+
'<tr>'+
'<th>ชื่อ สกุล</th>'+
'<td>'+output.data[0]+'</td>'+
'</tr>'+
'<tr>'+
'<th>โรงเรียน</th>'+
'<td>'+output.data[1]+'</td>'+
'</tr>'+
'<tr>'+
'<th>เบอร์โทร</th>'+
'<td>'+output.data[2]+'</td>'+
'</tr>'+
'<tr>'+
'<th>อีเมล์</th>'+
'<td>'+output.data[3]+'</td>'+
'</tr>'+
'<tr>'+
'<th>วันที่</th>'+
'<td>'+output.data[5]+'</td>'+
'</tr>'
}
function goback(){
$('#p2').hide()
$('#p1').show()
}
</script>
