computeroverhauls

Untitled

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