001.<?php
002.include("mysql_connect.php");
003.?>
004.<!DOCTYPE html>
005.<html lang="en">
006.<head>
007.<meta charset="utf-8">
008.<meta http-equiv="X-UA-Compatible" content="IE=edge">
009.<meta name="viewport" content="width=device-width, initial-scale=1">
010.<title>Aftersale</title>
011.<!--dependent dropdown -->
014.<!--end dependent dropdown -->
015.<link href="css/bootstrap.min.css" rel="stylesheet">
016.<link href="css/bootstrap-responsive.min.css" rel="stylesheet">
018.<script src="js/bootstrap.min.js"></script>
019.<script src="js/jquery.js"></script>
020.<script>
021.$(function(){
022.
023. $("#view").click(function(){
024. var SetHtml = "ชื่อ : "+$("#name").val()+
025. "<br>เบอร์โทรศัพท์ : "+$("#tel").val()+
026. "<br>โครงการ : "+$("#project option:selected").text();+
027. "<br>ยืนยันการส่งข้อมูลหรือไม่?" ;
028.
029.
030. $("#Dname").html(SetHtml);
031. $("#exampleModalCenter").modal("show");
032.})
033.});
034.</script>
037.<style type="text/css">
038..red {
039. color: #F00;
040.}
041.</style>
042.</head>
043.<body>
044.<div class="container" >
045. <div align="right"> วันที่ :
046. <?php
047. $date = date("d-m-Y H:i:s");
048. echo $date;
049. ?>
050. </div>
051. <div class="alert alert-primary" role="alert" align="center">
052. <h4>ระบบแจ้งซ่อม</h4>
053. </div>
054. <form id="myform" name="myform" method="post" action="add.php">
055. <div class="form-group row">
056. <label for="name" class="col-sm-2 col-form-label">ชื่อ-นามสกุล <span class="red">*</span></label>
057. <div class="col-sm-10">
058. <input type="text" class="form-control" id="name" name="name" required>
059. </div>
060. </div>
061. <div class="form-group row">
062. <label for="email" class="col-sm-2 col-form-label">อีเมล์</label>
063. <div class="col-sm-10">
064. <input type="text" class="form-control" id="email" name="email" placeholder="email@example.com">
065. </div>
066. </div>
067. <div class="form-group row">
068. <label for="tel" class="col-sm-2 col-form-label">เบอร์โทรศัพท์ <span class="red">*</span></label>
069. <div class="col-sm-10">
070. <input type="text" class="form-control" id="tel" name="tel" required>
071. </div>
072. </div>
073.
074.
075. <div class="form-group row">
076.
077. <label for="project" class="col-sm-2 col-form-label">โครงการ <span class="red">*</span></label>
078. <div class="col-sm-4">
079. <select class="custom-select" id="project" name="project" required>
080. <option selected>กรุณาเลือกโครงการ</option>
081. <?php
082. require('mysql_connect.php');
083. $sql = "SELECT * FROM project";
084. $result = $mysqli->query($sql);
085. while($row = $result->fetch_assoc()){
086. echo "<option value='".$row['id']."'>".$row['name']."</option>";
087. }
088. ?>
089. </select>
090. </div>
091.
092. <label for="projectsub" class="col-sm-2 col-form-label">โครงการย่อย </label>
093. <div class="col-sm-4">
094. <select class="custom-select" id="projectsub" name="projectsub">
095.
096. </select>
097. </div>
098.
099. </div>
100. <script>
101.$( "select[name='project']" ).change(function () {
102. var projectID = $(this).val();
103.
104.
105. if(projectID) {
106.
107.
108. $.ajax({
109. url: "ajaxpro.php",
110. dataType: 'Json',
111. data: {'id':projectID},
112. success: function(data) {
113. $('select[name="projectsub"]').empty();
114. $.each(data, function(key, value) {
115. $('select[name="projectsub"]').append('<option value="'+ key +'">'+ value +'</option>');
116. });
117. }
118. });
119.
120.
121. }else{
122. $('select[name="projectsub"]').empty();
123. }
124.});
125.</script>
126.
127.
128. <div class="form-group row">
129. <label for="house" class="col-sm-2 col-form-label">บ้านเลขที่ <span class="red">*</span></label>
130. <div class="col-sm-4">
131. <input type="text" class="form-control" id="house" name="house" required>
132. </div>
133. <label for="unit" class="col-sm-1 col-form-label">/</label>
134. <div class="col-sm-5">
135. <input type="text" class="form-control" id="unit" name="unit" >
136. </div>
137. </div>
138.
139.
140.
141. <div class="form-group row">
142. <label for="building" class="col-sm-2 col-form-label">อาคาร/ตึก</label>
143. <div class="col-sm-10">
144. <input type="text" class="form-control" id="building" name="building" >
145. </div>
146. </div>
147. <div class="form-group row">
148. <label for="subject" class="col-sm-2 col-form-label">หัวข้อ <span class="red">*</span></label>
149. <div class="col-sm-10">
150. <input type="text" class="form-control" id="subject" name="subject" required>
151. </div>
152. </div>
153. <div class="form-group row">
154. <label for="details" class="col-sm-2 col-form-label">รายละเอียด <span class="red">*</span></label>
155. <div class="col-sm-10">
156. <textarea class="form-control" id="details" name="details" rows="6" placeholder="รายละเอียดเพิ่มเติม" required></textarea>
157. </div>
158. </div>
159. <br>
160. <div align="center">
161.
162. <!-- Button trigger modal -->
163. <button type="button" class="btn btn-success" data-toggle="modal" data-target="#exampleModalCenter" id="view" > ส่งข้อมูลแจ้งซ่อม </button>
164. <br>
165. <br>
166. <!-- Modal -->
167. <div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
168. <div class="modal-dialog modal-dialog-centered" role="document">
169. <div class="modal-content">
170. <div class="modal-header">
171. <h5 class="modal-title" id="exampleModalLongTitle">ส่งข้อมูลแจ้งซ่อม</h5>
172. <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button>
173. </div>
174. <div class="modal-body">
175. <div id="Dname"></div>
176. </div>
177. <div class="modal-footer">
178. <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
179. <button type="submit" class="btn btn-success" id="submit" name="submit">ส่งข้อมูล</button>
180. </div>
181. </div>
182. </div>
183. </div>
184.
185. <!-- End Modal -->
186.
187. </div>
188. </form>
189.</div>
191.<script src="js/bootstrap.min.js"></script>
192.<script src="js/jquery.js"></script>
193.</body>
194.</html>
