krooluang/FormReloadStatus

## FormReloadStatus
//Database : https://docs.google.com/spreadsheets/d/1Lyv3gWZHsfl9gcLNBil4oIjEAKp-gI2ED79C-tbV0EY/copy

function doGet() {
  return HtmlService.createTemplateFromFile('index')
  .evaluate()
  .setTitle('FormSubmit')
  .addMetaTag('viewport', 'width=device-width, initial-scale=1')
  .setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL)
}

function saveData(obj){
    let ss = SpreadsheetApp.getActiveSpreadsheet().getSheetByName('Data')
        ss.appendRow([
        new Date(),
        obj.firstname,
        obj.classroom,
        obj.bd,
        obj.gender
        ])

     data = ss.getRange(ss.getLastRow(),1,1,ss.getLastColumn()).getDisplayValues()[0]

   return data
  }


function setStatus(){
  let ss = SpreadsheetApp.getActiveSpreadsheet().getSheetByName('status')
  let data = ss.getDataRange().getDisplayValues()
  let sta = data.map(r => r[1])
  return sta
}

## index.html
<!DOCTYPE html>
<html lang="en">

<head>
  <base target="_top">
  <script src="https://code.jquery.com/jquery-3.6.4.js"></script>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" />
  <style>
    @import url('https://fonts.googleapis.com/css2?family=Kanit&display=swap');

    body {
      font-family: 'Kanit', sans-serif;
      font-size: .875rem;
    }
  </style>
</head>

<body>
  <div class="container">
    <div class="col-md-6 mx-auto">
      <table class="table table-bordered text-center">
        <thead class="bg-warning mb-2 p-2">
          <tr>
          <th scope='col'>ประเภท</th>
          <th scope='col'>จำนวน</th>
           </tr>
          </thead>
            <tr>
            <th scope='col'>หญิง</th>
            <td scope='col' id="sfemale"></td>
            </tr>

            <tr>
            <th scope='col'>ชาย</th>
            <td scope='col' id="smale"></td>
            </tr>
      </table>
      <form id="myForm" onsubmit="submitForm(this)">
        <div class="col-md-12 text-center">
          <h5 class="mb-2 p-2 bg-success text-white"><i class="fa-solid fa-align-justify"></i> ฟอร์มลงทะเบียน</h5>
        </div>
        <div class="row">
          <div class="col-md-6 mb-2">
            <label ><i class="fa-solid fa-circle-user"></i> ชื่อ สกุล</label>
            <input type="text" class="form-control" id="firstname" name="firstname" placeholder="กรุณาพิมพ์ชื่อ สกุล" required >
          </div>
          <div class="col-md-6 mb-2">
            <label ><i class="fa-solid fa-school"></i> ชั้น</label>
            <select class="form-control"  id="classroom" name="classroom" required>
                <option disabled selected value="">เลือกชั้น</option>
                <option>ป.1</option>
                <option>ป.2</option>
                <option>ป.3</option>
                <option>ป.4</option>
                <option>ป.5</option>
                <option>ป.6</option>
            </select>
          </div>

          <div class="col-md-6 mb-2">
            <label ><i class="fa-solid fa-calendar-days"></i> วันเกิด </label>
            <input type="date" class="form-control" id="bd" name="bd" required>
          </div>

          <div class="col-md-6 mb-2">
            <label class="mb-2"><i class="fa-solid fa-children"></i> เพศ </label><br>
            <input type="radio" class="form-check-input me-2"  id="male"  name="gender" value="ชาย" required>
            <label  class="form-check-label me-2">ชาย</label>
            <input type="radio" class="form-check-input me-2" id="female" name="gender" value="หญิง" required>
            <label class="form-check-label me-2">หญิง</label>
          </div>
        </div>

        <div class="col-md-12 mt-2">
          <button type="submit" class="btn btn-success w-100" id="btn1" ><i class="fa-solid fa-floppy-disk"></i> บันทึกข้อมูล</button>
          <button class="btn btn-success w-100" type="button" id="btn2" style="display:none" disabled>
  <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
  กำลังบันทึก...
</button>
        </div>
      </form>

    </div>
  </div>

  <script>
    let datax
    $(document).ready(function() {
     loadststus()
    });

function loadststus(){
   google.script.run.withSuccessHandler(data=>{
        datax=data
        console.log(datax)
        $('#sfemale').text(datax[0]);
        $('#smale').text(datax[1]);
      }).setStatus()
}

    function submitForm(obj){
        event.preventDefault()
          $('#btn1').hide();
          $('#btn2').show();

        google.script.run.withSuccessHandler(()=>{
          $('#myForm')[0].reset()

         loadststus()

          $('#btn2').hide();
          $('#btn1').show();

}).saveData(obj)
}

  </script>
  <script src="//cdn.jsdelivr.net/npm/sweetalert2@11"></script>
  <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.10.2/dist/umd/popper.min.js">
  </script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js">
  </script>
</body>

