โค้ด javascript สำหรับสร้างฟอร์มใน Googlesheet
// สร้างฟังก์ชัน doGet เพื่อแสดงหน้าเว็บ HTML
function doGet() {
return HtmlService.createHtmlOutputFromFile('Index');
}
// ฟังก์ชันเพื่อบันทึกข้อมูลที่ส่งมาจากฟอร์ม
function submitData(data) {
var sheet = SpreadsheetApp.getActiveSpreadsheet().getActiveSheet();
var rowNumber = sheet.getLastRow() + 1; // กำหนดลำดับที่ให้เป็นแถวสุดท้าย + 1
sheet.appendRow([rowNumber, data.firstName, data.lastName, data.phoneNumber]);
return 'ข้อมูลถูกบันทึกเรียบร้อยแล้ว!';
}
โค้ด html สำหรับสร้างฟอร์มใน Google sheet
<!DOCTYPE html>
<html>
<head>
<base target="_top">
</head>
<body>
<form id="myForm" onsubmit="handleSubmit(event)">
<label for="firstName">ชื่อ:</label><br>
<input type="text" id="firstName" name="firstName" required><br>
<label for="lastName">สกุล:</label><br>
<input type="text" id="lastName" name="lastName" required><br>
<label for="phoneNumber">เบอร์โทรศัพท์:</label><br>
<input type="text" id="phoneNumber" name="phoneNumber" required><br><br>
<input type="submit" value="Submit" style="display: none;">
</form>
<div id="output"></div>
<script>
function handleSubmit(event) {
event.preventDefault();
var form = document.getElementById('myForm');
var data = {
firstName: form.firstName.value,
lastName: form.lastName.value,
phoneNumber: form.phoneNumber.value
};
google.script.run.withSuccessHandler(function(response) {
document.getElementById('output').innerText = response;
form.reset();
form.firstName.focus();
}).submitData(data);
}
document.addEventListener('keydown', function(event) {
if (event.key === 'Enter' && document.activeElement.tagName !== 'TEXTAREA') {
event.preventDefault();
var form = document.getElementById('myForm');
handleSubmit(new Event('submit'));
}
});
</script>
</body>
</html>
EmoticonEmoticon