Search code examples
javascriptjqueryjquery-steps

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>

Solution

  • 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!