</html>
	//Database : https://docs.google.com/spreadsheets/d/1Lyv3gWZHsfl9gcLNBil4oIjEAKp-gI2ED79C-tbV0EY/copy

	function doGet() {
	return HtmlService.createTemplateFromFile('index')
	.evaluate()
	.setTitle('FormSubmit')
	.addMetaTag('viewport', 'width=device-width, initial-scale=1')
	.setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL)
	}

	function saveData(obj){
	let ss = SpreadsheetApp.getActiveSpreadsheet().getSheetByName('Data')
	ss.appendRow([
	new Date(),
	obj.firstname,
	obj.classroom,
	obj.bd,
	obj.gender
	])

	data = ss.getRange(ss.getLastRow(),1,1,ss.getLastColumn()).getDisplayValues()[0]

	return data
	}


	function setStatus(){
	let ss = SpreadsheetApp.getActiveSpreadsheet().getSheetByName('status')
	let data = ss.getDataRange().getDisplayValues()
	let sta = data.map(r => r[1])
	return sta
	}
	<!DOCTYPE html>
	<html lang="en">

	<head>
	<base target="_top">
	<script src="https://code.jquery.com/jquery-3.6.4.js"></script>
	<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" />
	<style>
	@import url('https://fonts.googleapis.com/css2?family=Kanit&display=swap');

	body {
	font-family: 'Kanit', sans-serif;
	font-size: .875rem;
	}
	</style>
	</head>

	<body>
	<div class="container">
	<div class="col-md-6 mx-auto">
	<table class="table table-bordered text-center">
	<thead class="bg-warning mb-2 p-2">
	<tr>
	<th scope='col'>ประเภท</th>
	<th scope='col'>จำนวน</th>
	</tr>
	</thead>
	<tr>
	<th scope='col'>หญิง</th>
	<td scope='col' id="sfemale"></td>
	</tr>

	<tr>
	<th scope='col'>ชาย</th>
	<td scope='col' id="smale"></td>
	</tr>
	</table>
	<form id="myForm" onsubmit="submitForm(this)">
	<div class="col-md-12 text-center">
	<h5 class="mb-2 p-2 bg-success text-white"><i class="fa-solid fa-align-justify"></i> ฟอร์มลงทะเบียน</h5>
	</div>
	<div class="row">
	<div class="col-md-6 mb-2">
	<label ><i class="fa-solid fa-circle-user"></i> ชื่อ สกุล</label>
	<input type="text" class="form-control" id="firstname" name="firstname" placeholder="กรุณาพิมพ์ชื่อ สกุล" required >
	</div>
	<div class="col-md-6 mb-2">
	<label ><i class="fa-solid fa-school"></i> ชั้น</label>
	<select class="form-control" id="classroom" name="classroom" required>
	<option disabled selected value="">เลือกชั้น</option>
	<option>ป.1</option>
	<option>ป.2</option>
	<option>ป.3</option>
	<option>ป.4</option>
	<option>ป.5</option>
	<option>ป.6</option>
	</select>
	</div>

	<div class="col-md-6 mb-2">
	<label ><i class="fa-solid fa-calendar-days"></i> วันเกิด </label>
	<input type="date" class="form-control" id="bd" name="bd" required>
	</div>

	<div class="col-md-6 mb-2">
	<label class="mb-2"><i class="fa-solid fa-children"></i> เพศ </label><br>
	<input type="radio" class="form-check-input me-2" id="male" name="gender" value="ชาย" required>
	<label class="form-check-label me-2">ชาย</label>
	<input type="radio" class="form-check-input me-2" id="female" name="gender" value="หญิง" required>
	<label class="form-check-label me-2">หญิง</label>
	</div>
	</div>

	<div class="col-md-12 mt-2">
	<button type="submit" class="btn btn-success w-100" id="btn1" ><i class="fa-solid fa-floppy-disk"></i> บันทึกข้อมูล</button>
	<button class="btn btn-success w-100" type="button" id="btn2" style="display:none" disabled>
	<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
	กำลังบันทึก...
	</button>
	</div>
	</form>

	</div>
	</div>

	<script>
	let datax
	$(document).ready(function() {
	loadststus()
	});

	function loadststus(){
	google.script.run.withSuccessHandler(data=>{
	datax=data
	console.log(datax)
	$('#sfemale').text(datax[0]);
	$('#smale').text(datax[1]);
	}).setStatus()
	}

	function submitForm(obj){
	event.preventDefault()
	$('#btn1').hide();
	$('#btn2').show();

	google.script.run.withSuccessHandler(()=>{
	$('#myForm')[0].reset()

	loadststus()

	$('#btn2').hide();
	$('#btn1').show();

	}).saveData(obj)
	}

	</script>
	<script src="//cdn.jsdelivr.net/npm/sweetalert2@11"></script>
	<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.10.2/dist/umd/popper.min.js">
	</script>
	<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js">
	</script>
	</body>

	</html>