how to trigger on jquery.smart wizard Finish button?

Question

Iam very new in jquery. here is jquery from smart wizard:

/ Default Properties and Events
    $.fn.smartWizard.defaults = {
        selected: 0,  // Selected Step, 0 = first step
        keyNavigation: true, // Enable/Disable key navigation(left and right keys are used if enabled)
        enableAllSteps: false,
        transitionEffect: 'fade', // Effect on navigation, none/fade/slide/slideleft
        contentURL:null, // content url, Enables Ajax content loading
        contentCache:true, // cache step contents, if false content is fetched always from ajax url
        cycleSteps: false, // cycle step navigation
        enableFinishButton: false, // make finish button enabled always
        hideButtonsOnDisabled: false, // when the previous/next/finish buttons are disabled, hide them instead?
        errorSteps:[],    // Array Steps with errors
        labelNext:'Next',
        labelPrevious:'Previous',
        labelFinish:'Finish',
        noForwardJumping: false,
        ajaxType: "POST",
        onLeaveStep: null, // triggers when leaving a step
        onShowStep: null,  // triggers when showing a step
        onFinish: null,  // triggers when Finish button is clicked
        includeFinishButton : true   // Add the finish button
    };

})(jQuery);



<script type="text/javascript">
        $(document).ready(function() {
            // Smart Wizard         
            $('#wizard').smartWizard({
                onLeaveStep: leaveAStepCallback,
                onFinish: onFinishCallback
            });

            function leaveAStepCallback(obj, context) {
                debugger;
                alert("Leaving step " + context.fromStep + " to go to step " + context.toStep);
                return validateSteps(context.fromStep); // return false to stay on step and true to continue navigation 
            }

            function onFinishCallback(objs, context) {

                debugger;
                if (validateAllSteps()) {
                    $('form').submit();
                }
            }

            // Your Step validation logic
            function validateSteps(stepnumber) {
                debugger;
                var isStepValid = true;
                // validate step 1
                if (stepnumber == 1) {
                    // Your step validation logic
                    // set isStepValid = false if has errors
                }
                // ...      
            }
            function validateAllSteps() {
                debugger;
                var isStepValid = true;
                // all step validation logic     
                return isStepValid;
            }
        });
</script>

i need some functione for onFinish, where i can send request with many parameters. how to do it?

score 5 · Accepted Answer · edited Oct 01 '13 at 18:54

First of all download the smartWizard.js from https://github.com/mstratman/jQuery-Smart-Wizard then add it in your workspace and give the reference in your html/jsp.

<script type="text/javascript" src="js/jquery.smartWizard-2.1.js"></script>

then,

<script type="text/javascript">
$(document).ready(function(){
    // Smart Wizard     
    $('#wizard').smartWizard();
    //$('#range').colResizable();

    function onFinishCallback(){
        $('#wizard').smartWizard('showMessage','Finish Clicked');
    } 
});
</script>

Then in the jquery.smartWizard-2.1.js search for onFinish, Just try giving alert and then whatever you want to add you can add it directly in the .js file.

score 0 · Answer 2 · edited Sep 16 '19 at 19:44

0

add your custom function like below.

onFinish: function () { 
    alert("Finish Clicked!") 
},  // triggers when Finish button is clicked

edited Sep 16 '19 at 19:44

Zak

6,976
2
26
48

answered Feb 12 '17 at 08:26

Murad Ariff

11
2

score 0 · Answer 3 · answered Aug 16 '21 at 21:22

You can listen for an onclick event on the toolbar extra buttons.

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

// Initiate wizard
$("#wizard").smartWizard({
  selected: 0,
  theme: "default",
  autoAdjustHeight: true,
  transition: {
    animation: "slide-horizontal",
  },
  toolbarSettings: {
    toolbarPosition: "bottom",
    toolbarExtraButtons: [btnFinish, btnCancel],
  },
});

score -1 · Answer 4 · answered Apr 12 '16 at 05:41

-1

// Changing Label of finish button

$('#wizard').smartWizard.defaults.labelFinish = "confirm & Buy";

answered Apr 12 '16 at 05:41

user2801665

117
1
3

score -1 · Answer 5 · edited Mar 27 '17 at 05:26

-1

Use the following code, your form will be submitted. I hope this will help you.

var Myform=$('#saveForm');
    $(document).on('click','.btn-finish',function(e){
        $('#saveForm')[0].submit();
    });

edited Mar 27 '17 at 05:26

Deep Kakkar

5,831
4
39
75

answered Mar 27 '17 at 05:16

Mudi

9
6

how to trigger on jquery.smart wizard Finish button?

5 Answers5