gihan gihan - 1 month ago 32
jQuery Question

Bootstrap form wizard steps with custom buttons

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.

Answer
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()            
};