forked from smileware/kewpie
-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathintro-form.html
More file actions
121 lines (108 loc) · 7.8 KB
/
intro-form.html
File metadata and controls
121 lines (108 loc) · 7.8 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="icon" href="./img/fav.jpg" type="image/png">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Kewpie Much & More เพราะคิวพีเป็นได้มากกว่าน้ำสลัด</title>
<link rel="stylesheet" href="./style.css">
<link rel="stylesheet" href="./animate.css">
</head>
<body class="page page-form">
<div class="wrapper">
<img src="./img/logo.png" class="logo animate__animated animate__bounceIn" />
<form id="myForm">
<h3>โปรดกรอกข้อมูล</h3>
<div class="form-group">
<select class="required" name="gender">
<option value="">เพศ</option>
<option value="ชาย">ชาย</option>
<option value="หญิง">หญิง</option>
<option value="ไม่ระบุ">ไม่ระบุ</option>
</select>
<span class="error-message" style="display: none;">กรุณาเลือกเพศ</span>
<svg class="star" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 726.02 704.23">
<path fill="red" d="M726.02,395.82h-259.48l175.41,175.41-57.94,57.93-178.74-178.74v253.82h-81.89v-250.77l-186.15,186.15-61.71-61.71,182.08-182.08H0v-87.41h263.4L86.1,131.11l57.94-57.93,179.33,179.47V0h81.89v248.01l183.54-183.54,61.71,61.85-182.08,182.09h257.59v87.41Z"/>
</svg>
<svg class="arrow" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-chevron-down" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708"/>
</svg>
</div>
<div class="form-group">
<input type="number" placeholder="อายุ" name="age" required />
<svg class="star" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 726.02 704.23">
<path fill="red" d="M726.02,395.82h-259.48l175.41,175.41-57.94,57.93-178.74-178.74v253.82h-81.89v-250.77l-186.15,186.15-61.71-61.71,182.08-182.08H0v-87.41h263.4L86.1,131.11l57.94-57.93,179.33,179.47V0h81.89v248.01l183.54-183.54,61.71,61.85-182.08,182.09h257.59v87.41Z"/>
</svg>
</div>
<div class="form-group">
<select class="required" name="kewpie">
<option value="">เคยกินน้ำสลัดของ KEWPIE หรือไม่</option>
<option value="เคย">เคย</option>
<option value="ไม่เคย">ไม่เคย</option>
</select>
<span class="error-message" style="display: none;">กรุณาเลือกตัวเลือกนี้</span>
<svg class="star" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 726.02 704.23">
<path fill="red" d="M726.02,395.82h-259.48l175.41,175.41-57.94,57.93-178.74-178.74v253.82h-81.89v-250.77l-186.15,186.15-61.71-61.71,182.08-182.08H0v-87.41h263.4L86.1,131.11l57.94-57.93,179.33,179.47V0h81.89v248.01l183.54-183.54,61.71,61.85-182.08,182.09h257.59v87.41Z"/>
</svg>
<svg class="arrow" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-chevron-down" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708"/>
</svg>
</div>
<div class="form-group">
<select class="required" name="preference">
<option value="">นิยมนำน้ำสลัดมาประกอบอาหารประเภทใด</option>
<option value="สลัด">สลัด</option>
<option value="หมัก">หมัก</option>
<option value="ผัด">ผัด</option>
<option value="ราด">ราด</option>
<option value="จิ้ม">จิ้ม</option>
<option value="จุ่ม">จุ่ม</option>
</select>
<span class="error-message" style="display: none;">กรุณาเลือกตัวเลือกนี้</span>
<svg class="star" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 726.02 704.23">
<path fill="red" d="M726.02,395.82h-259.48l175.41,175.41-57.94,57.93-178.74-178.74v253.82h-81.89v-250.77l-186.15,186.15-61.71-61.71,182.08-182.08H0v-87.41h263.4L86.1,131.11l57.94-57.93,179.33,179.47V0h81.89v248.01l183.54-183.54,61.71,61.85-182.08,182.09h257.59v87.41Z"/>
</svg>
<svg class="arrow" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-chevron-down" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708"/>
</svg>
</div>
<div class="form-group consent">
<label>
<input type="checkbox" name="consent" required>
ท่านยินยอมให้ผู้จัดงานจัดเก็บ ใช้ และ/หรือ เปิดเผยข้อมูลส่วนตัวบุคคลของตน อันได้แก่ รูปภาพ เสียง วิดีโอ ข้อมูล เนื้อหา และข้อมูลส่วนบุคคลอื่นๆ ที่เกี่ยวข้องกับการเข้าร่วมกิจกรรมนี้ เพื่อนำไปใช้ในการโฆษณาและประชาสัมพันธ์กิจกรรมนี้ผ่านแพลตฟอร์มออนไลน์และช่องทางสื่อต่าง ๆ ทั้งที่มีอยู่ในปัจจุบันและอนาคตของ KEWPIE หรือไม่
</label>
</div>
<button type="submit" class="btn-submit">
<img src="./img/next-btn.png" />
</button>
</form>
</div>
<img src="./img/sink.png" class="bg-sink" />
<script>
document.getElementById('myForm').addEventListener('submit', function(event) {
event.preventDefault();
const selectElements = document.querySelectorAll('.required');
let isFormValid = true;
selectElements.forEach(function(selectElement) {
const errorMessage = selectElement.nextElementSibling;
if (selectElement.value === '') {
errorMessage.style.display = 'inline';
isFormValid = false;
} else {
errorMessage.style.display = 'none';
}
});
if (isFormValid) {
const formData = new FormData(document.getElementById('myForm'));
const formObject = {};
formData.forEach(function(value, key) {
formObject[key] = value;
});
sessionStorage.setItem('formData', JSON.stringify(formObject));
console.log(JSON.parse(sessionStorage.getItem('formData')));
window.location.href = 'start.html';
}
});
</script>
</body>
</html>