Question

我对Javascript和jQuery有基本的了解。我这里有一个多步骤表单，将我的表单分成3个步骤。然而，“下一步”按钮似乎不起作用。我花了一整天的时间在互联网上进行研究，尽我所能，但仍然没有解决我的问题。

以下是我的文件。我确信这不是由于浏览器问题，因为我尝试了所有主流浏览器。 js代码对我来说似乎也没问题。任何人都可以给我一些启示吗？

new_video.html（它是.php文件，但我删除了所有不必要的php代码）

<!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;
    });
});

Answer 1

目前我发现您只指定了一个步骤，因为初学者将所有绑定放在一个$(document).ready或简称$(function(){});中，所以：

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

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

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

这是你fiddle的更新（你错过了一些资源，我希望我把它们弄好了）。我希望这会有所帮助，祝你好运:)。

多步骤表单“下一步”按钮不起作用

1 个答案: