apivat60 · November 29, 2020 04:40
diff --git a/ฟอร์มสวยๆ ด้วย Materializecss b/ฟอร์มสวยๆ ด้วย Materializecss
 ----------code.gs-------------
 function doGet() {
  var html = HtmlService.createTemplateFromFile('form')
  return html.evaluate()
 }

 function recordData(data){
  var ss = SpreadsheetApp.getActiveSpreadsheet().getSheetByName('แผ่น1')
  ss.appendRow([new Date() ,data.name , "'"+data.phone , data.level])
 }

 ----------form.html-------------------
 <!DOCTYPE html>
  <html>
    <head>
    <base target="_top">
      <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
      <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    </head>

    <body>
   <div class = "container">
   
   <div class="row">
        <div class="input-field col s6">
          <i class="material-icons prefix">account_circle</i>
          <input id="username" type="text" class="validate">
          <label for="username">ชื่อ สกุล</label>
        </div>
        
        <div class="input-field col s6">
          <i class="material-icons prefix">phone</i>
          <input id="telephone" type="text" class="validate">
          <label for="telephone">เบอร์โทร</label>
        </div>
      </div><!-- ปิดแทก row ชื่อ สกุล+เบอร์โทร -->
   
   <div class="row">
   <div class="input-field col s6">
   <i class="material-icons prefix">face</i>
    <select id = "level">
      <option disabled selected>เลือกระดับชั้น</option>
      <option>ม.ต้น</option>
      <option>ม.ปลาย</option>
    </select>
    <label>กรุณาเลือกระดับชั้น</label>
  </div>
    </div><!-- ปิดแทก row เลือกระดับชั้น-->
    
    <div class="row">
    <div class="input-field col s6">
         <button class="btn waves-effect waves-light" id= "btn">บันทึกข้อมูล
         <i class="material-icons right">send</i>
         </button>
    </div>
  </div><!-- ปิดแทก row ปุ่มบันทึกข้อมูล-->
          
          
   </div><!-- ปิดแทก container-->

      <!-- Compiled and minified JavaScript -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
    <script>
    document.addEventListener('DOMContentLoaded', function() {
    var elems = document.querySelectorAll('select');
    var instances = M.FormSelect.init(elems);
  });
    
    var uname = document.getElementById("username")
    var uphone = document.getElementById("telephone")
    var ulevel = document.getElementById("level")
        document.getElementById("btn").addEventListener("click",saveData)
        
    function saveData(){
    var data = { name:uname.value ,phone:uphone.value ,level:ulevel.value
    }
    google.script.run.recordData(data)
    uname.value = ""
    uphone.value = ""
    ulevel.selectedIndex = 0
    M.FormSelect.init(ulevel)
    }
    
    </script>
    
    </body>
  </html>
	----------code.gs-------------
	function doGet() {
	var html = HtmlService.createTemplateFromFile('form')
	return html.evaluate()
	}

	function recordData(data){
	var ss = SpreadsheetApp.getActiveSpreadsheet().getSheetByName('แผ่น1')
	ss.appendRow([new Date() ,data.name , "'"+data.phone , data.level])
	}

	----------form.html-------------------
	<!DOCTYPE html>
	<html>
	<head>
	<base target="_top">
	<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
	<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
	</head>

	<body>
	<div class = "container">

	<div class="row">
	<div class="input-field col s6">
	<i class="material-icons prefix">account_circle</i>
	<input id="username" type="text" class="validate">
	<label for="username">ชื่อ สกุล</label>
	</div>

	<div class="input-field col s6">
	<i class="material-icons prefix">phone</i>
	<input id="telephone" type="text" class="validate">
	<label for="telephone">เบอร์โทร</label>
	</div>
	</div><!-- ปิดแทก row ชื่อ สกุล+เบอร์โทร -->

	<div class="row">
	<div class="input-field col s6">
	<i class="material-icons prefix">face</i>
	<select id = "level">
	<option disabled selected>เลือกระดับชั้น</option>
	<option>ม.ต้น</option>
	<option>ม.ปลาย</option>
	</select>
	<label>กรุณาเลือกระดับชั้น</label>
	</div>
	</div><!-- ปิดแทก row เลือกระดับชั้น-->

	<div class="row">
	<div class="input-field col s6">
	<button class="btn waves-effect waves-light" id= "btn">บันทึกข้อมูล
	<i class="material-icons right">send</i>
	</button>
	</div>
	</div><!-- ปิดแทก row ปุ่มบันทึกข้อมูล-->


	</div><!-- ปิดแทก container-->

	<!-- Compiled and minified JavaScript -->
	<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
	<script>
	document.addEventListener('DOMContentLoaded', function() {
	var elems = document.querySelectorAll('select');
	var instances = M.FormSelect.init(elems);
	});

	var uname = document.getElementById("username")
	var uphone = document.getElementById("telephone")
	var ulevel = document.getElementById("level")
	document.getElementById("btn").addEventListener("click",saveData)

	function saveData(){
	var data = { name:uname.value ,phone:uphone.value ,level:ulevel.value
	}
	google.script.run.recordData(data)
	uname.value = ""
	uphone.value = ""
	ulevel.selectedIndex = 0
	M.FormSelect.init(ulevel)
	}

	</script>

	</body>
	</html>