neno-tech/code.gs

## code.gs
function doGet(e) {
  return HtmlService.createTemplateFromFile("index").evaluate()
  .setTitle("ระบบ Login")
  .addMetaTag('viewport', 'width=device-width, initial-scale=1')
  .setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL);
}

function processForm(formObject){
  var concat = formObject.searchtext+formObject.searchtext2;
  var result = "";
  if(concat){
      result = search(concat);
  }
  return result;
}

function search(searchtext){
  var spreadsheetId   = 'xxx';
  var sheetName = "xxx"
  var range = SpreadsheetApp.openById(spreadsheetId).getSheetByName(sheetName).getDataRange();
  var data = range.getValues();
  var ar = [];

  data.forEach(function(f) {
    if (~[f[x]].indexOf(searchtext)) {
      ar.push([f[x],f[x],f[x],f[x]]);
    }
  });

  return ar;
};


## index.html
<!DOCTYPE html>
<html>
<head>
  <base target="_self">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css"
    integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
  <style>
    @import url('https://fonts.googleapis.com/css2?family=Prompt:wght@200;400&display=swap');
    * {
      font-family: 'Prompt', sans-serif;
    }
  </style>
</head>

<body>
  <div class="container">
    <br>
    <div class="row">
      <div class="col">
        <center>
          <form id="search-form" onsubmit="handleFormSubmit(this)">
            <div class="form-group mb-2">
              <h5 for="searchtext">ลงชื่อเข้าใช้งาน</h5>
            </div>
            <p>
            <div class="form-group mx-sm-3 mb-3">
              <input type="text" class="form-control col-sm-6" id="searchtext" name="searchtext" placeholder="ไอดีผู้ใช้" required><br>
              <input type="password" class="form-control col-sm-6" id="searchtext2" name="searchtext2" placeholder="รหัสผ่าน" required>
            </div>
            <p>
        <button type="submit" class="btn btn-primary mb-2">เข้าสู่ระบบ</button>
        <span id="resp-spinner5" class="spinner-grow spinner-grow-sm text-danger d-none" role="status" aria-hidden="true"></span>
        <span id="resp-spinner6" class="spinner-grow spinner-grow-sm text-warning d-none" role="status" aria-hidden="true"></span>
        <span id="resp-spinner7" class="spinner-grow spinner-grow-sm text-info d-none" role="status" aria-hidden="true"></span>
          </form>
        </center>

      </div>
    </div>
    <div class="row">
      <div class="col">
        <div id="search-results" class="table-responsive">
          <!-- The Data Table is inserted here by JavaScript -->
        </div>
      </div>
    </div>
  </div>

  <script>
    //PREVENT FORMS FROM SUBMITTING / PREVENT DEFAULT BEHAVIOUR
          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, true);

          //HANDLE FORM SUBMISSION
          function handleFormSubmit(formObject) {
            document.getElementById('resp-spinner5').classList.remove("d-none");
            document.getElementById('resp-spinner6').classList.remove("d-none");
            document.getElementById('resp-spinner7').classList.remove("d-none");
            google.script.run.withSuccessHandler(createTable).processForm(formObject);
            document.getElementById("search-form").reset();
          };

          //CREATE THE DATA TABLE
          function createTable(dataArray) {
             document.getElementById('resp-spinner5').classList.add("d-none");
             document.getElementById('resp-spinner6').classList.add("d-none");
             document.getElementById('resp-spinner7').classList.add("d-none");
            if(dataArray && dataArray !== undefined && dataArray.length != 0){
              var result = "<table class='table table-sm table-striped' id='dtable' style='font-size:1.0em'>"+
                            "<tr>"+
                              "<td>"+'ชื่อ สกุล'+"</td>"+
                              "<td>"+dataArray[0][0]+"</td>"+
                           "</tr>"+
                            "<tr>"+
                                "<td>"+'ลิ้งค์'+"</td>"+
                                "<td>"+'<a href="'+dataArray[0][1]+'" target="_blank">ดูคลิป</a>'+"</td>"+
                            "</tr>"+
                            "<tr>"+
                              "<td>"+'เบอร์โทร'+"</td>"+
                              "<td>"+dataArray[0][2]+"</td>"+
                            "</tr>"+
                            "<tr>"+
                              "<td>"+'อีเมล'+"</td>"+
                              "<td>"+dataArray[0][3]+"</td>"+
                            "</tr>"+
                         "</table>";
              var div = document.getElementById('search-results');
              div.innerHTML = result;
            }else{
              var div = document.getElementById('search-results');
              div.innerHTML = "ไม่มีข้อมูลนี้ในระบบ!";
            }
          }
  </script>
  <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
    integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous">
  </script>
  <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"
    integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous">
  </script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.min.js"
    integrity="sha384-w1Q4orYjBQndcko6MimVbzY0tgp4pWB4lZ7lr30WKz0vr/aWKhXdBNmNb5D92v7s" crossorigin="anonymous">
  </script>
