Figure Out Last Step Jquery Smart Wizard 5?

Question

I want to show a 'finished' button at the last step. I am using jquery smart wizard.

I don't see any built in way to figure if I am on the last step or not? Am I missing something?

$(document).ready(function(){

  // Toolbar extra buttons
  var btnFinish = $('<button></button>').text('Finish')
                                   .addClass('btn btn-info')
                                   .on('click', function(){ alert('Finish Clicked'); });
  var btnCancel = $('<button></button>').text('Cancel')
                                   .addClass('btn btn-danger')
                                   .on('click', function(){ $('#smartwizard').smartWizard("reset"); });

  // Step show event
  $("#smartwizard").on("showStep", function(e, anchorObject, stepNumber, stepDirection, stepPosition) {
      $("#prev-btn").removeClass('disabled');
      $("#next-btn").removeClass('disabled');
      if(stepPosition === 'first') {
          $("#prev-btn").addClass('disabled');
      } else if(stepPosition === 'last') {
          $("#next-btn").addClass('disabled');
      } else {
          $("#prev-btn").removeClass('disabled');
          $("#next-btn").removeClass('disabled');
      }
  });

  // Smart Wizard
  $('#smartwizard').smartWizard({
      selected: 0,
      theme: 'arrows',
      transition: {
          animation: 'slide-horizontal', // Effect on navigation, none/fade/slide-horizontal/slide-vertical/slide-swing
      },
      toolbarSettings: {
          toolbarPosition: 'both', // both bottom
          toolbarExtraButtons: [btnFinish, btnCancel]
      }
  });

  // External Button Events
  $("#reset-btn").on("click", function() {
      // Reset wizard
      $('#smartwizard').smartWizard("reset");
      return true;
  });

  $("#prev-btn").on("click", function() {
      // Navigate previous
      $('#smartwizard').smartWizard("prev");
      return true;
  });

  $("#next-btn").on("click", function() {
      // Navigate next
      $('#smartwizard').smartWizard("next");
      return true;
  });


  // Demo Button Events
  $("#got_to_step").on("change", function() {
      // Go to step
      var step_index = $(this).val() - 1;
      $('#smartwizard').smartWizard("goToStep", step_index);
      return true;
  });

  $("#is_justified").on("click", function() {
      // Change Justify
      var options = {
        justified: $(this).prop("checked")
      };

      $('#smartwizard').smartWizard("setOptions", options);
      return true;
  });

  $("#dark_mode").on("click", function() {
      // Change dark mode
      var options = {
        darkMode: $(this).prop("checked")
      };

      $('#smartwizard').smartWizard("setOptions", options);
      return true;
  });

  $("#animation").on("change", function() {
      // Change theme
      var options = {
        transition: {
            animation: $(this).val()
        },
      };
      $('#smartwizard').smartWizard("setOptions", options);
      return true;
  });

  $("#theme_selector").on("change", function() {
      // Change theme
      var options = {
        theme: $(this).val()
      };
      $('#smartwizard').smartWizard("setOptions", options);
      return true;
  });

});

Answer 1

This is how i detect the last step

    $("#smartwizard").on("leaveStep", function(e, anchorObject, currentStepIndex, nextStepIndex, stepDirection) {
            if(anchorObject.prevObject.length - 1 == nextStepIndex){
                alert('this is the last step'); 
            }else{
                alert('this is not the last step');                
            }
        });

Answer 2

Initially I used the same method but it failed. To make it work:

1. Create the submit button with the class d-none if you're using Bootstrap 4 to inorder to hide the button by default.
2. Identify and select the last step number, then remove the class d-none

 var btnFinish = $('<button></button>').text('SUBMIT')
                                  .addClass('btn btn-info sw-btn-group-extra d-none')
                                  .on('click', function(){  });
  //smart wizard configurations                             
  var wizard = $('#smartwizard').smartWizard({
    selected: 0, // Initial selected step, 0 = first step
    theme: 'arrows', // theme for the wizard, related css need to include for other than default theme
    justified: true, // Nav menu justification. true/false
    darkMode:false, // Enable/disable Dark Mode if the theme supports. true/false
    autoAdjustHeight: true, // Automatically adjust content height
    cycleSteps: false, // Allows to cycle the navigation of steps
    backButtonSupport: true, // Enable the back button support
    enableURLhash: false, // Enable selection of the step based on url hash
    transition: {
        animation: 'none', // Effect on navigation, none/fade/slide-horizontal/slide-vertical/slide-swing
        speed: '400', // Transion animation speed
        easing:'' // Transition animation easing. Not supported without a jQuery easing plugin
    },
    toolbarSettings: {
        toolbarPosition: 'bottom', // none, top, bottom, both
        toolbarButtonPosition: 'right', // left, right, center
        showNextButton: true, // show/hide a Next button
        showPreviousButton: true, // show/hide a Previous button
        toolbarExtraButtons: [btnFinish] // Extra buttons to show on toolbar, array of jQuery input/buttons elements

    },
    anchorSettings: {
        anchorClickable: true, // Enable/Disable anchor navigation
        enableAllAnchors: false, // Activates all anchors clickable all times
        markDoneStep: true, // Add done state on navigation
        markAllPreviousStepsAsDone: true, // When a step selected by url hash, all previous steps are marked done
        removeDoneStepOnNavigateBack: false, // While navigate back done step after active step will be cleared
        enableAnchorOnDoneStep: true // Enable/Disable the done steps navigation
    },
    keyboardSettings: {
        keyNavigation: true, // Enable/Disable keyboard navigation(left and right keys are used if enabled)
        keyLeft: [37], // Left key code
        keyRight: [39] // Right key code
    },
    lang: { // Language variables for button
        next: 'Next',
        previous: 'Previous'
    },
    disabledSteps: [], // Array Steps disabled
    errorSteps: [], // Highlight step with errors
    hiddenSteps: [], // Hidden steps

  });
  
  //The code for the final step
  $(wizard).on("leaveStep", function(e, anchorObject, stepNumber, stepDirection) {
    if(stepDirection == "2") //here is the final step: Note: 0,1,2
    {
      $('.sw-btn-group-extra').removeClass('d-none');
    }
    else
    {
      $('.sw-btn-group-extra').addClass('d-none');
    }
});

<html>
<head>
  <title>Smart Wizard</title>
    <!-- CSS -->
  <link href="https://cdn.jsdelivr.net/npm/smartwizard@5/dist/css/smart_wizard_all.min.css" rel="stylesheet" type="text/css" />
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/smartwizard@5/dist/js/jquery.smartWizard.min.js"></script>

</head>
<body>
<div id="smartwizard">
          <ul class="nav">
             <li>
                 <a class="nav-link" href="#step-1">
                    Step 1
                 </a>
             </li>
             <li>
                 <a class="nav-link" href="#step-2">
                    Step 2
                 </a>
             </li>
             <li>
                 <a class="nav-link" href="#step-3">
                    Step 3
                 </a>
             </li>
          </ul>

          <div class="tab-content">
             <div id="step-1" class="tab-pane" role="tabpanel">
                Step 1
             </div>
             <div id="step-2" class="tab-pane" role="tabpanel">
                Step 2
             </div>
              <div id="step-3" class="tab-pane" role="tabpanel">
                Step 3
             </div>
          </div>

       </div>

<body>

</html>