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 == '' || carrier == '' || condition == '' || storage == ''){
- 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
- );
- }
- 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(){
- if ($(this).width() < 800) {
- $('#model').show();
- $('.modelscont').hide();
- }
- $("#1").hide(); //Hides all the capacity fields
- $("#2").hide();
- $("#3").hide();
- $("#4").hide();
- $("#5").hide();
- $('#model').change(function(e){
- if($(this).val() == "ip7p"){ //Only show the right capacity field for the right model, hide all others
- $('#storage').val($('256GB'));
- $("#1").show();
- $("#2").show();
- $("#3").hide();
- $("#4").show();
- $("#5").hide();
- }
- if($(this).val() == "ip7"){
- $('#storage').val($('256GB'));
- $("#1").show();
- $("#2").show();
- $("#3").hide();
- $("#4").show();
- $("#5").hide();
- }
- if($(this).val() == "ip6sp"){
- $('#storage').val($('128GB'));
- $("#1").hide();
- $("#2").show();
- $("#3").show();
- $("#4").show();
- $("#5").show();
- }
- if($(this).val() == "ip6s"){
- $('#storage').val($('128GB'));
- $("#1").hide();
- $("#2").show();
- $("#3").show();
- $("#4").show();
- $("#5").show();
- }
- if($(this).val() == "ipse"){
- $('#storage').val($('128GB'));
- $("#1").hide();
- $("#2").show();
- $("#3").show();
- $("#4").show();
- $("#5").show();
- }
- if($(this).val() == "ip6p"){
- $('#storage').val($('128GB'));
- $("#1").hide();
- $("#2").show();
- $("#3").show();
- $("#4").hide();
- $("#5").show();
- }
- if($(this).val() == "ip6"){
- $('#storage').val($('128GB'));
- $("#1").hide();
- $("#2").show();
- $("#3").show();
- $("#4").hide();
- $("#5").show();
- }
- });
- $('#model').on('change', function() { //Removes the placeholder after anything has been selected
- if ( this.value !== 'none') //Also fades in the next dropdown
- {
- $("#modelplaceholder").hide();
- $("#storage").show(300);
- $("#storageHeader").show(300);
- }
- });
- $('#storage').on('change', function() {
- if ( this.value !== 'none')
- {
- $("#carrier").show(300);
- $("#carrierHeader").show(300);
- $("#storageplaceholder").hide();
- }
- });
- $('#carrier').on('change', function() {
- if ( this.value !== 'none')
- {
- $("#condition").show(300);
- $("#conditionHeader").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);
- }
- });
- $("#ip7p").click(function () {
- if($('#model').val() == 'none'){
- $('#model').val('ip7p');
- $('#model').change();
- $(".modelscont").fadeOut(300);
- $(this).fadeIn(300);
- }else{
- $(this).fadeOut(function(){
- $('.modelscont').fadeIn(300);
- $('#model').val('none');
- });
- }
- });
- $("#ip7").click(function () {
- if($('#model').val() == 'none'){
- $('#model').val('ip7');
- $('#model').change();
- $(".modelscont").fadeOut(300);
- $(this).fadeIn(300);
- }else{
- $(this).fadeOut(function(){
- $('.modelscont').fadeIn(300);
- $('#model').val('none');
- });
- }
- });
- $("#ip6sp").click(function () {
- if($('#model').val() == 'none'){
- $('#model').val('ip6sp');
- $('#model').change();
- $(".modelscont").fadeOut(300);
- $(this).fadeIn(300);
- }else{
- $(this).fadeOut(function(){
- $('.modelscont').fadeIn(300);
- $('#model').val('none');
- });
- }
- });
- $("#ip6s").click(function () {
- if($('#model').val() == 'none'){
- $('#model').val('ip6s');
- $('#model').change();
- $(".modelscont").fadeOut(300);
- $(this).fadeIn(300);
- }else{
- $(this).fadeOut(function(){
- $('.modelscont').fadeIn(300);
- $('#model').val('none');
- });
- }
- });
- $("#ipse").click(function () {
- if($('#model').val() == 'none'){
- $('#model').val('ipse');
- $('#model').change();
- $(".modelscont").fadeOut(300);
- $(this).fadeIn(300);
- }else{
- $(this).fadeOut(function(){
- $('.modelscont').fadeIn(300);
- $('#model').val('none');
- });
- }
- });
- $("#ip6p").click(function () {
- if($('#model').val() == 'none'){
- $('#model').val('ip6p');
- $('#model').change();
- $(".modelscont").fadeOut(300);
- $(this).fadeIn(300);
- }else{
- $(this).fadeOut(function(){
- $('.modelscont').fadeIn(300);
- $('#model').val('none');
- });
- }
- });
- $("#ip6").click(function () {
- if($('#model').val() == 'none'){
- $('#model').val('ip6');
- $('#model').change();
- $(".modelscont").fadeOut(300);
- $(this).fadeIn(300);
- }else{
- $(this).fadeOut(function(){
- $('.modelscont').fadeIn(300);
- $('#model').val('none');
- });
- }
- });
- });
- $(window).on('resize', function(){
- if ($(this).width() < 800) {
- $('#model').show();
- $('.modelscont').hide();
- }else if($('#model').val() == 'none'){
- $('#model').hide();
- $('.modelscont').show();
- }else{
- $('#model').hide();
- $('.modelscont').show(300);
- }
- });
- </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 {
- display: flex;
- overflow: hidden;
- margin:15px;
- align-items: center;
- }
- .itemheader{
- margin-right: auto;
- }
- .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;
- }
- #outputcont{
- display:none;
- margin:20px;
- }
- #output{
- font-size:3em;
- margin:20px;
- }
- .modelscont:hover {
- background-color:rgba(121, 169, 128, 1);
- }
- .modelscont:active{
- background-color:rgba(20, 20, 20, 0.73);
- color:#e2e2e2;
- }
- .models{
- height:75px;
- width: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:45%;
- 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: .8em; margin: .75em 0;line-height:1em;}
- #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;
- }
- </style>
Add Comment
Please, Sign In to add comment