</body>

</html>
	function doGet(e) {
	return HtmlService.createTemplateFromFile("index").evaluate()
	.setTitle("ระบบ Login")
	.addMetaTag('viewport', 'width=device-width, initial-scale=1')
	.setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL);
	}

	function processForm(formObject){
	var concat = formObject.searchtext+formObject.searchtext2;
	var result = "";
	if(concat){
	result = search(concat);
	}
	return result;
	}

	function search(searchtext){
	var spreadsheetId = 'xxx';
	var sheetName = "xxx"
	var range = SpreadsheetApp.openById(spreadsheetId).getSheetByName(sheetName).getDataRange();
	var data = range.getValues();
	var ar = [];

	data.forEach(function(f) {
	if (~[f[x]].indexOf(searchtext)) {
	ar.push([f[x],f[x],f[x],f[x]]);
	}
	});

	return ar;
	};
	<!DOCTYPE html>
	<html>
	<head>
	<base target="_self">
	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css"
	integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
	<style>
	@import url('https://fonts.googleapis.com/css2?family=Prompt:wght@200;400&display=swap');
	* {
	font-family: 'Prompt', sans-serif;
	}
	</style>
	</head>

	<body>
	<div class="container">
	<br>
	<div class="row">
	<div class="col">
	<center>
	<form id="search-form" onsubmit="handleFormSubmit(this)">
	<div class="form-group mb-2">
	<h5 for="searchtext">ลงชื่อเข้าใช้งาน</h5>
	</div>
	<p>
	<div class="form-group mx-sm-3 mb-3">
	<input type="text" class="form-control col-sm-6" id="searchtext" name="searchtext" placeholder="ไอดีผู้ใช้" required><br>
	<input type="password" class="form-control col-sm-6" id="searchtext2" name="searchtext2" placeholder="รหัสผ่าน" required>
	</div>
	<p>
	<button type="submit" class="btn btn-primary mb-2">เข้าสู่ระบบ</button>
	<span id="resp-spinner5" class="spinner-grow spinner-grow-sm text-danger d-none" role="status" aria-hidden="true"></span>
	<span id="resp-spinner6" class="spinner-grow spinner-grow-sm text-warning d-none" role="status" aria-hidden="true"></span>
	<span id="resp-spinner7" class="spinner-grow spinner-grow-sm text-info d-none" role="status" aria-hidden="true"></span>
	</form>
	</center>

	</div>
	</div>
	<div class="row">
	<div class="col">
	<div id="search-results" class="table-responsive">
	<!-- The Data Table is inserted here by JavaScript -->
	</div>
	</div>
	</div>
	</div>

	<script>
	//PREVENT FORMS FROM SUBMITTING / PREVENT DEFAULT BEHAVIOUR
	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, true);

	//HANDLE FORM SUBMISSION
	function handleFormSubmit(formObject) {
	document.getElementById('resp-spinner5').classList.remove("d-none");
	document.getElementById('resp-spinner6').classList.remove("d-none");
	document.getElementById('resp-spinner7').classList.remove("d-none");
	google.script.run.withSuccessHandler(createTable).processForm(formObject);
	document.getElementById("search-form").reset();
	};

	//CREATE THE DATA TABLE
	function createTable(dataArray) {
	document.getElementById('resp-spinner5').classList.add("d-none");
	document.getElementById('resp-spinner6').classList.add("d-none");
	document.getElementById('resp-spinner7').classList.add("d-none");
	if(dataArray && dataArray !== undefined && dataArray.length != 0){
	var result = "<table class='table table-sm table-striped' id='dtable' style='font-size:1.0em'>"+
	"<tr>"+
	"<td>"+'ชื่อ สกุล'+"</td>"+
	"<td>"+dataArray[0][0]+"</td>"+
	"</tr>"+
	"<tr>"+
	"<td>"+'ลิ้งค์'+"</td>"+
	"<td>"+'<a href="'+dataArray[0][1]+'" target="_blank">ดูคลิป</a>'+"</td>"+
	"</tr>"+
	"<tr>"+
	"<td>"+'เบอร์โทร'+"</td>"+
	"<td>"+dataArray[0][2]+"</td>"+
	"</tr>"+
	"<tr>"+
	"<td>"+'อีเมล'+"</td>"+
	"<td>"+dataArray[0][3]+"</td>"+
	"</tr>"+
	"</table>";
	var div = document.getElementById('search-results');
	div.innerHTML = result;
	}else{
	var div = document.getElementById('search-results');
	div.innerHTML = "ไม่มีข้อมูลนี้ในระบบ!";
	}
	}
	</script>
	<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
	integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous">
	</script>
	<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"
	integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous">
	</script>
	<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.min.js"
	integrity="sha384-w1Q4orYjBQndcko6MimVbzY0tgp4pWB4lZ7lr30WKz0vr/aWKhXdBNmNb5D92v7s" crossorigin="anonymous">
	</script>
	</body>

	</html>