neverlock · April 14, 2023 06:13 · Oct 3, 2021 · Oct 3, 2021 · Oct 3, 2021 · Oct 3, 2021
diff --git a/options b/options
@@ -7,6 +7,7 @@
 		<div class="card-header text-white bg-primary">
 		ฟอร์มบันทึกข้อมูล
 		</div>
+		<div class="card-body">
 </div>
 
 -----google font--------------

diff --git a/่javascript b/่javascript
@@ -9,7 +9,7 @@ function processForm(formObject){
     formObject.gender,
     formObject.dateOfBirth,
     formObject.email,
-    "'"+formObject.phone
+    formObject.phone
 
   ]);
 }

diff --git a/code.gs b/code.gs
@@ -4,17 +4,3 @@ function doGet() {
   .setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL)
 }
 
-function processForm(formObject){
-  var ss= SpreadsheetApp.openById('xxx');
-  var ws=ss.getSheets()[0]
-  ws.appendRow([
-    new Date(),
-    formObject.first_name,
-    formObject.last_name,
-    formObject.gender,
-    formObject.dateOfBirth,
-    formObject.email,
-    "'"+formObject.phone
-
-  ]);
-}
diff --git a/index.html b/index.html
@@ -57,22 +57,6 @@
 					</div>
 				</div>
 
-		<script>
-			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);
 
-function handleFormSubmit(formObject){
-  google.script.run.processForm(formObject);
-  document.getElementById("myForm").reset();
-
-}
-		</script>
 </body>
 </html>
diff --git a/option → options b/option → options
diff --git a/่javascript b/่javascript
@@ -0,0 +1,34 @@
+-----code.gs---------
+function processForm(formObject){
+  var ss= SpreadsheetApp.openById('xxx');
+  var ws=ss.getSheets()[0]
+  ws.appendRow([
+    new Date(),
+    formObject.first_name,
+    formObject.last_name,
+    formObject.gender,
+    formObject.dateOfBirth,
+    formObject.email,
+    "'"+formObject.phone
+
+  ]);
+}
+
+------- index.html------
+		<script>
+			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);
+
+function handleFormSubmit(formObject){
+  google.script.run.processForm(formObject);
+  document.getElementById("myForm").reset();
+
+}
+		</script>
diff --git a/code.gs b/code.gs
@@ -0,0 +1,20 @@
+function doGet() {
+  return HtmlService.createTemplateFromFile('index').evaluate()
+  .addMetaTag('viewport', 'width=device-width, initial-scale=1')
+  .setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL)
+}
+
+function processForm(formObject){
+  var ss= SpreadsheetApp.openById('xxx');
+  var ws=ss.getSheets()[0]
+  ws.appendRow([
+    new Date(),
+    formObject.first_name,
+    formObject.last_name,
+    formObject.gender,
+    formObject.dateOfBirth,
+    formObject.email,
+    "'"+formObject.phone
+
+  ]);
+}
diff --git a/index.html b/index.html
@@ -0,0 +1,78 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
+		integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
+</head>
+
+<body>
+	<div class="container">
+		<div class="row">
+			<div class="col-6">
+				<br>
+						<form id="myForm" onsubmit="handleFormSubmit(this)">
+							<div class="form-row">
+								<div class="form-group col-md-6">
+									<label for="first_name">ชื่อ</label>
+									<input type="text" class="form-control" id="first_name" name="first_name" placeholder="ชื่อ">
+                            </div>
+									<div class="form-group col-md-6">
+										<label for="last_name">สกุล</label>
+										<input type="text" class="form-control" id="last_name" name="last_name" placeholder="สกุล">
+                            </div>
+									</div>
+
+									<div class="form-row">
+										<div class="form-group col-md-6">
+											<p>เพศ</p>
+											<div class="form-check form-check-inline">
+												<input class="form-check-input" type="radio" name="gender" id="male" value="ชาย">
+												<label class="form-check-label" for="male">ชาย</label>
+											</div>
+											<div class="form-check form-check-inline">
+												<input class="form-check-input" type="radio" name="gender" id="female" value="หญิง">
+												<label class="form-check-label" for="female">หญิง</label>
+											</div>
+										</div>
+										<div class="form-group col-md-6">
+											<label for="dateOfBirth">วันเกิด</label>
+											<input type="date" class="form-control" id="dateOfBirth" name="dateOfBirth">
+                            </div>
+										</div>
+
+										<div class="form-group">
+											<label for="email">อีเมล</label>
+											<input type="email" class="form-control" id="email" name="email" placeholder="อีเมล">
+                        </div>
+
+											<div class="form-group">
+												<label for="phone">เบอร์โทร</label>
+												<input type="tel" class="form-control" id="phone" name="phone" placeholder="เบอร์โทร">
+                        </div>
+
+												<button type="submit" class="btn btn-primary btn-block">บันทึก</button>
+						</form>
+						<div id="output"></div>
+					</div>
+				</div>
+
+		<script>
+			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);
+
+function handleFormSubmit(formObject){
+  google.script.run.processForm(formObject);
+  document.getElementById("myForm").reset();
+
+}
+		</script>
+</body>
+</html>
diff --git a/option b/option
@@ -0,0 +1,35 @@
+-----row center--------------
+<div class="row justify-content-md-center">
+
+
+-----bootstrap card--------------
+<div class="card  border-primary mb-6 " style="max-width:48rem;">
+		<div class="card-header text-white bg-primary">
+		ฟอร์มบันทึกข้อมูล
+		</div>
+</div>
+
+-----google font--------------
+	<link rel="preconnect" href="https://fonts.googleapis.com">
+	<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+	<link href="https://fonts.googleapis.com/css2?family=Prompt:wght@400&display=swap" rel="stylesheet">
+	<style>
+		body {
+			font-family: 'Prompt', sans-serif;
+		}
+	</style>
+
+-----font awesome--------------
+	<script src="https://kit.fontawesome.com/6a972cf3a7.js" crossorigin="anonymous"></script>
+  <i class="fas fa-address-card"></i>
+
+-----sweet alert--------------
+<script src="//cdn.jsdelivr.net/npm/sweetalert2@11"></script>
+
+  Swal.fire({
+  position: 'center',
+  icon: 'success',
+  title: 'บันทึกเรียบร้อย',
+  showConfirmButton: false,
+  timer: 1500
+})
No results found