Removing Previous Button on First Step jQuery Steps

Question

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>

Obviously there's way too much html to put it in here, I'll add a single fieldset which is the content for each wizard piece. — Vince Kronlein, Mar 22 '15 at 04:07
I'm thinking you could hide the Previous button on page load, and the plugin will gracefully show it when you cycle to the next page, thats the solution. — iamwhitebox, Mar 22 '15 at 04:10
So with basic jQuery as opposed to using the plugin API itself? — Vince Kronlein, Mar 22 '15 at 04:34

Jonny · Answer 1 · 2016-09-21T09:44:43.163

12

This has the same effect, but is way less hack-y:

.wizard > .actions > ul > li.disabled {
  display: none;
}

edited Sep 21 '16 at 09:44

answered Jun 01 '15 at 16:58

Jonny

1,973
20
30

@Anirudh I know it's been a while, but this would go in the *.css file you are using to style the wizard. (or in the local *.html file's style tag).. – Matt Oestreich Nov 05 '18 at 01:58

score 5 · Accepted Answer · answered Mar 22 '15 at 04:36

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!

Sorry I didn't get back to this sooner, thats exactly what I had in mind - looks like you had to do some finagling with the jquery a bit! — iamwhitebox, Mar 23 '15 at 16:21

score 1 · Answer 3 · answered Oct 09 '18 at 11:15

This is a good solution using jQuery:

$("a[href$='next']").hide();
$("a[href$='previous']").hide();

This solution allow you to call .click() function to go next or previous, like this:

$("a[href$='next']").click();

or

$("a[href$='previous']").click();

score 0 · Answer 4 · answered Jan 08 '20 at 04:07

0

The previous solutions didn't quite work for me, but this did:

.wizard > .actions > ul > li.disabled > a {
  background: white;
}

answered Jan 08 '20 at 04:07

xke

923
9
12

Removing Previous Button on First Step jQuery Steps

4 Answers4