Last active
December 12, 2023 18:09
-
-
Save neno-tech/bcd8e4a8e4c2771662c9800a0e8656fe to your computer and use it in GitHub Desktop.
เรียนรู้เว็บแอปบันทึกข้อมูลลงชีตทีละส่วน
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| function doGet() { | |
| return HtmlService.createTemplateFromFile('index').evaluate() | |
| .addMetaTag('viewport', 'width=device-width, initial-scale=1') | |
| .setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL) | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| -----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 | |
| }) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| -----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