<!DOCTYPE html>
<html>
<head>
<base target="_top">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/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/core@2.9.1/dist/umd/popper.min.js"
integrity="sha384-SR1sx49pcuLnqZUnnPwx6FCym0wLsk5JZuNx2bPPENzswTNFaQU1RDvt3wT4gWFG" crossorigin="anonymous">
</script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/js/bootstrap.min.js"
integrity="sha384-j0CNLUeiqtyaRmlzUHCPZ+Gy5fQu0dQ6eZ/xAww941Ai1SxSY+0EQqNXNE6DZiVc" crossorigin="anonymous">
</script>
</body>
</html>