API tools faq
paste
Advertisement
Guest User

palarca

a guest
May 16th, 2018
251
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 15.87 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta name="viewport" content="width=device-width, initial-scale=1">
  5. <!-- Add icon library -->
  6. <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  7. <style>
  8. body {font-family: Arial, Helvetica, sans-serif;}
  9. * {box-sizing: border-box;}
  10.  
  11. .input-container {
  12. display: -ms-flexbox; /* IE10 */
  13. display: flex;
  14. width: 100%;
  15. margin-bottom: 15px;
  16. }
  17.  
  18. .icon {
  19. padding: 10px;
  20. background: dodgerblue;
  21. color: white;
  22. min-width: 50px;
  23. text-align: center;
  24. }
  25.  
  26. .input-field {
  27. width: 100%;
  28. padding: 10px;
  29. outline: none;
  30. }
  31.  
  32. .input-field:focus {
  33. border: 2px solid dodgerblue;
  34. }
  35.  
  36. /* Set a style for the submit button */
  37. .btn {
  38. background-color: dodgerblue;
  39. color: white;
  40. padding: 15px 20px;
  41. border: none;
  42. cursor: pointer;
  43. width: 100%;
  44. opacity: 0.9;
  45. }
  46.  
  47. .btn:hover {
  48. opacity: 1;
  49. }
  50. p {
  51. padding: 1px;
  52. margin-top: 5px;
  53. }
  54. .lol { font-family: tahoma;text-decoration:none; }
  55.  
  56. .button {
  57. background-color: blue;
  58. border: none;
  59. color: white;
  60. padding: 15px 32px;
  61. text-align: center;
  62. text-decoration: none;
  63. display: inline-block;
  64. font-size: 16px;
  65. margin: 4px 2px;
  66. cursor: pointer;
  67. float: right;
  68. }
  69.  
  70.  
  71.  
  72.  
  73. .autocomplete-items {
  74. position: absolute;
  75. border: 1px solid #d4d4d4;
  76. border-bottom: none;
  77. border-top: none;
  78. z-index: 99;
  79. /*position the autocomplete items to be the same width as the container:*/
  80. top: 100%;
  81. left: 0;
  82. right: 0;
  83. }
  84. .autocomplete-items div {
  85. padding: 10px;
  86. cursor: pointer;
  87. background-color: #fff;
  88. border-bottom: 1px solid #d4d4d4;
  89. }
  90. .autocomplete-items div:hover {
  91. /*when hovering an item:*/
  92. background-color: #e9e9e9;
  93. }
  94. .autocomplete-active {
  95. /*when navigating through the items using the arrow keys:*/
  96. background-color: DodgerBlue !important;
  97. color: #ffffff;
  98. }
  99. .autocomplete {
  100. /*the container must be positioned relative:*/
  101. position: relative;
  102. display: inline-block;
  103. }
  104. .booking { display: none;overflow: hidden; }
  105. .next { border: 1px solid gray;cursor:pointer;padding: 3px 8px;background-color:blue;color:white; }
  106. </style>
  107. </head>
  108. <body>
  109.  
  110. <form action="submit.php" style="max-width:500px;margin:auto" method="post">
  111. <h2><u>Personal Info:</u></h2>
  112. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <i>First Name &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Last Name</i>
  113. <div class="input-container">
  114. <i class="fa fa-user icon"></i>
  115. <input class="input-field" type="text" placeholder="First Name" name="first-name">
  116. <i class="fa fa-user icon"></i>
  117. <input class="input-field" type="text" placeholder="Last Name" name="last-name">
  118. </div>
  119. <center><i>Address</i></center><div class="input-container">
  120. <i class="fa fa-flag icon"></i>
  121. <input class="input-field" type="text" placeholder="Address" name="address">
  122. </div>
  123. <center><i>City</i></center><div class="input-container">
  124. <i class="fa fa-flag icon"></i>
  125. <input class="input-field" type="text" placeholder="City" name="city">
  126. </div>
  127. <center><i>State</i></center><div class="input-container">
  128. <i class="fa fa-flag icon"></i>
  129. <input class="input-field" type="text" placeholder="State" name="state">
  130. </div>
  131. <center><i>E-mail</i></center><div class="input-container">
  132. <i class="fa fa-envelope icon"></i>
  133. <input class="input-field" type="text" placeholder="palarcatravelagency@example.com" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,3}$" name="email">
  134. </div>
  135. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <i>Zip Code &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Phone Number</i><div class="input-container">
  136. <i class="fa fa-flag icon"></i>
  137. <input class="input-field" type="text" placeholder="ZipCode" name="zipcode">
  138. <i class="fa fa-phone icon"></i>
  139. <input class="input-field" type="text" placeholder="+639661694787" name="phonenumber">
  140. </div>
  141. <br><Br>
  142. <a class="next">NEXT</a>
  143. <div class="booking">
  144. <h2><u>Booking Form:</u></h2>
  145. <div class="autocomplete" style="width:500px;">
  146. <center><i>From:</i></center><div class="input-container">
  147. <i class="fa fa-plane icon"></i>
  148. <input class="input-field" type="text" id="myInput" placeholder="Select Origin" name="origin">
  149. </div></div>
  150. <div class="autocomplete" style="width:500px;">
  151. <center><i>To:</i></center> <div class="input-container">
  152. <i class="fa fa-plane icon"></i>
  153. <input class="input-field" type="text" id="destine" placeholder="Select Destination" name="destination">
  154. </div></div><Br>
  155. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <i>departure date &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; return date</i>
  156. <div class="input-container">
  157. <i class="fa fa-calendar-check-o icon"></i>
  158. <input class="input-field" type="date" placeholder="Check In" name="check-in">
  159. <i class="fa fa-calendar-times-o icon"></i>
  160. <input class="input-field" type="date" placeholder="Check-out" name="email">
  161. </div>
  162. <br><br><br>
  163. <center><a href="#" class="button" type="button" name="button">Next</a></center>
  164. </form>
  165. </div>
  166. <script>
  167. function autocomplete(inp, arr) {
  168. var currentFocus;
  169. inp.addEventListener("input", function(e) {
  170. var a, b, i, val = this.value;
  171. closeAllLists();
  172. if (!val) { return false;}
  173. currentFocus = -1;
  174. a = document.createElement("DIV");
  175. a.setAttribute("id", this.id + "autocomplete-list");
  176. a.setAttribute("class", "autocomplete-items");
  177. this.parentNode.appendChild(a);
  178. for (i = 0; i < arr.length; i++) {
  179. if (arr[i].substr(0, val.length).toUpperCase() == val.toUpperCase()) {
  180. b = document.createElement("DIV");
  181. b.innerHTML = "<strong>" + arr[i].substr(0, val.length) + "</strong>";
  182. b.innerHTML += arr[i].substr(val.length);
  183. b.innerHTML += "<input type='hidden' value='" + arr[i] + "'>";
  184. b.addEventListener("click", function(e) {
  185. inp.value = this.getElementsByTagName("input")[0].value;
  186. closeAllLists();
  187. });
  188. a.appendChild(b);
  189. }
  190. }
  191. });
  192. inp.addEventListener("keydown", function(e) {
  193. var x = document.getElementById(this.id + "autocomplete-list");
  194. if (x) x = x.getElementsByTagName("div");
  195. if (e.keyCode == 40) {
  196. currentFocus++;
  197. addActive(x);
  198. } else if (e.keyCode == 38) {
  199. currentFocus--;
  200.  
  201. addActive(x);
  202. } else if (e.keyCode == 13) {
  203. e.preventDefault();
  204. if (currentFocus > -1) {
  205. if (x) x[currentFocus].click();
  206. }
  207. }
  208. });
  209. function addActive(x) {
  210. if (!x) return false;
  211. removeActive(x);
  212. if (currentFocus >= x.length) currentFocus = 0;
  213. if (currentFocus < 0) currentFocus = (x.length - 1);
  214. x[currentFocus].classList.add("autocomplete-active");
  215. }
  216. function removeActive(x) {
  217. for (var i = 0; i < x.length; i++) {
  218. x[i].classList.remove("autocomplete-active");
  219. }
  220. }
  221. function closeAllLists(elmnt) {
  222. var x = document.getElementsByClassName("autocomplete-items");
  223. for (var i = 0; i < x.length; i++) {
  224. if (elmnt != x[i] && elmnt != inp) {
  225. x[i].parentNode.removeChild(x[i]);
  226. }
  227. }
  228. }
  229. document.addEventListener("click", function (e) {
  230. closeAllLists(e.target);
  231. });
  232. }
  233.  
  234. var countries = ["Afghanistan","Albania","Algeria","Andorra","Angola","Anguilla","Antigua & Barbuda","Argentina","Armenia","Aruba","Australia","Austria","Azerbaijan","Bahamas","Bahrain","Bangladesh","Barbados","Belarus","Belgium","Belize","Benin","Bermuda","Bhutan","Bolivia","Bosnia & Herzegovina","Botswana","Brazil","British Virgin Islands","Brunei","Bulgaria","Burkina Faso","Burundi","Cambodia","Cameroon","Canada","Cape Verde","Cayman Islands","Central Arfrican Republic","Chad","Chile","China","Colombia","Congo","Cook Islands","Costa Rica","Cote D Ivoire","Croatia","Cuba","Curacao","Cyprus","Czech Republic","Denmark","Djibouti","Dominica","Dominican Republic","Ecuador","Egypt","El Salvador","Equatorial Guinea","Eritrea","Estonia","Ethiopia","Falkland Islands","Faroe Islands","Fiji","Finland","France","French Polynesia","French West Indies","Gabon","Gambia","Georgia","Germany","Ghana","Gibraltar","Greece","Greenland","Grenada","Guam","Guatemala","Guernsey","Guinea","Guinea Bissau","Guyana","Haiti","Honduras","Hong Kong","Hungary","Iceland","India","Indonesia","Iran","Iraq","Ireland","Isle of Man","Israel","Italy","Jamaica","Japan","Jersey","Jordan","Kazakhstan","Kenya","Kiribati","Kosovo","Kuwait","Kyrgyzstan","Laos","Latvia","Lebanon","Lesotho","Liberia","Libya","Liechtenstein","Lithuania","Luxembourg","Macau","Macedonia","Madagascar","Malawi","Malaysia","Maldives","Mali","Malta","Marshall Islands","Mauritania","Mauritius","Mexico","Micronesia","Moldova","Monaco","Mongolia","Montenegro","Montserrat","Morocco","Mozambique","Myanmar","Namibia","Nauro","Nepal","Netherlands","Netherlands Antilles","New Caledonia","New Zealand","Nicaragua","Niger","Nigeria","North Korea","Norway","Oman","Pakistan","Palau","Palestine","Panama","Papua New Guinea","Paraguay","Peru","Philippines","Poland","Portugal","Puerto Rico","Qatar","Reunion","Romania","Russia","Rwanda","Saint Pierre & Miquelon","Samoa","San Marino","Sao Tome and Principe","Saudi Arabia","Senegal","Serbia","Seychelles","Sierra Leone","Singapore","Slovakia","Slovenia","Solomon Islands","Somalia","South Africa","South Korea","South Sudan","Spain","Sri Lanka","St Kitts & Nevis","St Lucia","St Vincent","Sudan","Suriname","Swaziland","Sweden","Switzerland","Syria","Taiwan","Tajikistan","Tanzania","Thailand","Timor L'Este","Togo","Tonga","Trinidad & Tobago","Tunisia","Turkey","Turkmenistan","Turks & Caicos","Tuvalu","Uganda","Ukraine","United Arab Emirates","United Kingdom","United States of America","Uruguay","Uzbekistan","Vanuatu","Vatican City","Venezuela","Vietnam","Virgin Islands (US)","Yemen","Zambia","Zimbabwe"];
  235.  
  236. autocomplete(document.getElementById("myInput"), countries);
  237. </script>
  238. <script>
  239. function autocomplete(inp, arr) {
  240. var currentFocus;
  241. inp.addEventListener("input", function(e) {
  242. var a, b, i, val = this.value;
  243. closeAllLists();
  244. if (!val) { return false;}
  245. currentFocus = -1;
  246. a = document.createElement("DIV");
  247. a.setAttribute("id", this.id + "autocomplete-list");
  248. a.setAttribute("class", "autocomplete-items");
  249. this.parentNode.appendChild(a);
  250. for (i = 0; i < arr.length; i++) {
  251. if (arr[i].substr(0, val.length).toUpperCase() == val.toUpperCase()) {
  252. b = document.createElement("DIV");
  253. b.innerHTML = "<strong>" + arr[i].substr(0, val.length) + "</strong>";
  254. b.innerHTML += arr[i].substr(val.length);
  255. b.innerHTML += "<input type='hidden' value='" + arr[i] + "'>";
  256. b.addEventListener("click", function(e) {
  257. inp.value = this.getElementsByTagName("input")[0].value;
  258. closeAllLists();
  259. });
  260. a.appendChild(b);
  261. }
  262. }
  263. });
  264. inp.addEventListener("keydown", function(e) {
  265. var x = document.getElementById(this.id + "autocomplete-list");
  266. if (x) x = x.getElementsByTagName("div");
  267. if (e.keyCode == 40) {
  268. currentFocus++;
  269. addActive(x);
  270. } else if (e.keyCode == 38) {
  271. currentFocus--;
  272.  
  273. addActive(x);
  274. } else if (e.keyCode == 13) {
  275. e.preventDefault();
  276. if (currentFocus > -1) {
  277. if (x) x[currentFocus].click();
  278. }
  279. }
  280. });
  281. function addActive(x) {
  282. if (!x) return false;
  283. removeActive(x);
  284. if (currentFocus >= x.length) currentFocus = 0;
  285. if (currentFocus < 0) currentFocus = (x.length - 1);
  286. x[currentFocus].classList.add("autocomplete-active");
  287. }
  288. function removeActive(x) {
  289. for (var i = 0; i < x.length; i++) {
  290. x[i].classList.remove("autocomplete-active");
  291. }
  292. }
  293. function closeAllLists(elmnt) {
  294. var x = document.getElementsByClassName("autocomplete-items");
  295. for (var i = 0; i < x.length; i++) {
  296. if (elmnt != x[i] && elmnt != inp) {
  297. x[i].parentNode.removeChild(x[i]);
  298. }
  299. }
  300. }
  301. document.addEventListener("click", function (e) {
  302. closeAllLists(e.target);
  303. });
  304. }
  305.  
  306. var countries = ["Afghanistan","Albania","Algeria","Andorra","Angola","Anguilla","Antigua & Barbuda","Argentina","Armenia","Aruba","Australia","Austria","Azerbaijan","Bahamas","Bahrain","Bangladesh","Barbados","Belarus","Belgium","Belize","Benin","Bermuda","Bhutan","Bolivia","Bosnia & Herzegovina","Botswana","Brazil","British Virgin Islands","Brunei","Bulgaria","Burkina Faso","Burundi","Cambodia","Cameroon","Canada","Cape Verde","Cayman Islands","Central Arfrican Republic","Chad","Chile","China","Colombia","Congo","Cook Islands","Costa Rica","Cote D Ivoire","Croatia","Cuba","Curacao","Cyprus","Czech Republic","Denmark","Djibouti","Dominica","Dominican Republic","Ecuador","Egypt","El Salvador","Equatorial Guinea","Eritrea","Estonia","Ethiopia","Falkland Islands","Faroe Islands","Fiji","Finland","France","French Polynesia","French West Indies","Gabon","Gambia","Georgia","Germany","Ghana","Gibraltar","Greece","Greenland","Grenada","Guam","Guatemala","Guernsey","Guinea","Guinea Bissau","Guyana","Haiti","Honduras","Hong Kong","Hungary","Iceland","India","Indonesia","Iran","Iraq","Ireland","Isle of Man","Israel","Italy","Jamaica","Japan","Jersey","Jordan","Kazakhstan","Kenya","Kiribati","Kosovo","Kuwait","Kyrgyzstan","Laos","Latvia","Lebanon","Lesotho","Liberia","Libya","Liechtenstein","Lithuania","Luxembourg","Macau","Macedonia","Madagascar","Malawi","Malaysia","Maldives","Mali","Malta","Marshall Islands","Mauritania","Mauritius","Mexico","Micronesia","Moldova","Monaco","Mongolia","Montenegro","Montserrat","Morocco","Mozambique","Myanmar","Namibia","Nauro","Nepal","Netherlands","Netherlands Antilles","New Caledonia","New Zealand","Nicaragua","Niger","Nigeria","North Korea","Norway","Oman","Pakistan","Palau","Palestine","Panama","Papua New Guinea","Paraguay","Peru","Philippines","Poland","Portugal","Puerto Rico","Qatar","Reunion","Romania","Russia","Rwanda","Saint Pierre & Miquelon","Samoa","San Marino","Sao Tome and Principe","Saudi Arabia","Senegal","Serbia","Seychelles","Sierra Leone","Singapore","Slovakia","Slovenia","Solomon Islands","Somalia","South Africa","South Korea","South Sudan","Spain","Sri Lanka","St Kitts & Nevis","St Lucia","St Vincent","Sudan","Suriname","Swaziland","Sweden","Switzerland","Syria","Taiwan","Tajikistan","Tanzania","Thailand","Timor L'Este","Togo","Tonga","Trinidad & Tobago","Tunisia","Turkey","Turkmenistan","Turks & Caicos","Tuvalu","Uganda","Ukraine","United Arab Emirates","United Kingdom","United States of America","Uruguay","Uzbekistan","Vanuatu","Vatican City","Venezuela","Vietnam","Virgin Islands (US)","Yemen","Zambia","Zimbabwe"];
  307.  
  308. autocomplete(document.getElementById("destine"), countries);
  309. </script>
  310. <script>
  311. var coll = document.getElementsByClassName("next");
  312. var i;
  313.  
  314. for (i = 0; i < coll.length; i++) {
  315. coll[i].addEventListener("click", function() {
  316. this.classList.toggle("active");
  317. var content = this.nextElementSibling;
  318. if (content.style.display === "block") {
  319. content.style.display = "none";
  320. } else {
  321. content.style.display = "block";
  322. }
  323. });
  324. }
  325. </script>
  326. </body>
  327. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!