jQuery Steps - reset to the main step

Question

I have referred to these links for resetting to first step, but didn't help.

I have added custom Submit button on the last step. And want to reset form as well as steps on ajax submit.

This is my code,

$("#employee_create").steps({
    headerTag: "h6",
    bodyTag: "section",
    transitionEffect: "fade",
    titleTemplate: '<span class="step">#index#</span> #title#',
    labels: {
        finish: "Submit"
    },
    onStepChanged: function (event, currentIndex, newIndex) {
        if (currentIndex === 4) { //if last step
            //remove default #finish button
            $('#employee_create').find('a[href="#finish"]').remove();
            //append a submit type button
            $('#employee_create .actions li:last-child').append('<button type="button" id="emp_submit" onclick="empFormSubmit(this)" class="btn btn-primary">Submit <span class="spinner" style="display: none;"><i class="fa fa-circle-o-notch fa-spin"></i></span></button>');
        } else {
            $('#emp_submit').remove();
        }
    },
    onStepChanging: function (event, currentIndex, newIndex) {
        return currentIndex > newIndex || !(3 === newIndex && Number($("#age-2").val()) < 18) && (currentIndex < newIndex && (emp_form.find(".body:eq(" + newIndex + ") label.error").remove(),
                emp_form.find(".body:eq(" + newIndex + ") .error").removeClass("error")),
                emp_form.validate().settings.ignore = ":disabled,:hidden",
                emp_form.valid());
    },
    onFinishing: function (event, currentIndex) {
        return emp_form.validate().settings.ignore = ":disabled",
                emp_form.valid();
    },
    onFinished: function (event, currentIndex) {

    }
}), $("#employee_create").validate({
    ignore: "input[type=hidden]",
    errorClass: "text-danger",
    successClass: "text-success",
    highlight: function (element, errorClass) {
        $(element).removeClass(errorClass);
    },
    unhighlight: function (element, errorClass) {
        $(element).removeClass(errorClass);
    },
    errorPlacement: function (error, element) {
        error.insertAfter(element);
    },
    rules: {
        email: {
            email: !0
        }
    }
});

What I have tried so far is

$('#emp_submit').on('click', function(){
    emp_form[0].reset();
});

What am I doing wrong?

score 0 · Answer 1 · answered May 21 '18 at 14:07

I have added a custom script for resetting the steps, which I don't find correct.

$('#employee_create-p-0').show();
$('#employee_create-p-4').hide();
$('#employee_create .steps').find('li').removeClass().addClass('disabled');
$('#employee_create .steps li:first').removeClass('disabled').addClass('first current');

Please let me know if there's any other reliable way to do this.

jQuery Steps - reset to the main step

1 Answers1