CODEWITHSUNDEEP
javascriptjqueryhtml
thisuser
thisuser

Reputation: 129

Find out if last div is visible and then disable next button?

I have a form spread across multiple divs that are being displayed on and off using jQuery. I would like to disable the next and previous buttons on the first and last div when they are visible.

This sounded like an easy task based on the little that I do know about jQuery but it is proving to be more difficult than I imagined given my current code.

Here are my current next and previous button functions

    var sel = "div[data-type='form']";
    var current = $(sel).get(0);

    $(sel).not(current).hide();

    $("#next").click(function () {
        if ($(form).valid()) {
            current = $(current).next(sel);
            $(current).show();
            $(sel).not(current).hide();
        } 
    });

    $("#prev").click(function () {
        current = $(current).prev(sel);
        $(current).show();
        $(sel).not(current).hide();

    });

and here is a fiddle of what is happening at the moment http://jsfiddle.net/GZ9H8/6/

Upvotes: 2

Views: 1039

Answers (2)

Andrea
Andrea

Reputation: 396

This may be useful:

$("#next").click(function () {
    if ($(form).valid()) {
        current = $(current).next(sel);
        $(current).show();
        $(sel).not(current).hide();

        // Last element's index is equal to length - 1
        $(this).attr('disabled', current.index(sel) == $(sel).length - 1);
        // First element's index is equal to 0
        $("#prev").attr('disabled', current.index(sel) == 0);
    }
});

$("#prev").click(function () {
    current = $(current).prev(sel);
    $(current).show();
    $(sel).not(current).hide();

    // Last element's index is equal to length - 1
    $("#next").attr('disabled', current.index(sel) == $(sel).length - 1);
    // First element's index is equal to 0
    $(this).attr('disabled', current.index(sel) == 0);
});

Regards

Upvotes: 1

Matt Burland
Matt Burland

Reputation: 45155

This works (Note: I removed the validation for testing purposes).

$("#next").click(function () {
    if (true) {
        current = $(current).next(sel);
        $(current).show();
        $(sel).not(current).hide();
        if (!$(current).next(sel).get(0)){
            $(this).hide();
        }
        if ($(current).prev(sel).get(0)){
             $("#prev").show();
        }
    }
});

$("#prev").click(function () {
    current = $(current).prev(sel);
    $(current).show();
    $(sel).not(current).hide();
    if ($(current).next(sel).get(0)){
       $("#next").show();
    }
    if (!$(current).prev(sel).get(0)){
        $(this).hide();
    }
});

Note that the previous button should probably be hidden from the start. Also, you can disable instead of hide if you want.

Upvotes: 1

Related Questions