API tools faq
paste
Advertisement
gsmashik

multi step

gsmashik
Jun 26th, 2018
97
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 5.31 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Document</title>
  6.  
  7. <link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
  8. <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
  9.  
  10. <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
  11.  
  12. <style>
  13.  
  14.  
  15. body {
  16.     margin-top:40px;
  17. }
  18. .stepwizard-step p {
  19.     margin-top: 10px;
  20. }
  21. .stepwizard-row {
  22.     display: table-row;
  23. }
  24. .stepwizard {
  25.     display: table;
  26.     width: 50%;
  27.     position: relative;
  28. }
  29. .stepwizard-step button[disabled] {
  30.     opacity: 1 !important;
  31.     filter: alpha(opacity=100) !important;
  32. }
  33. .stepwizard-row:before {
  34.     top: 14px;
  35.     bottom: 0;
  36.     position: absolute;
  37.     content: " ";
  38.     width: 100%;
  39.     height: 1px;
  40.     background-color: #ccc;
  41.     z-order: 0;
  42. }
  43. .stepwizard-step {
  44.     display: table-cell;
  45.     text-align: center;
  46.     position: relative;
  47. }
  48. .btn-circle {
  49.     width: 30px;
  50.     height: 30px;
  51.     text-align: center;
  52.     padding: 6px 0;
  53.     font-size: 12px;
  54.     line-height: 1.428571429;
  55.     border-radius: 15px;
  56. }
  57.  
  58. </style>
  59. </head>
  60. <body>
  61. <div class="container">
  62.  
  63. <div class="stepwizard col-md-offset-3">
  64.     <div class="stepwizard-row setup-panel">
  65.       <div class="stepwizard-step">
  66.         <a href="#step-1" type="button" class="btn btn-primary btn-circle">1</a>
  67.         <p>Step 1</p>
  68.       </div>
  69.       <div class="stepwizard-step">
  70.         <a href="#step-2" type="button" class="btn btn-default btn-circle" disabled="disabled">2</a>
  71.         <p>Step 2</p>
  72.       </div>
  73.       <div class="stepwizard-step">
  74.         <a href="#step-3" type="button" class="btn btn-default btn-circle" disabled="disabled">3</a>
  75.         <p>Step 3</p>
  76.       </div>
  77.     </div>
  78.   </div>
  79.  
  80.   <form role="form" action="" method="post">
  81.     <div class="row setup-content" id="step-1">
  82.       <div class="col-xs-6 col-md-offset-3">
  83.         <div class="col-md-12">
  84.           <h3> Step 1</h3>
  85.           <div class="form-group">
  86.             <label class="control-label">First Name</label>
  87.             <input  maxlength="100" type="text" required="required" class="form-control" placeholder="Enter First Name"  />
  88.           </div>
  89.           <div class="form-group">
  90.             <label class="control-label">Last Name</label>
  91.             <input maxlength="100" type="text" required="required" class="form-control" placeholder="Enter Last Name" />
  92.           </div>
  93.           <div class="form-group">
  94.             <label class="control-label">Address</label>
  95.             <textarea required="required" class="form-control" placeholder="Enter your address" ></textarea>
  96.           </div>
  97.           <button class="btn btn-primary nextBtn btn-lg pull-right" type="button" >Next</button>
  98.         </div>
  99.       </div>
  100.     </div>
  101.     <div class="row setup-content" id="step-2">
  102.       <div class="col-xs-6 col-md-offset-3">
  103.         <div class="col-md-12">
  104.           <h3> Step 2</h3>
  105.           <div class="form-group">
  106.             <label class="control-label">Company Name</label>
  107.             <input maxlength="200" type="text" required="required" class="form-control" placeholder="Enter Company Name" />
  108.           </div>
  109.           <div class="form-group">
  110.             <label class="control-label">Company Address</label>
  111.             <input maxlength="200" type="text" required="required" class="form-control" placeholder="Enter Company Address"  />
  112.           </div>
  113.           <button class="btn btn-primary nextBtn btn-lg pull-right" type="button" >Next</button>
  114.         </div>
  115.       </div>
  116.     </div>
  117.     <div class="row setup-content" id="step-3">
  118.       <div class="col-xs-6 col-md-offset-3">
  119.         <div class="col-md-12">
  120.           <h3> Step 3</h3>
  121.           <button class="btn btn-success btn-lg pull-right" type="submit">Submit</button>
  122.         </div>
  123.       </div>
  124.     </div>
  125.   </form>
  126.  
  127. </div>
  128.  
  129. <script>
  130.     $(document).ready(function () {
  131.   var navListItems = $('div.setup-panel div a'),
  132.           allWells = $('.setup-content'),
  133.           allNextBtn = $('.nextBtn');
  134.  
  135.   allWells.hide();
  136.  
  137.   navListItems.click(function (e) {
  138.       e.preventDefault();
  139.       var $target = $($(this).attr('href')),
  140.               $item = $(this);
  141.  
  142.       if (!$item.hasClass('disabled')) {
  143.           navListItems.removeClass('btn-primary').addClass('btn-default');
  144.           $item.addClass('btn-primary');
  145.           allWells.hide();
  146.           $target.show();
  147.           $target.find('input:eq(0)').focus();
  148.       }
  149.   });
  150.  
  151.   allNextBtn.click(function(){
  152.       var curStep = $(this).closest(".setup-content"),
  153.           curStepBtn = curStep.attr("id"),
  154.           nextStepWizard = $('div.setup-panel div a[href="#' + curStepBtn + '"]').parent().next().children("a"),
  155.           curInputs = curStep.find("input[type='text'],input[type='url']"),
  156.           isValid = true;
  157.  
  158.       $(".form-group").removeClass("has-error");
  159.       for(var i=0; i<curInputs.length; i++){
  160.          if (!curInputs[i].validity.valid){
  161.              isValid = false;
  162.              $(curInputs[i]).closest(".form-group").addClass("has-error");
  163.          }
  164.      }
  165.  
  166.      if (isValid)
  167.          nextStepWizard.removeAttr('disabled').trigger('click');
  168.  });
  169.  
  170.  $('div.setup-panel div a.btn-primary').trigger('click');
  171. });
  172. </script>
  173. </body>
  174. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!