Jquery 다중 단계 양식

Question

나는이 Jquery와 HTML 코드를 가지고 온라인으로 여러 단계 형식을 만듭니다. 그러나 사용자가 특정 단계로 이동할 수 있도록 코드를 조작 할 수 있어야합니다.

예 : 양식 맨 위에 나는 "수학이나 과학을 좋아합니까?"라는 질문을 던집니다. 양식에는 "수학"과 다른 "과학"이라는 두 개의 버튼이 있습니다. 현재, 두 단추 중 하나를 클릭하면 양식의 다음 단계로 이동합니다. 그러나 사용자가 "수학"을 클릭하면 사용자가 "과학"을 클릭하는 경우와 다른 양식으로 이동합니다. 여기

코드의 모습을하고 데모 @를 볼 수있는 것입니다 : 참고로 http://thecodeplayer.com/walkthrough/jquery-multi-step-form-with-progress-bar

<!-- multistep form --> 
<form id="msform"> 

    <fieldset> 
     <h2 class="fs-title"> Do you enjoy Math or Science?</h2> 
     <h3 class="fs-subtitle">This is step 1</h3> 

     <input type="button" name="next" class="next action-button" value="Math" /> </li> 

     <input type="button" name="next" class="next action-button" value="Science" /> </li> 

    </fieldset> 

    <fieldset> 
     <h2 class="fs-title">Math</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">Science</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="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> 

<script> 
//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; 
}) 
</script> 

<!-- 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> 

Answer 1

:

내가 상세한 대답을했다. 따라서 답변을 완전히 읽고 코드에서 변경 한 내용이 무엇인지 이해하십시오. 세부

답변 : 각 fieldset에 대한

가지 적어 식별 귀하의 요구 사항에 따라 작동합니다.

<fieldset id="firstField"> <!-- First Step --> 
<fieldset id="mathsField"> <!-- Maths --> 
<fieldset id="scienceField"> <!-- Science --> 

귀하의 js 코드는 .next와 .previous 클래스를 기반으로 작동하고, 아래와 같이 할. 그래서, 우리는 그 흐름을 바꾸기 위해 우리의 논리를 두어야합니다. 이미 클릭 된 버튼은 수학 또는 과학 버튼 name입니다 경우 단지 을 확인 $(".next").click(function(){ });에서, 다음과 같은 버튼 수학과 과학에 대한 그래서

<input type="button" name="maths" class="next action-button" value="Math" /> 
<input type="button" name="science" class="next action-button" value="Science" /> 

이름을 지정하고 코드를 아래와 같이 변수 next_fs에 fieldset DOM을 대응하는 설정 ,

if($(this).attr('name') == 'maths') 
    next_fs = $('#mathsField'); 
if($(this).attr('name') == 'science') 
    next_fs = $('#scienceField'); 

및 $(".previous").click(function(){ });에 코드 아래와 같은 가변 previous_fs-#firstField DOM을 설정

previous_fs = $('#firstField'); 

는이 JSFIDDLE DEMO