Skip to content

Instantly share code, notes, and snippets.

@apivat60

apivat60/code.gs

Last active April 6, 2021 17:31
Show Gist options
  • Save apivat60/84709123116215f366f8135cddf5f011 to your computer and use it in GitHub Desktop.
Save apivat60/84709123116215f366f8135cddf5f011 to your computer and use it in GitHub Desktop.
Download ZIP
code.gs
Raw
code.gs
var SCRIPT_PROP = PropertiesService.getScriptProperties();
function setup() {
var doc = SpreadsheetApp.getActiveSpreadsheet();
SCRIPT_PROP.setProperty("//ใส ID ของชีต", doc.getId());
}
function doGet(e) {
return HtmlService.createHtmlOutputFromFile('form.html').setTitle("ฟอร์มรับสมัครนักเรียน");
}
function uploadFileToGoogleDrive(data, file, name, nickname, email, tel, gender,age,blood) {
try {
var folder=DriveApp.getFolderById('// ใส่ ID folder ที่ใช้เก็บรูป');
var contentType = data.substring(5,data.indexOf(';')),
bytes = Utilities.base64Decode(data.substr(data.indexOf('base64,')+7)),
blob = Utilities.newBlob(bytes, contentType, file),
file = folder.createFolder([name]).createFile(blob),
filelink=file.getUrl(),
filelid =file.getId() ;
var lock = LockService.getPublicLock();
lock.waitLock(30000);
var doc = SpreadsheetApp.openById("//ใส ID ของชีต");
var sheet = doc.getSheetByName("แผ่น1");
var headRow = 1;
var headers = sheet.getRange(1, 1, 1, sheet.getLastColumn()).getValues()[0];
var nextRow = sheet.getLastRow()+1;
var row = [];
for (i in headers){
if (headers[i] == "วันที่สมัคร"){
row.push(new Date());
} else if (headers[i] == "ชื่อ สกุล"){
row.push(name);
} else if (headers[i] == "ชื่อเล่น"){
row.push(nickname);
} else if (headers[i] == "อีเมล"){
row.push(email);
} else if (headers[i] == "เบอร์โทร"){
row.push(tel);
} else if (headers[i] == "เพศ"){
row.push(gender);
} else if (headers[i] == "อายุ"){
row.push(age);
} else if (headers[i] == "กรุ๊ปเลือด"){
row.push(blood);
} else if (headers[i] == "รูปภาพ"){
row.push(filelink);
} else if (headers[i] == "idรูปภาพ"){
row.push(filelid);
}
}
sheet.getRange(nextRow, 1, 1, row.length).setValues([row]);
return "OK";
} catch (f) {
return f.toString();
} finally {
lock.releaseLock();
}
}
Raw
form.html
<!DOCTYPE html>
<html>
<head>
<base target="_blank">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>ฟอร์มรับสมัครนักเรียน</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/css/materialize.min.css">
<style>
.disclaimer{width: 480px; color:#646464;margin:20px auto;padding:0 16px;text-align:center;font:400 12px Roboto,Helvetica,Arial,sans-serif}.disclaimer a{color:#009688}#credit{display:none}
</style>
</head>
<body>
<form class="main" id="form" novalidate="novalidate" style="max-width: 480px;margin: 40px auto;">
<img src="ใส่ URL ของรูปหัวเว็บ" width="100%"class="img-fluid" alt="Responsive image">
<div id="forminner">
<div class="row">
<div class="col s12">
<h5 class="center-align teal-text">ฟอร์มรับสมัครนักเรียน 2563</h5><br>
<h6 class="center-align teal-text">โรงเรียนอภิวัฒน์สอนสร้างสื่อวิทยาคม</h6>
<p class="disclaimer">**กรุณากรอกข้อมูลให้ถูกต้องตามจริงและครบถ้วนสมบูรณ์**</p>
</div>
</div>
<!--ชื่อ สกุล + ชื่อเล่น-->
<div class="row">
<div class="input-field col s8">
<input id="name" type="text" name="Name" class="validate" required="" aria-required="true">
<label for="name">ชื่อ สกุล</label>
</div>
<div class="input-field col s4">
<input id="nickname" type="text" name="Nickname" class="validate" required="" aria-required="true">
<label for="nickname">ชื่อเล่น</label>
</div>
</div>
<!--อีเมล + เบอร์โทร-->
<div class="row">
<div class="input-field col s6">
<input id="email" type="email" name="Email" class="validate" required="" aria-required="true">
<label for="email">อีเมล</label>
</div>
<div class="input-field col s6">
<input id="tel" type="tel" name="Tel" class="validate" required="" aria-required="true">
<label for="tel">เบอร์โทร</label>
</div>
</div>
<!--เพศ-->
<div class="form-row">
<div class="form-group col-md-6"><p><label>เพศ</label></p>
<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 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>
<!--กรุ๊ปเลือด-->
<div class="input-field col s6">
<select id="blood" >
<option disabled selected>เลือกกรุ๊ปเลือด</option>
<option value="A">A</option>
<option value="B">B</option>
<option value="AB">AB</option>
<option value="O">O</option>
</select>
<label>กรุ๊ปเลือด</label>
</div>
</div>
<!-- อายุ -->
<div class="row">
<div class="input-field col s6">
<input id="age" type="tel" name="age" class="validate" required="" aria-required="true">
<label for="age">อายุ</label>
</div>
</div>
<!--อัปโหลดรูภาพ-->
<div class="row">
<div class="file-field col s12">
<div class="btn">
<span>อัปโหลดรูปภาพ</span>
<input id="files" type="file">
</div>
<div class="file-path-wrapper">
<input class="file-path validate" type="text" placeholder="เลือกไฟล์รูปภาพของนักเรียน">
</div>
</div>
</div>
<div class="row">
<div class="input-field col s6">
<button class="waves-effect waves-light btn submit-btn" type="submit" onclick="submitForm(); return false;">บันทึกข้อมูล<i class="material-icons right">send</i></button>
</div>
</div>
<div class="row">
<div class="input-field col s12" id = "progress">
</div>
</div>
</div>
<div id="success" style="display:none">
<h5 class="left-align teal-text">บันทึกข้อมูลสำเร็จแล้ว!!</h5>
<p>ขอแสดงความยินดีด้วย..เราได้บันทึกการสมัครเข้าเรียนของคุณไว้เรียบร้อยแล้ว</p>
<p class="center-align"><a class="btn btn-large" onclick="restartForm()" >สมัครใหม่</a></p>
</div>
</form>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/js/materialize.min.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
var elems = document.querySelectorAll('select');
var instances = M.FormSelect.init(elems);
});
var file, reader = new FileReader();
reader.onloadend = function(e) {
if (e.target.error != null) {
showError("File " + file.name + " could not be read.");
return;
} else {
google.script.run
.withSuccessHandler(showSuccess)
.uploadFileToGoogleDrive(e.target.result, file.name,
$('input#name').val(),
$('input#nickname').val(),
$('input#email').val(),
$('input#tel').val(),
$("input[name='gender']:checked").val(),
$('input#age').val(),
$('#blood').val()
);
}
};
function showSuccess(e) {
if (e === "OK") {
$('#forminner').hide();
$('#success').show();
} else {
showError(e);
}
}
function restartForm() {
$('#form').trigger("reset");
$('#forminner').show();
$('#success').hide();
$('#progress').html("");
}
function submitForm() {
var files = $('#files')[0].files;
if (files.length === 0) {
showError("กรุณาเลือกไฟล์ที่จะอัปโหลด");
return;
}
file = files[0];
if (file.size > 1024 * 1024 * 5) {
showError("The file size should be < 5 MB. ");
return;
}
showMessage("กำลังอัปโหลด..");
reader.readAsDataURL(file);
}
function showError(e) {
$('#progress').addClass('red-text').html(e);
}
function showMessage(e) {
$('#progress').removeClass('red-text').html(e);
}
$(document).ready(function() {
$('select').material_select();
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment