使用字段集的多步骤表

我有我的代码在HTML和JavaScript中使用fieldset更改步骤形式。我想在每一个字段集有自己的表单标签，所以当我在第一个字段集提交其更改为第二个字段集使用字段集的多步骤表

这里是我的HTML代码

<div class="formhandler"> 
<fieldset> 
    1 

    <form> 
     <input type="text"> 
     <?php 
      echo form_button('previous', 'Kembali', array('class'=>'previous action-button')); 
      echo form_submit('submit', 'Next', array('class'=>'next action-button')); 
     ?> 
    </form> 
</fieldset> 

<fieldset> 
    2 

    <form> 
     <input type="text"> 
     <?php 
      echo form_button('previous', 'Kembali', array('class'=>'previous action-button')); 
      echo form_submit('submit', 'Next', array('class'=>'next action-button')); 
     ?> 
    </form> 
</fieldset>

请帮我解决这个

来源

2016-01-28 Ridho Fauzan

编辑：我使用这个插件 http://thecodeplayer.com/walkthrough/jquery-multi-step-form-with-progress-bar –

您可以根据步骤为每个字段集调用javascript自定义ajax请求，并在客户端验证此字段。

因为如果您不使用ajax，页面将被刷新，您将失去该步骤。

来源

2016-01-28 10:22:15 Joaquinglezsantos

你可以举个例子怎么办呢？ –

<html> 
<head> 
    <style> 
    /*custom font*/ 
@import url(http://fonts.googleapis.com/css?family=Montserrat); 

/*basic reset*/ 
* {margin: 0; padding: 0;} 

html { 
    height: 100%; 
    /*Image only BG fallback*/ 
    background: url('http://thecodeplayer.com/uploads/media/gs.png'); 
    /*background = gradient + image pattern combo*/ 
    background: 
     linear-gradient(rgba(196, 102, 0, 0.2), rgba(155, 89, 182, 0.2)), 
     url('http://thecodeplayer.com/uploads/media/gs.png'); 
} 

body { 
    font-family: montserrat, arial, verdana; 
} 
/*form styles*/ 
.msform { 
    width: 400px; 
    margin: 50px auto; 
    text-align: center; 
    position: relative; 
} 
.msform fieldset { 
    background: white; 
    border: 0 none; 
    border-radius: 3px; 
    box-shadow: 0 0 15px 1px rgba(0, 0, 0, 0.4); 
    padding: 20px 30px; 

    box-sizing: border-box; 
    width: 80%; 
    margin: 0 10%; 

    /*stacking fieldsets above each other*/ 
    position: absolute; 
} 
/*Hide all except first fieldset*/ 
.msform:not(:first-of-type) fieldset { 
    display: none; 
} 
/*inputs*/ 
.msform input, .msform textarea { 
    padding: 15px; 
    border: 1px solid #ccc; 
    border-radius: 3px; 
    margin-bottom: 10px; 
    width: 100%; 
    box-sizing: border-box; 
    font-family: montserrat; 
    color: #2C3E50; 
    font-size: 13px; 
} 
/*buttons*/ 
.msform .action-button { 
    width: 100px; 
    background: #27AE60; 
    font-weight: bold; 
    color: white; 
    border: 0 none; 
    border-radius: 1px; 
    cursor: pointer; 
    padding: 10px 5px; 
    margin: 10px 5px; 
} 
.msform .action-button:hover, .msform .action-button:focus { 
    box-shadow: 0 0 0 2px white, 0 0 0 3px #27AE60; 
} 
/*headings*/ 
.fs-title { 
    font-size: 15px; 
    text-transform: uppercase; 
    color: #2C3E50; 
    margin-bottom: 10px; 
} 
.fs-subtitle { 
    font-weight: normal; 
    font-size: 13px; 
    color: #666; 
    margin-bottom: 20px; 
} 
/*progressbar*/ 
#progressbar { 
    margin-bottom: 30px; 
    overflow: hidden; 
    /*CSS counters to number the steps*/ 
    counter-reset: step; 
} 
#progressbar li { 
    list-style-type: none; 
    color: white; 
    text-transform: uppercase; 
    font-size: 9px; 
    width: 50%; 
    float: left; 
    position: relative; 
} 
#progressbar li:before { 
    content: counter(step); 
    counter-increment: step; 
    width: 20px; 
    line-height: 20px; 
    display: block; 
    font-size: 10px; 
    color: #333; 
    background: white; 
    border-radius: 3px; 
    margin: 0 auto 5px auto; 
} 
/*progressbar connectors*/ 
#progressbar li:after { 
    content: ''; 
    width: 100%; 
    height: 2px; 
    background: white; 
    position: absolute; 
    left: -50%; 
    top: 9px; 
    z-index: -1; /*put it behind the numbers*/ 
} 
#progressbar li:first-child:after { 
    /*connector not needed before the first step*/ 
    content: none; 
} 
/*marking active/completed steps green*/ 
/*The number of the step and the connector before it = green*/ 
#progressbar li.active:before, #progressbar li.active:after{ 
    background: #27AE60; 
    color: white; 
} 

    </style> 
