Advertisement
Guest User

Javascript for Multi-Step Form

a guest
Jan 9th, 2013
172
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. $("document").ready(function () {
  2.     "use strict";
  3.     var currentStep;
  4.     //Hide additional steps and the differences between the two steps if they have Javascript
  5.     function hideSteps() {
  6.         //hide the divs
  7.         $("#step2").hide();
  8.         $("#step3").hide();
  9.         $("#step4").hide();
  10.         $("#step5").hide();
  11.         $("#step6").hide();
  12.         $("#showResults").hide();
  13.         $("#makingAOneTimeGift").hide();
  14.         $("#makingARecurringGift").hide();
  15.     }
  16.     function showNextStep(currentStep) {
  17.         $("#step" + currentStep).slideToggle("slow", function () {
  18.             if (currentStep === 1) {
  19.                 //figure out what kind of donation they are making
  20.                 var chosenDonationType = $("[name=donationType]").val();
  21.                 //show the apppropriate slide
  22.                 switch (chosenDonationType) {
  23.                 case "oneTimeGift":
  24.                     currentStep += 1;
  25.                     $("#makingAOneTimeGift").show();
  26.                     $("#step" + currentStep).slideToggle("slow");
  27.                     break;
  28.                 case "recurringDonation":
  29.                     currentStep += 1;
  30.                     $("#makingARecurringGift").show();
  31.                     $("#step" + currentStep).slideToggle("slow");
  32.                     break;
  33.                     //if somehow they changed it to something else, ignore them and return false.
  34.                 default:
  35.                     return false;
  36.                     //break; not needed due to return
  37.                 }//end switch
  38.             } else {
  39.                 currentStep += 1;
  40.                 $("#step" + currentStep).slideToggle("slow");
  41.             }
  42.         });
  43.     }
  44.     function showPreviousStep(currentStep) {
  45.         if (currentStep === 2) {
  46.             var chosenDonationType = $("[name=donationType]").val();
  47.             switch (chosenDonationType) {
  48.             case "oneTimeGift":
  49.                 $("#makingAOneTimeGift").slideToggle();
  50.                 break;
  51.             case "recurringDonation":
  52.                 $("#makingARecurringGift").slideToggle();
  53.                 break;
  54.             default:
  55.                 $("#makingARecurringGift").hide();
  56.                 $("#makingAOneTimeGift").hide();
  57.                 break;
  58.             }
  59.         }
  60.  
  61.         $("#step" + currentStep).slideToggle("slow", function () {
  62.             currentStep -= 1;
  63.             $("#step" + currentStep).slideToggle("slow");
  64.         });
  65.     }
  66.     function showResults(currentStep) {
  67.         $("#showResults").slideToggle("slow");
  68.  
  69.     }
  70.     function validateBeforeSubmitContent() {
  71.         //if true submit form / if false do NOT submit the form
  72.         return true;
  73.     }
  74.  
  75.     function replaceDonationAmount() {
  76.         //check which they used
  77.         var donationAmount, OneTimeDonation, RecurringDonation;
  78.         donationAmount = 0;
  79.         OneTimeDonation = $("[name=oneTimeDonationValue]").val();
  80.         RecurringDonation = parseInt($("#totalRecurringDonationValue").text(), 10);
  81.  
  82.         if (OneTimeDonation !== 0) {
  83.             donationAmount = OneTimeDonation;
  84.         } else {
  85.             donationAmount = RecurringDonation;
  86.         }
  87.         $("#showTotalDonationAmount").text(donationAmount);
  88.     }
  89.  
  90.     //Replace the Recurring donation amount so they know how much their total gift amount.
  91.     function replaceRecurringDonationValue() {
  92.         //Let's get the values and store them in our variables
  93.         var perDonationValue, numberOfPayments, paymentFrequency, TotalRecurringDonationValue, howLong, howManyYears, howManyMonths, numberOfMonths;
  94.         perDonationValue = $("#recurringDonationValue").val();
  95.         numberOfPayments = $("#numberOfPayments").val();
  96.         paymentFrequency = $("#paymentFrequency").val();
  97.  
  98.         //ensure that the maximum number of months is enforced.
  99.         if (numberOfPayments > 60) {
  100.             alert("Donations can last for a maximum of 60 times.");
  101.             $("#numberOfPayments").val(60);
  102.         } else if (numberOfPayments < 0) {
  103.             alert("You cannot make a negative number of domnations.");
  104.             $("#numberOfPayments").val(0);
  105.         }
  106.  
  107.         TotalRecurringDonationValue = perDonationValue * numberOfPayments;
  108.         howLong = " over ";
  109.  
  110.         //now say over what time period. Switch will be faster than an if else.
  111.         switch (paymentFrequency) {
  112.         case "Monthly":
  113.             if (numberOfPayments === 0) {
  114.                 howLong = "";
  115.             } else if (numberOfPayments === 1) {
  116.                 howLong += numberOfPayments + " month.";
  117.             } else if (numberOfPayments <= 12) {
  118.                 howLong += numberOfPayments + " months.";
  119.             } else {
  120.                 howManyYears = Math.floor(numberOfPayments / 12);
  121.                 howManyMonths = numberOfPayments % 12;
  122.  
  123.                 howLong += howManyYears + " years, and " + howManyMonths + " months.";
  124.             }
  125.             $("#lengthOfTime").text(howLong);
  126.             break;
  127.  
  128.         case "Quarterly":
  129.             howLong = " will be made quarterly over ";
  130.             if (numberOfPayments === 0) {
  131.                 howLong = "";
  132.             } else if (numberOfPayments <= 4) {
  133.                 numberOfMonths = numberOfPayments * 3;
  134.                 howLong += numberOfMonths + " months.";
  135.             } else {
  136.                 howManyYears = Math.floor((numberOfPayments * 3) / 12);
  137.                 howManyMonths = (numberOfPayments * 3) % 12;
  138.                 howLong += howManyYears + " years, and " + howManyMonths + " months.";
  139.             }
  140.             $("#lengthOfTime").text(howLong);
  141.             break;
  142.  
  143.         case "Annually":
  144.             howLong += numberOfPayments;
  145.             if (numberOfPayments === 0) {
  146.                 howLong = "";
  147.             } else if (numberOfPayments === 1) {
  148.                 howLong += " year.";
  149.             } else {
  150.                 howLong += " years.";
  151.             }
  152.             $("#lengthOfTime").text(howLong);
  153.             break;
  154.  
  155.         default:
  156.             $("#lengthOfTime").text("");
  157.         }
  158.         $("#totalRecurringDonationValue").val(TotalRecurringDonationValue);
  159.         replaceDonationAmount();
  160.  
  161.     }
  162.     function showResepectiveAllocation() {
  163.         //scholarship functions
  164.         $("div.ifScholarshipsSelected input[type=\"checkbox\"]").click(function () {
  165.             $("#" + $(this).val().replace(/_/g, "") + "Allocation").slideToggle("fast");
  166.         });
  167.         $("div.ifAcademicsSelected input[type=\"checkbox\"]").click(function () {
  168.             $("#" + $(this).val().replace(/_/g, "") + "Allocation").slideToggle("fast");
  169.         });
  170.         $("div.ifAthleticsAreSelected input[type=\"checkbox\"]").click(function () {
  171.             $("#" + $(this).val().replace(/_/g, "") + "Allocation").slideToggle("fast");
  172.         });
  173.     }
  174.     //Let's add the ability to show and hide fields via the checkboxes
  175.     function addInteractivity() {
  176.         //to unrestricted fund
  177.         $(".showUnrestricted").css("display", "none");
  178.         $("#unrestrictedFund").click(function () {
  179.             if ($("#unrestrictedFund:checked").val() === "unrestricted") {
  180.                 $(".showUnrestricted").slideToggle("fast"); //Slide Down Effect
  181.             } else {
  182.                 $(".showUnrestricted").slideToggle("fast");  //Slide Up Effect
  183.             }
  184.         });
  185.         //to a specific scholarship
  186.         $(".ifScholarshipsSelected").css("display", "none");
  187.         $(".ScholashipSelection").click(function () {
  188.             if ($("input[name=ScholashipSelection]:checked").val() === "to_Scholarships") {
  189.                 $(".ifScholarshipsSelected").slideToggle("fast"); //Slide Down Effect
  190.             } else {
  191.                 $(".ifScholarshipsSelected").slideToggle("fast");  //Slide Up Effect
  192.             }
  193.         });
  194.     //to a academics
  195.         $(".ifAcademicsSelected").css("display", "none");
  196.         $(".AcademicSelection").click(function () {
  197.             if ($("input[name=toAcademics]:checked").val() === "to_Academics") {
  198.                 $(".ifAcademicsSelected").slideToggle("fast"); //Slide Down Effect
  199.             } else {
  200.                 $(".ifAcademicsSelected").slideToggle("fast");  //Slide Up Effect
  201.             }
  202.         });
  203.      //Would you like to donate to athletic funds?
  204.         $(".ifAthleticsAreSelected").css("display", "none");
  205.         $(".enableAthletics").click(function () {
  206.             if ($('input[name=toAthletics]:checked').val() === "to_athletics") {
  207.                 $(".ifAthleticsAreSelected").slideDown("fast"); //Slide Down Effect
  208.             } else {
  209.                 $(".ifAthleticsAreSelected").slideUp("fast");  //Slide Up Effect
  210.             }
  211.         });
  212.     }
  213.  
  214.     function validateCurrentStep(currentStep) {
  215.         var chosenDonationType, validateTotalAllocationAmount = 0, validateOneTimeDonationAmount, fields, checkAcademicsFields, checkAthleticsFields, checkScholarshipFields, validateRecurringDonationAmount, validateNumberOfPayments, validatePaymentFrequency, validateTotalRecurringDonationAmount;
  216.         chosenDonationType = $("[name=donationType]").val();
  217.         switch (currentStep) {
  218.             //This checks to make sure that they selected a donation type.
  219.         case 1:
  220.             return true;
  221.         //break; Can't break due to return
  222.  
  223.         //This verifies donation type and checks to make sure they entered a donation amount
  224.         case 2:
  225.             switch (chosenDonationType) {
  226.             case "oneTimeGift":
  227.                 validateOneTimeDonationAmount = $("[name=oneTimeDonationValue]").val();
  228.                 if (validateOneTimeDonationAmount < 5) {
  229.                     $("#makingAOneTimeGift").addClass("error");
  230.                     $("#oneTimeDonationValidateError").text("Sorry, we have a $5 donation minimum.");
  231.                     return false;
  232.                 }
  233.  
  234.                 if ($("#makingAOneTimeGift").hasClass("error")) {
  235.                     $("#oneTimeDonationValidateError").text("");
  236.                     $("#makingAOneTimeGift").removeClass("error");
  237.                 }
  238.                 return true;
  239.  
  240.             case "recurringDonation":
  241.                 validateRecurringDonationAmount = $("[name=recurringDonationValue]").val();
  242.                 validateNumberOfPayments = $("[name=numberOfPayments]").val();
  243.                 validatePaymentFrequency = $("[name=paymentFrequency]").val();
  244.                 validateTotalRecurringDonationAmount = validateRecurringDonationAmount * validateNumberOfPayments;
  245.                 //first check the total amount, it should be at least $5.00
  246.                 if (validateTotalRecurringDonationAmount < 5) {
  247.                     $("#makingARecurringGift").addClass("error");
  248.                     $("#recurringDonationAmountValidateError").text("Sorry, your total donation was less than $5. We have a $5 donation minimum.");
  249.                     return false;
  250.                 }
  251.                 if (validateNumberOfPayments === 0) {
  252.                     $("#makingARecurringGift").addClass("error");
  253.                     $("#recurringDonationAmountValidateError").text("Sorry, you must choose how many months you would like to make this donation for.");
  254.                     return false;
  255.                 }
  256.                 if ($("#makingARecurringGift").hasClass("error")) {
  257.                     $("#oneTimeDonationValidateError").text("");
  258.                     $("#makingARecurringGift").removeClass("error");
  259.                 }
  260.                 return true;
  261.             }//end chosenDonationType switch
  262.             break;
  263.  
  264.             //This verifies that they chose a fund to donate to.
  265.         case 3:
  266.  
  267.             fields = $("#step3 input:checkbox:checked");
  268.             //check that they chose any fund at all
  269.             if (fields.length === 0) {
  270.                 $("#step3").addClass("error");
  271.                 $("#checkboxError").text("Please choose a fund to donate to.");
  272.                 return false;
  273.             }
  274.  
  275.             //Check Scholarships
  276.             if ($("[name=ScholashipSelection]").is(":checked")) {
  277.                 checkScholarshipFields = $(".ifScholarshipsSelected input:checkbox:checked");
  278.                 if (checkScholarshipFields.length === 0) {
  279.                     $("#step3").addClass("error");
  280.                     $("#checkboxError").text("Please choose which scholarship you would like to donate to.");
  281.                     return false;
  282.                 }
  283.                 if ($("#step3").hasClass("error")) {
  284.                     $("#step3").removeClass("error");
  285.                     $("#checkboxError").text("");
  286.                 }
  287.             }
  288.  
  289.             //Check Acadmics
  290.             if ($("[name=toAcademics]").is(":checked")) {
  291.                 checkAcademicsFields = $(".ifAcademicsSelected input:checkbox:checked");
  292.                 if (checkAcademicsFields.length === 0) {
  293.                     $("#step3").addClass("error");
  294.                     $("#checkboxError").text("Please choose which academic fund you would like to donate to.");
  295.                     return false;
  296.                 }
  297.                 if ($("#step3").hasClass("error")) {
  298.                     $("#step3").removeClass("error");
  299.                     $("#checkboxError").text("");
  300.                 }
  301.             }
  302.  
  303.             //check Athletics
  304.             if ($("[name=toAthletics]").is(":checked")) {
  305.                 checkAthleticsFields = $(".ifAthleticsAreSelected input:checkbox:checked");
  306.                 if (checkAthleticsFields.length === 0) {
  307.                     $("#step3").addClass("error");
  308.                     $("#checkboxError").text("Please choose which athletic fund you would like to donate to.");
  309.                     return false;
  310.                 }
  311.                 if ($("#step3").hasClass("error")) {
  312.                     $("#step3").removeClass("error");
  313.                     $("#checkboxError").text("");
  314.                 }
  315.             }
  316.  
  317.             //if we didn't have to stop anywhere above this, let the step continue
  318.             if ($("#step2ValidateError").hasClass("error")) {
  319.                 $("#step2ValidateError").removeClass("error");
  320.                 $("#oneTimeDonationCheckboxError").text("");
  321.             }
  322.             return true;
  323.  
  324.  
  325.         case 4:
  326.             $("#step4 :input[type=\"number\"]").each(function () {
  327.                 validateTotalAllocationAmount += parseInt($(this).val(), 10);
  328.             });
  329.  
  330.             if (validateTotalAllocationAmount < 100) {
  331.                 alert("Sorry, your allocation amount adds up to under 100%. Please try again.");
  332.                 return false;
  333.             }
  334.  
  335.             if (validateTotalAllocationAmount > 100) {
  336.                 alert("Sorry, your allocation amount adds up to over 100%. Please try again.");
  337.                 return false;
  338.             }
  339.  
  340.             return true;
  341.  
  342.         case 5:
  343.             //Check user information i.e. Name / State / Etc.
  344.             return true;
  345.  
  346.         default:
  347.             return false;
  348.         } //end currentStep switch
  349.     }
  350.  
  351.     currentStep = 1;
  352.     hideSteps();
  353.     addInteractivity();
  354.     showResepectiveAllocation();
  355.     $("#recurringDonationValue, #numberOfPayments, #paymentFrequency").change(function () {
  356.         replaceRecurringDonationValue();
  357.     });
  358.  
  359.     $("#oneTimeGift").click(function () {
  360.         $("[name=donationType]").val("oneTimeGift");
  361.     });
  362.     $("#recurringGift").click(function () {
  363.         $("[name=donationType]").val("recurringDonation");
  364.     });
  365.     $("#replaceDonationAmountNow").click(function () {
  366.         replaceDonationAmount();
  367.         var chosenDonationType = $("[name=donationType]").val();
  368.         switch (chosenDonationType) {
  369.         case "oneTimeGift":
  370.             $("#typeOfGift").text("one-time");
  371.             break;
  372.         case "recurringDonation":
  373.             $("#typeOfGift").text("recurring");
  374.             break;
  375.         default:
  376.             $("#typeOfGift").text("");
  377.             break;
  378.         }
  379.     });
  380.  
  381.     //change steps
  382.     $(".nextStep").click(function () {
  383.         if (validateCurrentStep(currentStep)) {
  384.             showNextStep(currentStep);
  385.             currentStep += 1;
  386.         } else {
  387.             return false;
  388.         }
  389.     });
  390.     $(".previousStep").click(function () {
  391.         showPreviousStep(currentStep);
  392.         currentStep -= 1;
  393.     });
  394.  
  395.     $("[name=submit_form]").click(function (e) {
  396.         var options = {
  397.             target: "#step6",
  398.             clearForm: true
  399.         };
  400.         if (validateBeforeSubmitContent(e)) {
  401.             $("#DonationForm").ajaxForm(options);
  402.         } else {
  403.             e.preventDefault();
  404.             return false;
  405.         }
  406.     });
  407. });
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement