Javascript多步表單不會進入下一步

Question

我正在做一個多步驟註冊表單，但'下一個按鈕'不起作用。

這裏是的jsfiddle：https://jsfiddle.net/champforevaa/bcyy74n9/這裏是代碼：

Signup.html：

<!-- multistep form --> 
    <link rel="stylesheet" type="text/css" href="./Signup.css"> 
    <script src="./Signup.js"></script> 
<form id="msform"> 
    <!-- progressbar --> 
    <ul id="progressbar"> 
     <li class="active">Account Setup</li> 
     <li>Social Profiles</li> 
     <li>Personal Details</li> 
    </ul> 
    <!-- fieldsets --> 
    <fieldset> 
     <h2 class="fs-title">Create your account</h2> 
     <h3 class="fs-subtitle">This is step 1</h3> 
     <input type="text" name="email" placeholder="Email" /> 
     <input type="password" name="pass" placeholder="Password" /> 
     <input type="password" name="cpass" placeholder="Confirm Password" /> 
     <input type="button" name="next" class="next action-button" value="Next" /> 
    </fieldset> 
    <fieldset> 
     <h2 class="fs-title">Social Profiles</h2> 
     <h3 class="fs-subtitle">Your presence on the social network</h3> 
     <input type="text" name="twitter" placeholder="Twitter" /> 
     <input type="text" name="facebook" placeholder="Facebook" /> 
     <input type="text" name="gplus" placeholder="Google Plus" /> 
     <input type="button" name="previous" class="previous action-button" value="Previous" /> 
     <input type="button" name="next" class="next action-button" value="Next" /> 
    </fieldset> 
    <fieldset> 
     <h2 class="fs-title">Personal Details</h2> 
     <h3 class="fs-subtitle">We will never sell it</h3> 
     <input type="text" name="fname" placeholder="First Name" /> 
     <input type="text" name="lname" placeholder="Last Name" /> 
     <input type="text" name="phone" placeholder="Phone" /> 
     <textarea name="address" placeholder="Address"></textarea> 
     <input type="button" name="previous" class="previous action-button" value="Previous" /> 
     <input type="submit" name="submit" class="submit action-button" value="Submit" /> 
    </fieldset> 
</form> 

<!-- jQuery --> 
<script src="http://thecodeplayer.com/uploads/js/jquery-1.9.1.min.js" type="text/javascript"></script> 
<!-- jQuery easing plugin --> 
<script src="http://thecodeplayer.com/uploads/js/jquery.easing.min.js" type="text/javascript"></script> 

Signup.js：

<!-- jQuery --> 
    <script src="http://thecodeplayer.com/uploads/js/jquery-1.9.1.min.js" type="text/javascript"></script> 
    <!-- jQuery easing plugin --> 
    <script src="http://thecodeplayer.com/uploads/js/jquery.easing.min.js" type="text/javascript"></script> 
    <script> 
     /* 
    Orginal Page: http://thecodeplayer.com/walkthrough/jquery-multi-step-form-with-progress-bar 

    */ 
    //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(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' 
     }); 
    }); 

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

    $(".submit").click(function(){ 
     return false; 
    }) 

正如看到的jsfiddle，下按鈕不起作用。

Answer 1

我更新了codejsfiddle的問題是在JS面板時，應直接輸入javascript沒有<script>標記，這樣，到include你的庫

我在使用選項「外部資源」（在面板離開 方），現在作品，問候！

Answer 2

問題是你不包括jquery.js文件和jquery.easing JS文件正確，因爲你正試圖從http://thecodeplayer.com/uploads/js/jquery-1.9.1.min.js和http://thecodeplayer.com/uploads/js/jquery.easing.min.js這是沒有得到它CDN [內容分發網絡]所以，你可以做什麼改變的是刪除這兩個腳本引用從html和js，並將腳本的以下引用添加爲src。

https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js 
^^^^//for easing 

//code.jquery.com/jquery-2.1.3.js 
^^ for jquery.js 

其他一切都很好。 DEMO HERE