</head> 
<body> 
    <!-- progressbar --> 
    <ul id="progressbar"> 
     <li class="active">Account Setup</li> 
     <li>Social Profiles</li> 
    </ul> 
    <!-- multistep form --> 
    <form id="msform1" class="msform"> 
     <!-- fieldsets --> 
     <fieldset> 
      <h2 class="fs-title">Create your account</h2> 
      <h3 class="fs-subtitle">This is step 1</h3> 
      <input type="text" name="email" id="emailAccount" placeholder="Email" /> 
      <input type="password" name="pass" placeholder="Password" /> 
      <input type="password" name="cpass" placeholder="Confirm Password" /> 
      <input type="button" name="submit1" class="submit next action-button" value="Register" /> 
     </fieldset> 
    </form> 
    <form id="msform2" class="msform"> 
     <fieldset> 
      <h2 class="fs-title">Welcome <label id="infoEmailAccount"></label></h2> 
      <h3 class="fs-subtitle">For complete account, link with 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="submit2" class="submit action-button" value="Complete" /> 
     </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> 

    <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 

    var numStep = 1; 
    var errStep = false; 

    $(".submit").click(function(){ 
     var statusStep = false; 
     switch(numStep) { 
      case 1: 
       $.ajax({ 
        beforeSend: function(){ 
         $('#msform1 .loader').show(); 
        } 
        , cache: false 
        , type: "POST" 
        , dataType: "json" 
        , url: "include/InsertAjaxAccount.inc.php" 
        , data: $("#msform1").serialize() 
        , success: function(res){ 
         if(res.err){ 
          errStep = true; 
          console.error('Custom error: ' + res.errMsg); 
         } 
         else{ 
          console.info('OK'); 
          errStep = false; 
         } 
         $('#msform1 .loader').hide(); 
        } 
        , error:function(){ 
         errStep = true; 
         console.error('System error'); 
         $('#msform1 .loader').hide(); 
        } 
       }); 

       break; 
      case 2: 
       $.ajax({ 
        beforeSend: function(){ 
         $('#msform2 .loader').show(); 
        } 
        , cache: false 
        , type: "POST" 
        , dataType: "json" 
        , url: "include/InsertAjaxSocialNetwork.inc.php" 
        , data: $("#msform2").serialize() 
        , success: function(res){ 
         if(res.err){ 
          errStep = true; 
          console.error('Custom error: ' + res.errMsg); 
         } 
         else{ 
          console.info('OK'); 
          errStep = false; 
         } 
         $('#msform1 .loader').hide(); 
        } 
        , error:function(){ 
         errStep = true; 
         console.error('System error'); 
         $('#msform1 .loader').hide(); 
        } 
       }); 

       break; 
      default: 
       console.error('step not recognized: ' + numStep); 
     } 
     return false; 
    }); 

    $(".next").click(function(){ 
     console.log('Error: ' + errStep) 
     if(animating || errStep) return false; 
     animating = true; 

     numStep++; 

     current_fs = $(this).parent(); 
     next_fs = $(this).parent().parent().next().children(); 

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

     //FOR EXAMPLE 
     document.getElementById('infoEmailAccount').innerText = document.getElementById('emailAccount').value; 

     console.log(numStep); 
    }); 

    $(".previous").click(function(){ 
     console.log('Error: ' + errStep) 
     if(animating || errStep) return false; 
     animating = true; 

     numStep--; 

     current_fs = $(this).parent(); 
     previous_fs = $(this).parent().parent().prev().children(); 

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

     console.log(numStep); 
    }); 



    </script> 


</body> 

</html>

来源

2016-01-28 15:55:59 Joaquinglezsantos

工作正常！非常感谢你，但我有antoher问题，我不能去上一步，当我点击上一个按钮什么都没有发生。你能解决吗？ –

我已经尝试添加另一个字段集，所以我有5个字段集但它不起作用。它只用2个fieldset工作吗？ –

如果您需要返回上一步，则必须将必要的fildset放在相同的表单中。正如我的代码，你不能回到以前的步骤。您可以获取任何形式的任何值字段，因为它位于客户端。 – Joaquinglezsantos

使用字段集的多步骤表

回答

相关问题