Skip to content

Instantly share code, notes, and snippets.

@apivat60

apivat60/ฟอร์มสวยๆ ด้วย Materializecss

Created November 29, 2020 04:40
Show Gist options
  • Save apivat60/6280c1fd3aa937452a6bfdf068ae7baa to your computer and use it in GitHub Desktop.
Save apivat60/6280c1fd3aa937452a6bfdf068ae7baa to your computer and use it in GitHub Desktop.
Download ZIP
Raw
ฟอร์มสวยๆ ด้วย 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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment