|
|
@@ -0,0 +1,141 @@
|
|
|
+//jQuery time
|
|
|
+var current_fs, next_fs, previous_fs; //fieldsets
|
|
|
+var left, opacity, scale; //fieldset properties which we will animate
|
|
|
+var animating; //flag to prevent quick multi-click glitches
|
|
|
+
|
|
|
+$(".next").click(function(){
|
|
|
+ if( !validate() ){
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+
|
|
|
+ if(animating) return false;
|
|
|
+ animating = true;
|
|
|
+
|
|
|
+ current_fs = $(this).parent();
|
|
|
+ next_fs = $(this).parent().next();
|
|
|
+
|
|
|
+ //activate next step on progressbar using the index of next_fs
|
|
|
+ $("#progressbar li").eq($("fieldset").index(next_fs)).addClass("active");
|
|
|
+
|
|
|
+ //show the next fieldset
|
|
|
+ next_fs.show();
|
|
|
+ //hide the current fieldset with style
|
|
|
+ current_fs.animate({opacity: 0}, {
|
|
|
+ step: function(now, mx) {
|
|
|
+ //as the opacity of current_fs reduces to 0 - stored in "now"
|
|
|
+ //1. scale current_fs down to 80%
|
|
|
+ scale = 1 - (1 - now) * 0.2;
|
|
|
+ //2. bring next_fs from the right(50%)
|
|
|
+ left = (now * 50)+"%";
|
|
|
+ //3. increase opacity of next_fs to 1 as it moves in
|
|
|
+ opacity = 1 - now;
|
|
|
+ current_fs.css({
|
|
|
+ 'transform': 'scale('+scale+')',
|
|
|
+ 'position': 'absolute'
|
|
|
+ });
|
|
|
+ next_fs.css({'left': left, 'opacity': opacity});
|
|
|
+ },
|
|
|
+ duration: 800,
|
|
|
+ complete: function(){
|
|
|
+ current_fs.hide();
|
|
|
+ animating = false;
|
|
|
+ },
|
|
|
+ //this comes from the custom easing plugin
|
|
|
+ easing: 'easeInOutBack'
|
|
|
+ });
|
|
|
+});
|
|
|
+
|
|
|
+$(".previous").click(function(){
|
|
|
+ if(animating) return false;
|
|
|
+ animating = true;
|
|
|
+
|
|
|
+ current_fs = $(this).parent();
|
|
|
+ previous_fs = $(this).parent().prev();
|
|
|
+
|
|
|
+ //de-activate current step on progressbar
|
|
|
+ $("#progressbar li").eq($("fieldset").index(current_fs)).removeClass("active");
|
|
|
+
|
|
|
+ //show the previous fieldset
|
|
|
+ previous_fs.show();
|
|
|
+ //hide the current fieldset with style
|
|
|
+ current_fs.animate({opacity: 0}, {
|
|
|
+ step: function(now, mx) {
|
|
|
+ //as the opacity of current_fs reduces to 0 - stored in "now"
|
|
|
+ //1. scale previous_fs from 80% to 100%
|
|
|
+ scale = 0.8 + (1 - now) * 0.2;
|
|
|
+ //2. take current_fs to the right(50%) - from 0%
|
|
|
+ left = ((1-now) * 50)+"%";
|
|
|
+ //3. increase opacity of previous_fs to 1 as it moves in
|
|
|
+ opacity = 1 - now;
|
|
|
+ current_fs.css({'left': left});
|
|
|
+ previous_fs.css({'transform': 'scale('+scale+')', 'opacity': opacity});
|
|
|
+ },
|
|
|
+ duration: 800,
|
|
|
+ complete: function(){
|
|
|
+ current_fs.hide();
|
|
|
+ animating = false;
|
|
|
+ },
|
|
|
+ //this comes from the custom easing plugin
|
|
|
+ easing: 'easeInOutBack'
|
|
|
+ });
|
|
|
+});
|
|
|
+
|
|
|
+$("input[name=submit]").click(function(){
|
|
|
+ console.log($("#msform").serialize());
|
|
|
+ $.ajax({
|
|
|
+ url: 'http://127.0.0.1:8000/step_questions/submit',
|
|
|
+ type: 'post',
|
|
|
+ dataType: 'json',
|
|
|
+ data: $("#msform").serialize(),
|
|
|
+ success: function(data) {
|
|
|
+ showThankyou();
|
|
|
+ }
|
|
|
+ });
|
|
|
+ return false;
|
|
|
+})
|
|
|
+
|
|
|
+function showThankyou() {
|
|
|
+ $('#overlay').show();
|
|
|
+}
|
|
|
+
|
|
|
+function show_input_text(checkbox_id, input_id) {
|
|
|
+ var checkBox = document.getElementById(checkbox_id);
|
|
|
+ var inp = document.getElementById(input_id);
|
|
|
+ if (checkBox.checked == true){
|
|
|
+ inp.style.display = "block";
|
|
|
+ } else {
|
|
|
+ inp.style.display = "none";
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+function validate() {
|
|
|
+ function q2_validate() {
|
|
|
+ if( $('input[name="q2"]:visible').val() !== undefined && $('input[name="q2"]:visible').val().length <= 0 ) {
|
|
|
+ $('input[name="q2"]:visible').addClass('error');
|
|
|
+ if( !$('.error-text').length )
|
|
|
+ $('input.error').after('<p class="error-text">手機號碼 is Required</p>');
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+ else {
|
|
|
+ $('input[name="q2"]:visible').removeClass('error');
|
|
|
+ $('.error-text').remove();
|
|
|
+ return true;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ function q3_validate() {
|
|
|
+ if( $('input[name="q3"]:visible').val() !== undefined && $('input[name="q3"]:visible').val().length <= 0 ) {
|
|
|
+ $('input[name="q3"]:visible').addClass('error');
|
|
|
+ if( !$('.error-text').length )
|
|
|
+ $('input.error').after('<p class="error-text">Email Field is Required</p>');
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+ else {
|
|
|
+ $('input[name="q3"]:visible').removeClass('error');
|
|
|
+ $('.error-text').remove();
|
|
|
+ return true;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ return q2_validate() && q3_validate()
|
|
|
+}
|
