Created
February 8, 2022 04:33
-
-
Save neno-tech/85fd5c8c1edc0a126679ebb5cdb7f656 to your computer and use it in GitHub Desktop.
เว็บแอป CheckBox แบบดึงค่าจากชีต
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
| var ss = SpreadsheetApp.openById('xxx') | |
| function doGet(e) { | |
| return HtmlService.createTemplateFromFile("index").evaluate() | |
| .setTitle("WebApp Form Toggle-Show-Hide Password") | |
| .addMetaTag('viewport', 'width=device-width, initial-scale=1') | |
| .setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL); | |
| } | |
| function saveData(obj) { | |
| let ws = ss.getSheetByName('xxx'); | |
| ws.appendRow([new Date(), obj.input1, obj.checked ]) | |
| return true; | |
| } | |
| function setOptions(){ | |
| let data = ss.getSheetByName('xxx').getRange('A2:A').getValues() | |
| .filter(d => d[0] !== "") | |
| let options = data.map(d => { | |
| return '<label class="mt-2" for="' + d[0] + '">' | |
| + '<input type="checkbox" id="' + d[0] + '" class="multi" value="' + d[0]+'">' | |
| + ' ' + d[0] + '' | |
| + '</label><br>' | |
| }).join("") | |
| return options; | |
| } |
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
| body{ | |
| font-family:Prompt; | |
| background: #eee; | |
| } | |
| .frame{ | |
| box-shadow: 10px 10px 15px rgb(193,182,182), -6px -6px 15px #eee; | |
| padding: 20px; | |
| max-width: 480px; | |
| margin: 40px auto; | |
| margin-top: 50px; | |
| border-radius: 7px; | |
| background: white; | |
| } | |
| button { | |
| text-transform: uppercase; | |
| transition: transform 80ms ease-in; | |
| border-radius: 7px; | |
| } | |
| button:active { | |
| transform: scale(0.95); | |
| color: white | |
| } | |
| .btn.focus, .btn:focus { | |
| outline: 0; | |
| box-shadow: none!important; | |
| color: white; | |
| } | |
| .btn-info:hover { | |
| background-color: gold; | |
| color: white; | |
| border-color: gold; | |
| } | |
| .btn-info {color: white;} | |
| .box { | |
| border: 1px solid rgba(0,0,0,0.2); | |
| padding: 1.5rem; | |
| margin-left:10px; | |
| margin-right:10px; | |
| border-radius: 13px; | |
| margin: auto; | |
| width: 100%; | |
| } | |
| .inp { | |
| border:none; | |
| border-bottom: 1px solid rgba(0,0,0,0.2); | |
| border-radius: 0px; | |
| padding: 5px 10px; | |
| outline: none; | |
| } | |
| [placeholder]:focus::-webkit-input-placeholder { | |
| transition: text-indent 0.4s 0.4s ease; | |
| text-indent: -100%; | |
| opacity: 1; | |
| } | |
| .inp.focus, .inp:focus { | |
| outline: 0; | |
| box-shadow: none!important; | |
| /* color: green; */ | |
| border-bottom: 1px solid rgba(0,0,0,0.2); | |
| } | |
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> | |
| <base target="_top"> | |
| <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" | |
| integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous"> | |
| </head> | |
| <body> | |
| <div class="container"> | |
| <div class="row frame"> | |
| <h5 class="mt-4 text-center">เว็บแอป</h5> | |
| <h6 class="mb-4 text-center">การสร้าง checkbox ด้วยสคริปต์</h6> | |
| <div class="form-group mb-4 box"> | |
| <input type="text" class="form-control inp mb-3" id="input1" placeholder="ชื่อ สกุล" autocomplete="off"> | |
| </div> | |
| <div class="form-group mb-4 box"> | |
| <span>โปรดเลือกรายการ</span><br> | |
| <?!= setOptions() ?> | |
| </div> | |
| <div class="form-group mt-4 mb-4 text-center"> | |
| <button type="button" class="btn btn-primary" onclick="whenButtonClicked()">บันทึกข้อมูล</button> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| function whenButtonClicked(){ | |
| event.preventDefault() | |
| let input1 = document.getElementById('input1'); | |
| let checked; | |
| let temp = document.querySelectorAll('.multi:checked'); | |
| if(temp != null){ | |
| let checkedvalues = Array.prototype.map.call(temp, function(el){ return el.value }) | |
| checked = checkedvalues.join(",") | |
| }else{ | |
| checked = null | |
| } | |
| let objData = {input1: input1.value, checked: checked} | |
| google.script.run.withSuccessHandler(()=>{ | |
| input1.value = '' | |
| document.querySelectorAll('.multi').forEach(function(el) { el.checked = false; } ) | |
| }).saveData(objData) | |
| } | |
| </script> | |
| <script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" | |
| integrity="sha384-SR1sx49pcuLnqZUnnPwx6FCym0wLsk5JZuNx2bPPENzswTNFaQU1RDvt3wT4gWFG" crossorigin="anonymous"> | |
| </script> | |
| <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" | |
| integrity="sha384-j0CNLUeiqtyaRmlzUHCPZ+Gy5fQu0dQ6eZ/xAww941Ai1SxSY+0EQqNXNE6DZiVc" crossorigin="anonymous"> | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment