Multi-step form "next" button not working

StackOverflow https://stackoverflow.com/questions/20855496

Domanda

I have a basic understanding on Javascript and jQuery. I have a multi-step form here which splits up my form into 3 steps. However the "next" button doesnt seem to work. I have spent whole day to research all over the Internet and tried all I could but still didnt solve my problem.

Below is the files I have. I am sure it is not due to browser problem since I have tried all major browsers. js code also seems alright to me. Anyone can show me some enlightenment??

new_video.html (it was a .php file but i removed all the unnecessary php codes)

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <link href="css/step.css" rel="stylesheet" type="text/css" media="screen" />
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10/jquery.min.js"></script>
    <script src="step.js"></script>
    <script src="jquery.easing.min.js"></script>
</head>
<body>
    <form id="msform" action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]);?>" method="POST" enctype="multipart/form-data">
                <!-- progressbar -->
                <ul id="progressbar">
                    <li class="active">Upload Video Lecture</li>
                    <li>Upload Lecture Notes</li>
                    <li>Upload Screenshot</li>
                </ul>
                <!-- fieldsets -->
                <fieldset>
                    <h2 class="fs-title">Upload Video Lecture</h2>
                    <span class="error">* required field.</span>
                    <h2 class="fs-title">Upload Video Lecture</h2>
                <span class="error">* required field.</span>
                <div id="form">
                    <input type="file" name="file" />
                        <span class="error">* </span><br />
                    <input type="text" name="title" placeholder="Video Lecture Title" />
                        <span class="error">* </span><br />
                    <textarea name="description" rows="6" placeholder="Description"></textarea>
                        <span class="error">* </span><br />
                    <input type="button" name="next" class="next action-button" value="Next" />
                </div>
                </fieldset>
            </form>
</body>
</html>

step.js

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

    $(document).ready(function(){
    $(".next").click(function(){
        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+')'});
                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'
        });
    });
});


$(document).ready(function(){
    $(".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'
        });
    });
});


$(document).ready(function(){
    $(".submit").click(function(){
        return false;
    });
});
È stato utile?

Soluzione

Currently I see that you've specified only a single step, for starters place all your bindings in a single $(document).ready or for short $(function(){});, so:

$(function() {
   $(".previous").click(function(){
      // stuff for previous ...
   });

   $(".next").click(function(){
      // stuff for next ...
   });

   $(".submit").click(function(){
       // you get the idea ...
   });
});

Here is your fiddle updated (you were missing some resources, I hope I got them right). I hope this helps, good luck :)

Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top