Vince Kronlein Vince Kronlein - 2 months ago 38
jQuery Question

Removing Previous Button on First Step jQuery Steps

I'm using jQuery Steps for my site signup wizard, works awesome with the exception that on the first step I'm getting the previous button, which really makes no sense since there is no previous content.

I looked at the

onInit()
function in the API but there is no setting for
enablePreviousButton
, only
enableFinishButton
and
enableCancelButton
.

Is there a way I can remove the Previous button on the first step?

Requested code:

$("#register-form").steps({
headerTag: "h3",
bodyTag: "fieldset",
autoFocus: true,
onInit: function (event, current) {
alert(current);
},
labels: {
finish: 'Sign Up <i class="fa fa-chevron-right"></i>',
next: 'Next <i class="fa fa-chevron-right"></i>',
previous: '<i class="fa fa-chevron-left"></i> Previous'
}
});


HTML:

<h3><?= $lang_wizard_account; ?></h3>
<fieldset>
<legend><?= $lang_text_your_details; ?></legend>
<div class="form-group">
<label class="control-label col-sm-3" for="username"><b class="required">*</b> <?= $lang_entry_username; ?></label>
<div class="col-sm-8">
<input type="text" name="username" value="<?= $username; ?>" class="form-control" placeholder="<?= $lang_entry_username; ?>" autofocus id="username" required>
<?php if ($error_username) { ?>
<span class="help-block error"><?= $error_username; ?></span>
<?php } ?>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-3" for="firstname"><b class="required">*</b> <?= $lang_entry_firstname; ?></label>
<div class="col-sm-8">
<input type="text" name="firstname" value="<?= $firstname; ?>" class="form-control" placeholder="<?= $lang_entry_firstname; ?>" id="firstname" required>
<?php if ($error_firstname) { ?>
<span class="help-block error"><?= $error_firstname; ?></span>
<?php } ?>
</div>
</div>
....
</fieldset>

Answer

Ok, pretty ugly hack but it does work as expected:

$("#register-form").steps({
    headerTag: "h3",
    bodyTag: "fieldset",
    autoFocus: true,
    onInit: function (event, current) {
        $('.actions > ul > li:first-child').attr('style', 'display:none');
    },
    onStepChanged: function (event, current, next) {
        if (current > 0) {
            $('.actions > ul > li:first-child').attr('style', '');
        } else {
            $('.actions > ul > li:first-child').attr('style', 'display:none');
        }
    },
    labels: {
        finish: 'Sign Up <i class="fa fa-chevron-right"></i>',
        next: 'Next <i class="fa fa-chevron-right"></i>',
        previous: '<i class="fa fa-chevron-left"></i> Previous'
    }
});

Thanks to whitebox!