API tools faq
paste
Advertisement
computeroverhauls

Untitled

computeroverhauls
Jul 12th, 2017
484
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 13.94 KB | None | 0 0
raw download clone embed print report
  1. <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  2. <script>
  3. // handles the click event for link 1, sends the query
  4. function getOutput() {
  5. var model = document.getElementById('model').value;
  6. var carrier = document.getElementById('carrier').value;
  7. var condition = document.getElementById('condition').value;
  8. var storage = document.getElementById('storage').value;
  9. if(model == 'none' || carrier == 'none' || condition == 'none' || storage == 'none' || storage == null){
  10. var container = document.getElementById('output');
  11. container.innerHTML = '<h3>Please fill out all of the form fields</h3>';
  12. $('#outputcont').show(300);
  13. }else{
  14. getRequest(
  15. 'quotest/PHPExcel/getQuote.php?model=' + model + "&condition=" + condition + '&storage=' + storage + '&carrier=' + carrier , // URL for the PHP file
  16. drawOutput, // handle successful request
  17. drawError // handle error
  18. );
  19. scrollTo(0, 800);
  20. }
  21. return false;
  22. }
  23. // handles drawing an error message
  24. function drawError() {
  25. var container = document.getElementById('output');
  26. container.innerHTML = 'Please try again later or contact us at info@computeroverhauls.com';
  27. }
  28. // handles the response, adds the html
  29. function drawOutput(responseText) {
  30. $('#outputcont').show(300);
  31. var container = document.getElementById('output');
  32. container.innerHTML = responseText;
  33. }
  34. // helper function for cross-browser request object
  35. function getRequest(url, success, error) {
  36. var req = false;
  37. try{
  38. // most browsers
  39. req = new XMLHttpRequest();
  40. } catch (e){
  41. // IE
  42. try{
  43. req = new ActiveXObject("Msxml2.XMLHTTP");
  44. } catch(e) {
  45. // try an older version
  46. try{
  47. req = new ActiveXObject("Microsoft.XMLHTTP");
  48. } catch(e) {
  49. return false;
  50. }
  51. }
  52. }
  53. if (!req) return false;
  54. if (typeof success != 'function') success = function () {};
  55. if (typeof error!= 'function') error = function () {};
  56. req.onreadystatechange = function(){
  57. if(req.readyState == 4) {
  58. return req.status === 200 ?
  59. success(req.responseText) : error(req.status);
  60. }
  61. }
  62. req.open("GET", url, true);
  63. req.send('');
  64. return req;
  65. }
  66. $(document).ready(function(){
  67. $("#1").hide(); //Hides all the capacity fields
  68. $("#2").hide();
  69. $("#3").hide();
  70. $("#4").hide();
  71. $("#5").hide();
  72. $('.carriercont').hide();
  73. $('.condcont').hide();
  74. $('#model').on('change', function() { //Removes the placeholder after anything has been selected
  75. if ( this.value !== 'none') //Also fades in the next dropdown
  76. {
  77. $("#modelplaceholder").hide();
  78. //$(".storagecont").show(300);
  79. if($(this).val() == "ip7p"){ //Only show the right capacity field for the right model, hide all others
  80. $('#storage').val($('256GB'));
  81. $("#1").show(300);
  82. $('#1').attr("class", "storagecont valid");
  83. $("#2").show(300);
  84. $('#2').attr("class", "storagecont valid");
  85. $("#3").hide(300);
  86. $('#3').attr("class", "storagecont invalid");
  87. $("#4").show(300);
  88. $('#4').attr("class", "storagecont valid");
  89. $("#5").hide(300);
  90. $('#5').attr("class", "storagecont invalid");
  91. }
  92. if($(this).val() == "ip7"){
  93. $('#storage').val($('256GB'));
  94. $("#1").show(300);
  95. $('#1').attr("class", "storagecont valid");
  96. $("#2").show(300);
  97. $('#2').attr("class", "storagecont valid");
  98. $("#3").hide(300);
  99. $('#3').attr("class", "storagecont invalid");
  100. $("#4").show(300);
  101. $('#4').attr("class", "storagecont valid");
  102. $("#5").hide(300);
  103. $('#5').attr("class", "storagecont invalid");
  104. }
  105. if($(this).val() == "ip6sp"){
  106. $('#storage').val($('128GB'));
  107. $("#1").hide(300);
  108. $("#1").attr("class", 'storagecont invalid');
  109. $("#2").show(300);
  110. $('#2').attr("class", "storagecont valid");
  111. $("#3").show(300);
  112. $('#3').attr("class", "storagecont valid");
  113. $("#4").show(300);
  114. $('#4').attr("class", "storagecont valid");
  115. $("#5").show(300);
  116. $('#5').attr("class", "storagecont valid");
  117. }
  118. if($(this).val() == "ip6s"){
  119. $('#storage').val($('128GB'));
  120. $("#1").hide(300);
  121. $("#1").attr("class", 'storagecont invalid');
  122. $("#2").show(300);
  123. $('#2').attr("class", "storagecont valid");
  124. $("#3").show(300);
  125. $('#3').attr("class", "storagecont valid");
  126. $("#4").show(300);
  127. $('#4').attr("class", "storagecont valid");
  128. $("#5").show(300);
  129. $('#5').attr("class", "storagecont valid");
  130. }
  131. if($(this).val() == "ipse"){
  132. $("#1").hide(300);
  133. $("#1").attr("class", 'storagecont invalid');
  134. $("#2").show(300);
  135. $('#2').attr("class", "storagecont valid");
  136. $("#3").show(300);
  137. $('#3').attr("class", "storagecont valid");
  138. $("#4").show(300);
  139. $('#4').attr("class", "storagecont valid");
  140. $("#5").show(300);
  141. $('#5').attr("class", "storagecont valid");
  142. }
  143. if($(this).val() == "ip6p"){
  144. $('#storage').val($('128GB'));
  145. $("#1").hide(300);
  146. $("#1").attr("class", 'storagecont invalid');
  147. $("#2").show(300);
  148. $('#2').attr("class", "storagecont valid");
  149. $("#3").show(300);
  150. $('#3').attr("class", "storagecont valid");
  151. $("#4").hide(300);
  152. $('#4').attr("class", "storagecont invalid");
  153. $("#5").show(300);
  154. $('#5').attr("class", "storagecont valid");
  155. }
  156. if($(this).val() == "ip6"){
  157. $('#storage').val($('128GB'));
  158. $("#1").hide(300);
  159. $("#1").attr("class", 'storagecont invalid');
  160. $("#2").show(300);
  161. $('#2').attr("class", "storagecont valid");
  162. $("#3").show(300);
  163. $('#3').attr("class", "storagecont valid");
  164. $("#4").hide(300);
  165. $('#4').attr("class", "storagecont invalid");
  166. $("#5").show(300);
  167. $('#5').attr("class", "storagecont valid");
  168. }
  169. $("#storageHeader").show(300);
  170. }
  171. });
  172. $('#storage').on('change', function() {
  173. if ( this.value !== 'none' && $('#carrier').val() == 'none')
  174. {
  175. $(".carriercont").show(300);
  176. $("#carrierHeader").show(300, function(){
  177. $('html, body').animate({
  178. scrollTop: $("#carrierHeader").offset().top
  179. }, 0);
  180. });
  181. $("#storageplaceholder").hide();
  182. }
  183. });
  184. $('#carrier').on('change', function() {
  185. if ( this.value !== 'none' && $('#condition').val() == 'none')
  186. {
  187. $("#conditionHeader").show(300);
  188. $(".condcont").show(300);
  189. $("#carrierplaceholder").hide();
  190. }
  191. });
  192. $('#condition').on('change', function() {
  193. if (this.value != 'none')
  194. {
  195. var cond = '#' + $(this).val().toLowerCase();
  196. $(".blurb:not(" + cond +")").hide(300, function(){
  197. $(cond).show(300);
  198. });
  199. $(".btn").fadeIn(300);
  200. $("#conditionplaceholder").hide();
  201. }else{
  202. $(cond).show(300);
  203. }
  204.  
  205. });
  206. $('.modelscont').on('click', function() {
  207. var model = $(this).attr("id");
  208. var modelcont = "#" + model;
  209. if($('#model').val() == "none"){
  210. $('#model').val(model);
  211. $('.modelscont').fadeOut(function() {
  212. $(modelcont).fadeIn();
  213. $('#model').change();
  214. });
  215. }else{
  216. $(modelcont).fadeOut(function(){
  217. $('.modelscont').fadeIn();
  218. $('#model').val("none");
  219. });
  220. }
  221. });
  222. $('.storagecont').on('click', function() {
  223. var storage = $(this).text();
  224. var id = $(this).attr("id");
  225. var storagecont = "#" + id;
  226. if($('#storage').val() == null){
  227. $('.storagecont').hide(300, function(){
  228. $(storagecont).show(300);
  229. $('#storage').val(storage);
  230. $('#storage').change();
  231. });
  232. }else{
  233. $('.valid').show(300);
  234. $('#storage').val(null);
  235. }
  236. });
  237. $('.carriercont').on('click', function() {
  238. var carrier = $(this).attr("name");
  239. var id = $(this).attr("id");
  240. var carriercont = "#" + id;
  241. if($('#carrier').val() == "none"){
  242. $('#carrier').val(carrier);
  243. $('.carriercont').fadeOut(function() {
  244. $(carriercont).fadeIn();
  245. $('#carrier').change();
  246. });
  247. }else{
  248. $(carriercont).fadeOut(function(){
  249. $('.carriercont').fadeIn();
  250. $('#carrier').val("none");
  251. });
  252. }
  253. });
  254. $('.condcont').on('click', function() {
  255. var condition = $(this).attr("name");
  256. var condcont = "#" + $(this).attr("id");
  257.  
  258. if($('#condition').val() == "none"){
  259. $('#condition').val(condition);
  260. $('.condcont').fadeOut(function() {
  261. $(condcont).fadeIn();
  262. $('#condition').change();
  263. });
  264. }else{
  265. $(condcont).fadeOut(function(){
  266. $('.condcont').fadeIn();
  267. $('#condition').val("none");
  268. });
  269. }
  270. });
  271. $('#restart').on('click', function(){
  272. scrollTo(0, 0);
  273. location.reload();
  274. });
  275.  
  276. });
  277.  
  278. </script>
  279. <!-- Google Code for Add to Cart Conversion Page
  280. In your html page, add the snippet and call goog_report_conversion
  281. when someone clicks on the chosen link or button. -->
  282.  
  283. <style>
  284. #model{
  285. display:none;
  286. }
  287. #jumbotron{
  288. font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
  289. }
  290. .itemcont {
  291. overflow: hidden;
  292. margin:15px;
  293. align-items: center;
  294. }
  295. .itemheader{
  296. margin-right: auto;
  297. margin-bottom:10px;
  298. }
  299. .modelscont{
  300. display:inline-block;
  301. background-color:white;
  302. border-radius:5px;
  303. padding:20px 20px 0px 20px;
  304. transition:background-color .25s, color .25s;
  305. user-select: none;
  306. -moz-user-select: none;
  307. -khtml-user-select: none;
  308. -webkit-user-select: none;
  309. -o-user-select: none;
  310. cursor:hand;
  311. margin-bottom:20px;
  312. border:solid #a5a5a5 1px;
  313. }
  314. .storagecont{
  315. display:none;
  316. display:inline-block;
  317. background-color:white;
  318. border-radius:5px;
  319. padding:10px 20px 10px 20px;
  320. transition:background-color .25s, color .25s;
  321. user-select: none;
  322. -moz-user-select: none;
  323. -khtml-user-select: none;
  324. -webkit-user-select: none;
  325. -o-user-select: none;
  326. cursor:hand;
  327. margin-bottom:20px;
  328. border:solid #a5a5a5 1px;
  329. }
  330. .storagecont:hover {
  331. background-color:rgba(121, 169, 128, 1);
  332. }
  333. .carriercont{
  334. display:none;
  335. display:inline-block;
  336. background-color:white;
  337. border-radius:5px;
  338. padding:10px 20px 10px 20px;
  339. transition:background-color .25s, color .25s;
  340. user-select: none;
  341. -moz-user-select: none;
  342. -khtml-user-select: none;
  343. -webkit-user-select: none;
  344. -o-user-select: none;
  345. cursor:hand;
  346. margin-bottom:20px;
  347. border:solid #a5a5a5 1px;
  348. }
  349. .carriercont:hover {
  350. background-color:rgba(121, 169, 128, 1);
  351. }
  352. .condcont{
  353. display:none;
  354. display:inline-block;
  355. background-color:white;
  356. border-radius:5px;
  357. padding:10px 20px 10px 20px;
  358. transition:background-color .25s, color .25s;
  359. user-select: none;
  360. -moz-user-select: none;
  361. -khtml-user-select: none;
  362. -webkit-user-select: none;
  363. -o-user-select: none;
  364. cursor:hand;
  365. margin-bottom:20px;
  366. border:solid #a5a5a5 1px;
  367. }
  368. .condcont:hover {
  369. background-color:rgba(121, 169, 128, 1);
  370. }
  371. #outputcont{
  372. display:none;
  373. margin:20px;
  374. }
  375. #output{
  376. font-size:3em;
  377. margin:20px;
  378. }
  379. .modelscont:hover {
  380. background-color:rgba(121, 169, 128, 1);
  381. }
  382. .models{
  383. height:75px;
  384. width:75px;
  385. }
  386. #model{
  387. margin:0 auto;
  388. }
  389. #output{
  390. margin-top:50px;
  391. }
  392. .btn {
  393. display:none;
  394. background-color:#44c767;
  395. -moz-border-radius:28px;
  396. -webkit-border-radius:28px;
  397. border-radius:10px;
  398. border:1px solid #18ab29;
  399. cursor:pointer;
  400. color:#ffffff;
  401. font-family:Arial;
  402. font-size:17px;
  403. padding:16px 31px;
  404. text-decoration:none;
  405. text-shadow:0px 1px 0px #2f6627;
  406. outline:none;
  407. }
  408. .btn:hover {
  409. background-color:#5cbf2a;
  410. }
  411. .btn:active {
  412. background-color:#169c23;
  413. position:relative;
  414. top:1px;
  415. }
  416. #jumbotron {
  417. width:100%;
  418. margin:0 auto;
  419. text-align:center;
  420. padding:20px 0 20px 0;
  421. border-radius:3px;
  422. }
  423. #5 {
  424. display:none;
  425. }
  426. #items{
  427. width:75%;
  428. margin:0 auto;
  429. }
  430.  
  431. select {
  432. border: 1px solid #ccc;
  433. border-radius: 3px;
  434. overflow: hidden;
  435. background: #fafafa ;
  436. display:inline-block;
  437. width:100px;
  438. }
  439.  
  440. select option {
  441. padding: 5px 8px;
  442. width: 130%;
  443. border: none;
  444. box-shadow: none;
  445. background: transparent;
  446. background-image: none;
  447. -webkit-appearance: none;
  448. }
  449.  
  450. select select:focus {
  451. outline: none;
  452. }
  453. #output{
  454. transition:all .25s;
  455. }
  456. #output p{
  457. margin:0 auto;
  458. width:100%;
  459. font-size:.4em;
  460. line-height:1em;
  461. text-align:left;
  462. }
  463. .blurb{
  464. display:none;
  465. margin:15px;
  466. text-align:left;
  467. border:solid gray 2px;
  468. padding:10px;
  469. }
  470. #output h1 { font-size: 2em; margin: .67em 0;line-height:1em;}
  471. #output h2 { font-size: 2.5em; margin: .75em 0;}
  472. #output h3 { font-size: .6em; margin: .83em 0;line-height:1em;}
  473. h4 { margin: 1.12em 0 }
  474. h5 { font-size: .83em; margin: 1.5em 0 }
  475. h6 { font-size: .75em; margin: 1.67em 0 }
  476. #output ul {
  477. list-style-type:circle;
  478. }
  479. #output ul li{
  480. display:list-item;
  481. list-style:circle;
  482. margin:0 auto;
  483. font-size:.4em;
  484. line-height:1em;
  485. text-align:center;
  486. }
  487. #listcont{
  488. width:50%;
  489. margin:0 auto;
  490. }
  491. #mainhead{
  492. font-size:1.5em;
  493. margin-bottom:15px;
  494. }
  495. .checklist{
  496. display:flex;
  497. }
  498. </style>
  499. <!--/*
  500.  
  501. */
  502. -->
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!