Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
- <script>
- // handles the click event for link 1, sends the query
- function getOutput() {
- var model = document.getElementById('model').value;
- var carrier = document.getElementById('carrier').value;
- var condition = document.getElementById('condition').value;
- var storage = document.getElementById('storage').value;
- if(model == 'none' || carrier == 'none' || condition == 'none' || storage == 'none' || storage == null){
- var container = document.getElementById('output');
- container.innerHTML = '<h3>Please fill out all of the form fields</h3>';
- $('#outputcont').show(300);
- }else{
- getRequest(
- 'quotest/PHPExcel/getQuote.php?model=' + model + "&condition=" + condition + '&storage=' + storage + '&carrier=' + carrier , // URL for the PHP file
- drawOutput, // handle successful request
- drawError // handle error
- );
- scrollTo(0, 800);
- }
- return false;
- }
- // handles drawing an error message
- function drawError() {
- var container = document.getElementById('output');
- container.innerHTML = 'Please try again later or contact us at info@computeroverhauls.com';
- }
- // handles the response, adds the html
- function drawOutput(responseText) {
- $('#outputcont').show(300);
- var container = document.getElementById('output');
- container.innerHTML = responseText;
- }
- // helper function for cross-browser request object
- function getRequest(url, success, error) {
- var req = false;
- try{
- // most browsers
- req = new XMLHttpRequest();
- } catch (e){
- // IE
- try{
- req = new ActiveXObject("Msxml2.XMLHTTP");
- } catch(e) {
- // try an older version
- try{
- req = new ActiveXObject("Microsoft.XMLHTTP");
- } catch(e) {
- return false;
- }
- }
- }
- if (!req) return false;
- if (typeof success != 'function') success = function () {};
- if (typeof error!= 'function') error = function () {};
- req.onreadystatechange = function(){
- if(req.readyState == 4) {
- return req.status === 200 ?
- success(req.responseText) : error(req.status);
- }
- }
- req.open("GET", url, true);
- req.send('');
- return req;
- }
- $(document).ready(function(){
- $('#0').hide();
- $("#1").hide(); //Hides all the capacity fields
- $("#2").hide();
- $("#3").hide();
- $("#4").hide();
- $("#5").hide();
- $('.carriercont').hide();
- $('.condcont').hide();
- $('#model').on('change', function() { //Removes the placeholder after anything has been selected
- if ( this.value !== 'none') //Also fades in the next dropdown
- {
- $("#modelplaceholder").hide();
- //$(".storagecont").show(300);
- if($(this).val() == "ipadpro212"){
- $('#storage').val($('256GB'));
- $('#0').show(300);
- $('#0').attr('class', 'storagecont valid');
- $("#1").show(300);
- $('#1').attr("class", "storagecont valid");
- $("#2").hide(300);
- $('#2').attr("class", "storagecont invalid");
- $("#3").show(300);
- $('#3').attr("class", "storagecont valid");
- $("#4").hide(300);
- $('#4').attr("class", "storagecont invalid");
- $("#5").hide(300);
- $('#5').attr("class", "storagecont invalid");
- }
- if($(this).val() == "ipadpro210"){
- $('#storage').val($('256GB'));
- $('#0').show(300);
- $('#0').attr('class', 'storagecont valid');
- $("#1").show(300);
- $('#1').attr("class", "storagecont valid");
- $("#2").hide(300);
- $('#2').attr("class", "storagecont invalid");
- $("#3").show(300);
- $('#3').attr("class", "storagecont valid");
- $("#4").hide(300);
- $('#4').attr("class", "storagecont invalid");
- $("#5").hide(300);
- $('#5').attr("class", "storagecont invalid");
- }
- if($(this).val() == "ipadpro210"){
- $('#storage').val($('256GB'));
- $('#0').show(300);
- $('#0').attr('class', 'storagecont valid');
- $("#1").show(300);
- $('#1').attr("class", "storagecont valid");
- $("#2").hide(300);
- $('#2').attr("class", "storagecont invalid");
- $("#3").show(300);
- $('#3').attr("class", "storagecont valid");
- $("#4").hide(300);
- $('#4').attr("class", "storagecont invalid");
- $("#5").hide(300);
- $('#5').attr("class", "storagecont invalid");
- }
- if($(this).val() == "ipadpro12"){ //Only show the right capacity field for the right model, hide all others
- $('#storage').val($('256GB'));
- $("#0").hide(300);
- $("#0").attr("class", 'storagecont invalid');
- $("#1").show(300);
- $('#1').attr("class", "storagecont valid");
- $("#2").show(300);
- $('#2').attr("class", "storagecont valid");
- $("#3").hide(300);
- $('#3').attr("class", "storagecont invalid");
- $("#4").show(300);
- $('#4').attr("class", "storagecont valid");
- $("#5").hide(300);
- $('#5').attr("class", "storagecont invalid");
- }
- if($(this).val() == "ipadpro9"){ //Only show the right capacity field for the right model, hide all others
- $('#storage').val($('256GB'));
- $("#0").hide(300);
- $("#0").attr("class", 'storagecont invalid');
- $("#1").show(300);
- $('#1').attr("class", "storagecont valid");
- $("#2").show(300);
- $('#2').attr("class", "storagecont valid");
- $("#3").hide(300);
- $('#3').attr("class", "storagecont invalid");
- $("#4").show(300);
- $('#4').attr("class", "storagecont valid");
- $("#5").hide(300);
- $('#5').attr("class", "storagecont invalid");
- }
- if($(this).val() == "ipadair2"){
- $('#storage').val($('128GB'));
- $("#0").hide(300);
- $("#0").attr("class", 'storagecont invalid');
- $("#1").hide(300);
- $("#1").attr("class", 'storagecont invalid');
- $("#2").show(300);
- $('#2').attr("class", "storagecont valid");
- $("#3").show(300);
- $('#3').attr("class", "storagecont valid");
- $("#4").hide(300);
- $('#4').attr("class", "storagecont invalid");
- $("#5").show(300);
- $('#5').attr("class", "storagecont valid");
- }
- if($(this).val() == "ipadair"){
- $('#storage').val($('128GB'));
- $("#0").hide(300);
- $("#0").attr("class", 'storagecont invalid');
- $("#1").hide(300);
- $("#1").attr("class", 'storagecont invalid');
- $("#2").show(300);
- $('#2').attr("class", "storagecont valid");
- $("#3").show(300);
- $('#3').attr("class", "storagecont valid");
- $("#4").show(300);
- $('#4').attr("class", "storagecont valid");
- $("#5").show(300);
- $('#5').attr("class", "storagecont valid");
- }
- if($(this).val() == "ipad5"){
- $("#0").hide(300);
- $("#0").attr("class", 'storagecont invalid');
- $("#1").hide(300);
- $("#1").attr("class", 'storagecont invalid');
- $("#2").show(300);
- $('#2').attr("class", "storagecont valid");
- $("#3").hide(300);
- $('#3').attr("class", "storagecont invalid");
- $("#4").show(300);
- $('#4').attr("class", "storagecont valid");
- $("#5").hide(300);
- $('#5').attr("class", "storagecont invalid");
- }
- if($(this).val() == "ipadmini4"){
- $('#storage').val($('128GB'));
- $("#0").hide(300);
- $("#0").attr("class", 'storagecont invalid');
- $("#1").hide(300);
- $("#1").attr("class", 'storagecont invalid');
- $("#2").show(300);
- $('#2').attr("class", "storagecont valid");
- $("#3").show(300);
- $('#3').attr("class", "storagecont valid");
- $("#4").show(300);
- $('#4').attr("class", "storagecont valid");
- $("#5").show(300);
- $('#5').attr("class", "storagecont valid");
- }
- if($(this).val() == "ipadmini3"){
- $('#storage').val($('128GB'));
- $("#0").hide(300);
- $("#0").attr("class", 'storagecont invalid');
- $("#1").hide(300);
- $("#1").attr("class", 'storagecont invalid');
- $("#2").hide(300);
- $('#2').attr("class", "storagecont invalid");
- $("#3").show(300);
- $('#3').attr("class", "storagecont valid");
- $("#4").show(300);
- $('#4').attr("class", "storagecont valid");
- $("#5").show(300);
- $('#5').attr("class", "storagecont valid");
- }
- if($(this).val() == "ipadmini2"){
- $('#storage').val($('128GB'));
- $("#0").hide(300);
- $("#0").attr("class", 'storagecont invalid');
- $("#1").hide(300);
- $("#1").attr("class", 'storagecont invalid');
- $("#2").show(300);
- $('#2').attr("class", "storagecont valid");
- $("#3").show(300);
- $('#3').attr("class", "storagecont valid");
- $("#4").show(300);
- $('#4').attr("class", "storagecont valid");
- $("#5").show(300);
- $('#5').attr("class", "storagecont valid");
- }
- if($(this).val() == "ipad4"){
- $('#storage').val($('128GB'));
- $("#0").hide(300);
- $("#0").attr("class", 'storagecont invalid');
- $("#1").hide(300);
- $("#1").attr("class", 'storagecont invalid');
- $("#2").hide(300);
- $('#2').attr("class", "storagecont invalid");
- $("#3").show(300);
- $('#3').attr("class", "storagecont valid");
- $("#4").show(300);
- $('#4').attr("class", "storagecont valid");
- $("#5").show(300);
- $('#5').attr("class", "storagecont valid");
- }
- if($(this).val() == "ipad3"){
- $('#storage').val($('128GB'));
- $("#0").hide(300);
- $("#0").attr("class", 'storagecont invalid');
- $("#1").hide(300);
- $("#1").attr("class", 'storagecont invalid');
- $("#2").hide(300);
- $('#2').attr("class", "storagecont invalid");
- $("#3").show(300);
- $('#3').attr("class", "storagecont valid");
- $("#4").show(300);
- $('#4').attr("class", "storagecont valid");
- $("#5").show(300);
- $('#5').attr("class", "storagecont valid");
- }
- $("#storageHeader").show(300);
- }
- });
- $('#storage').on('change', function() {
- if ( this.value !== 'none' && $('#carrier').val() == 'none')
- {
- $(".carriercont").show(300);
- $("#carrierHeader").show(300);
- $("#storageplaceholder").hide();
- }
- });
- $('#carrier').on('change', function() {
- if ( this.value !== 'none' && $('#condition').val() == 'none')
- {
- $("#conditionHeader").show(300);
- $(".condcont").show(300);
- $("#carrierplaceholder").hide();
- }
- });
- $('#condition').on('change', function() {
- if (this.value != 'none')
- {
- var cond = '#' + $(this).val().toLowerCase();
- $(".blurb:not(" + cond +")").hide(300, function(){
- $(cond).show(300);
- });
- $(".btn").fadeIn(300);
- $("#conditionplaceholder").hide();
- }else{
- $(cond).show(300);
- }
- });
- $('.modelscont').on('click', function() {
- var model = $(this).attr("id");
- var modelcont = "#" + model;
- if($('#model').val() == "none"){
- $('#model').val(model);
- $('.modelscont').fadeOut(function() {
- $(modelcont).fadeIn();
- $('#model').change();
- });
- }else{
- $(modelcont).fadeOut(function(){
- $('.modelscont').fadeIn();
- $('#model').val("none");
- });
- }
- });
- $('.storagecont').on('click', function() {
- var storage = $(this).text();
- var id = $(this).attr("id");
- var storagecont = "#" + id;
- if($('#storage').val() == null){
- $('.storagecont').hide(300, function(){
- $(storagecont).show(300);
- $('#storage').val(storage);
- $('#storage').change();
- });
- }else{
- $('.valid').show(300);
- $('#storage').val(null);
- }
- });
- $('.carriercont').on('click', function() {
- var carrier = $(this).attr("name");
- var id = $(this).attr("id");
- var carriercont = "#" + id;
- if($('#carrier').val() == "none"){
- $('#carrier').val(carrier);
- $('.carriercont').fadeOut(function() {
- $(carriercont).fadeIn();
- $('#carrier').change();
- });
- }else{
- $(carriercont).fadeOut(function(){
- $('.carriercont').fadeIn();
- $('#carrier').val("none");
- });
- }
- });
- $('.condcont').on('click', function() {
- var condition = $(this).attr("name");
- var condcont = "#" + $(this).attr("id");
- if($('#condition').val() == "none"){
- $('#condition').val(condition);
- $('.condcont').fadeOut(function() {
- $(condcont).fadeIn();
- $('#condition').change();
- });
- }else{
- $(condcont).fadeOut(function(){
- $('.condcont').fadeIn();
- $('#condition').val("none");
- });
- }
- });
- $('#restart').on('click', function(){
- scrollTo(0, 0);
- location.reload();
- });
- });
- </script>
- <!-- Google Code for Add to Cart Conversion Page
- In your html page, add the snippet and call goog_report_conversion
- when someone clicks on the chosen link or button. -->
- <style>
- #model{
- display:none;
- }
- #jumbotron{
- font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
- }
- .itemcont {
- overflow: hidden;
- margin:15px;
- align-items: center;
- }
- .itemheader{
- margin-right: auto;
- margin-bottom:10px;
- }
- .modelscont{
- display:inline-block;
- background-color:white;
- border-radius:5px;
- padding:20px 20px 0px 20px;
- transition:background-color .25s, color .25s;
- user-select: none;
- -moz-user-select: none;
- -khtml-user-select: none;
- -webkit-user-select: none;
- -o-user-select: none;
- cursor:hand;
- margin-bottom:20px;
- border:solid #a5a5a5 1px;
- }
- .storagecont{
- display:none;
- display:inline-block;
- background-color:white;
- border-radius:5px;
- padding:10px 20px 10px 20px;
- transition:background-color .25s, color .25s;
- user-select: none;
- -moz-user-select: none;
- -khtml-user-select: none;
- -webkit-user-select: none;
- -o-user-select: none;
- cursor:hand;
- margin-bottom:20px;
- border:solid #a5a5a5 1px;
- }
- .storagecont:hover {
- background-color:rgba(121, 169, 128, 1);
- }
- .carriercont{
- display:none;
- display:inline-block;
- background-color:white;
- border-radius:5px;
- padding:10px 20px 10px 20px;
- transition:background-color .25s, color .25s;
- user-select: none;
- -moz-user-select: none;
- -khtml-user-select: none;
- -webkit-user-select: none;
- -o-user-select: none;
- cursor:hand;
- margin-bottom:20px;
- border:solid #a5a5a5 1px;
- }
- .carriercont:hover {
- background-color:rgba(121, 169, 128, 1);
- }
- .condcont{
- display:none;
- display:inline-block;
- background-color:white;
- border-radius:5px;
- padding:10px 20px 10px 20px;
- transition:background-color .25s, color .25s;
- user-select: none;
- -moz-user-select: none;
- -khtml-user-select: none;
- -webkit-user-select: none;
- -o-user-select: none;
- cursor:hand;
- margin-bottom:20px;
- border:solid #a5a5a5 1px;
- }
- .condcont:hover {
- background-color:rgba(121, 169, 128, 1);
- }
- #outputcont{
- display:none;
- margin:20px;
- }
- #output{
- font-size:3em;
- margin:20px;
- }
- .modelscont:hover {
- background-color:rgba(121, 169, 128, 1);
- }
- .models{
- height:75px;
- }
- #model{
- margin:0 auto;
- }
- #output{
- margin-top:50px;
- }
- .btn {
- display:none;
- background-color:#44c767;
- -moz-border-radius:28px;
- -webkit-border-radius:28px;
- border-radius:10px;
- border:1px solid #18ab29;
- cursor:pointer;
- color:#ffffff;
- font-family:Arial;
- font-size:17px;
- padding:16px 31px;
- text-decoration:none;
- text-shadow:0px 1px 0px #2f6627;
- outline:none;
- }
- .btn:hover {
- background-color:#5cbf2a;
- }
- .btn:active {
- background-color:#169c23;
- position:relative;
- top:1px;
- }
- #jumbotron {
- width:100%;
- margin:0 auto;
- text-align:center;
- padding:20px 0 20px 0;
- border-radius:3px;
- }
- #5 {
- display:none;
- }
- #items{
- width:75%;
- margin:0 auto;
- }
- select {
- border: 1px solid #ccc;
- border-radius: 3px;
- overflow: hidden;
- background: #fafafa ;
- display:inline-block;
- width:100px;
- }
- select option {
- padding: 5px 8px;
- width: 130%;
- border: none;
- box-shadow: none;
- background: transparent;
- background-image: none;
- -webkit-appearance: none;
- }
- select select:focus {
- outline: none;
- }
- #output{
- transition:all .25s;
- }
- #output p{
- margin:0 auto;
- width:100%;
- font-size:.4em;
- line-height:1em;
- text-align:left;
- }
- .blurb{
- display:none;
- margin:15px;
- text-align:left;
- border:solid gray 2px;
- padding:10px;
- }
- #output h1 { font-size: 2em; margin: .67em 0;line-height:1em;}
- #output h2 { font-size: 2.5em; margin: .75em 0;}
- #output h3 { font-size: .6em; margin: .83em 0;line-height:1em;}
- h4 { margin: 1.12em 0 }
- h5 { font-size: .83em; margin: 1.5em 0 }
- h6 { font-size: .75em; margin: 1.67em 0 }
- #output ul {
- list-style-type:circle;
- }
- #output ul li{
- display:list-item;
- list-style:circle;
- margin:0 auto;
- font-size:.4em;
- line-height:1em;
- text-align:center;
- }
- #listcont{
- width:50%;
- margin:0 auto;
- }
- #mainhead{
- font-size:1.5em;
- margin-bottom:15px;
- }
- .checklist{
- display:flex;
- }
- </style>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement