Bootstrap form wizard steps with custom buttons

Question

I am using bootstrap form wizard to create a HTML form. I have a custom link/button in my form. Instead of default Next button I added a custom button for navigation. My requirement is that when button is clicked, how can I navigate to another tab content? Custom button logic handle via AngularJs function.

HTML markup

  <div class="form-actions">
     <div class="row"> <div class="col-sm-12">
     <ul class="pager wizard no-margin">
     <!--<li class="previous first disabled">
     <a href="javascript:void(0);" class="btn btn-lg btn-default"> First </a>
     </li>-->                                                                                   <!--<li class="next last">
 <a href="javascript:void(0);" class="btn btn-lg btn-primary"> Last </a>                                                                        </li>-->
<li class="next"><a href="javascript:void(0);"
class="btn btn-lg txt-color-blue" ng-click="setupNext()"> Next </a></li>                                                                                </ul>
    </div>
    </div>
    </div>

AngularJs code:

$scope.setupNext = function() {
    //how can I navigate to next tab or specific tab using jQuery
};

If any one knows please let me know.

Here is an example which show how to use custom buttons in bootstrap form wizard - http://vadimg.com/twitter-bootstrap-wizard-example/examples/basic-custombuttons.html — Narendra CM, Feb 09 '16 at 07:30

score 1 · Answer 1 · answered Feb 09 '16 at 08:05

Hi see this is the working example where i am showing div 1 initially then on click of shownext i am showing div 2 and the on click of next i am showing div 3 and on next i am showing di3 again

this is the plunker link

// Code goes here

var app = angular.module('myApp', []);

app.controller('IndexCtrl', function($scope) {

  $scope.showDiv1 = true;
  $scope.showDiv2 = false;
  $scope.showDiv3 = false;
  $scope.showNext = function(toshow) {
    $scope.showDiv1 = false;
    $scope.showDiv2 = false;
    $scope.showDiv3 = false;
    if (toshow == "showDiv1") {
      $scope.showDiv1 = true;
    } else if (toshow == "showDiv2") {
      $scope.showDiv2 = true;
    } else {
      $scope.showDiv3 = true;
    }

  }

});

<!DOCTYPE html>
<html>

<head>
  <meta content='text/html; charset=UTF-8' http-equiv='Content-Type' />


  <link rel="stylesheet" href="style.css">
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>

  <script src="script.js"></script>
</head>

<body ng-app="myApp" dir="rtl">
  <div ng-controller="IndexCtrl">
    <div ng-show="showDiv1">
      <h1>this is div 1 </h1>
      <button ng-click="showNext('showDiv2')">Show Next</button>
    </div>
    <div ng-show="showDiv2">
      <h1>this is div 2 </h1>
      <button ng-click="showNext('showDiv3')">Show Next</button>
    </div>
    <div ng-show="showDiv3">

      <h1>this is div 3 </h1>
      <button ng-click="showNext('showDiv1')">Show Next</button>

    </div>
  </div>
</body>

</html>

Might be this will help you

thanks for sharing but seems like lengthy.I found a way to do this easily.Plz refer. — gihan-maduranga, Feb 09 '16 at 09:52

score 1 · Accepted Answer · answered Feb 09 '16 at 09:55

function wizardNext(){
    $('#bootstrap-wizard-1').bootstrapWizard({
    'tabClass': 'form-wizard',
    'onNext': function (tab, navigation, index) {
     var $valid = $("#wizard-1");
     if (!$valid) {
     $validator.focusInvalid();
         return false;
    } else {
    $('#bootstrap-wizard-1').find('.form-wizard').children('li').eq(index - 1).addClass('complete');
    $('#bootstrap-wizard-1').find('.form-wizard').children('li').eq(index - 1).find('.step') .html('<i class="fa fa-check"></i>');
          }
         }
     });
    }

Function call

$scope.setupNext = function() {
    //you can handle form logic here
      wizardNext()            
};

$scope.setupNext2 = function() {
      //you can handle form logic here
      wizardNext()            
};

score 1 · Answer 3 · answered Oct 25 '16 at 08:09

Though it's a late post, it may help someone. I have used bootstrap wizard in directive of angularjs.

.directive('rootwizard', function($route){
  return {
    require : '?^ngModel',
    link: function(scope, element, attrs, ngModel){
      element.bootstrapWizard({     
          onTabClick: function(tab, navigation, index) {
                return false;
            },
            onNext: function(tab, navigation, index) {
                return false;
            },
            onPrevious: function(tab, navigation, index){
                return true;
            },
            onTabShow: function(tab, navigation, index) {
                 ngModel.$setViewValue(index);
                 ngModel.$render(); 
            }
      });
    }
  };
})

The html code::

<div id="rootwizard" rootwizard ng-model="curIndex">
            <div class="navbar">
              <div class="navbar-inner">
                <div class="container">
                    <ul class="nav nav-pills nav-wizard">
                        <li>
                            <a href="#tab1" class="long" data-target="#tab1" data-toggle="tab">&nbsp;Tab1</a>
                            <div class="nav-arrow"></div>
                        </li>
                        <li>
                            <div class="nav-wedge"></div>
                            <a href="#tab2" class="long" data-target="#tab2" data-toggle="tab">&nbsp;Tab2</a>
                            <div class="nav-arrow"></div>
                        </li>
                        <li>
                            <div class="nav-wedge"></div>
                            <a href="#tab3" class="long" data-target="#tab3" data-toggle="tab">&nbsp;Tab3</a>
                            <div class="nav-arrow"></div>
                        </li>
                        <li>
                            <div class="nav-wedge"></div>
                            <a href="#tab4" class="long" data-target="#tab4" data-toggle="tab">&nbsp;Tab4</a>
                            <div class="nav-arrow"></div>
                        </li>
                        <li>
                            <div class="nav-wedge"></div>
                            <a href="#tab5" class="long" data-target="#tab5" data-toggle="tab">&nbsp;Tab5</a>
                            <div class="nav-arrow"></div>
                        </li>
                    </ul>
                </div>
              </div>
            </div>
            <div class="tab-content">
                <div class="tab-pane wave" id="tab1">
                    1
                </div>
                <div class="tab-pane wave" id="tab2">
                    2
                </div>
                <div class="tab-pane wave" id="tab3">
                    3
                </div>
                <div class="tab-pane wave" id="tab4">
                    4
                </div>
                <div class="tab-pane wave" id="tab5">
                    5
                </div>              

                <ul class="pager wizard">
                    <li class="previous" ><a href="" id="prebtn" ng-click="getPreviousTab(curIndex)">Previous</a></li>
                    <li class="next" ><a href="" id="nxtbtn" ng-click="getNextTab(curIndex)">Next</a></li>
                </ul>
            </div>
        </div>

In controller add the following code:

scope.curIndex = 0;
scope.getPreviousTab = function(id){  
    angular.element('[data-target="#tab'+id+'"]').tab('show'); 
}
scope.getNextTab = function(id){
    var nextTabVal = id + 1;
    angular.element('[data-target="#tab'+nextTabVal+'"]').tab('show'); 
}

This works great for me. Hope it helps someone!

Bootstrap form wizard steps with custom buttons

3 Answers3