How do I hide the next button after the last div content in jquery

Question

What I want to be able to do is load the page, then only have the next button display, after I clcik next, then display the previos and next button, then keep going through the different divs, and after you get to the last div, hide the next button and only show the previous button.

Jquery form slider Script

<script>
$(document).ready(function () {
    var oldOption;
    var currentOption;
    var counter = 1;
    var maxThings = 4;
    $("#2").hide();
    $("#3").hide();
    $("#4").hide();
    $("#forward").click(function () {
        $("#1").hide();
        $("#2").hide();
        $("#3").hide();
        $("#4").hide();
        if (!(counter >= maxThings)) {
            counter++;
        }
        $("#" + counter).show();
    });

    $("#back").click(function () {
        $("#1").hide();
        $("#2").hide();
        $("#3").hide();
        $("#4").hide();
        if (!(counter <= 1)) {
            counter--;
        }
        $("#" + counter).show();
    });
});
</script>

Calculate Script

<script>
function calculate() {
    var total = (parseInt($('#studenttut option:selected').val()) + parseInt($('#campusrb>option:selected').val())) * parseInt($('#yearsatten>option:selected').val());
    $("#total").text(total);
}
</script>

HTML

<form>
<div id="1">
<table width="100%">
<tr>
    <td>Are you an In-State-Student?</td>
    <td align="right">
        <select id="studenttut">
            <option value="<?php echo $NIST; ?>">Yes $<?php echo $IST;  ?></option>
            <option value="<?php echo $NOST; ?>">No $<?php echo $OST; ?></option>
        </select>
    </td>
</tr>
</table>
</div>

<div id="2">
<table width="100%">
<tr>
    <td>Are you staying on campus?</td>
    <td align="right">
        <select id="campusrb">
            <option value="<?php echo $NBS; ?>">Yes $<?php echo $BS; ?>  </option>
            <option value="1">No $0</option>
        </select>
    </td>
</tr>
</table>
</div>

<div id="3">
<table width="100%">
<tr>
    <td>How many years are you planning to attend?</td>
    <td align="right">
        <select id="yearsatten">
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="2">3</option>
            <option value="3">3</option>
            <option value="4">4</option>
            <option value="5">5</option>
            <option value="6">6</option>
            <option value="7">7</option>
            <option value="8">8</option>
        </select>
    </td>
</tr>
</table>
</div>

<div id="4">
<div id="total"><input type="button" onClick="calculate()" value="calculate"/></div>
</form>

</div>
<button id="back">Back</button>
<button id="forward">Next</button>

Answer 1

You can try this one:

$("#forward, #back").hide(); //<--hides both buttons

if($('form').find('div').first().is(':visible')){ //<---check the first of the div is visible
  $("#forward").show(); //<----if true then show the forward button
  $("#forward").click(function () {
     $("#back").show(); //<-----on click of the forward btn show the back button
     $("#1").hide();
     $("#2").hide();
     $("#3").hide();
     $("#4").hide();
     if (!(counter >= maxThings)) {
        counter++;
     }
     $("#" + counter).show();
     if($('form').find('div').last().is(':visible')){ //<---if last div in the form is visible then
       $(this).hide(); //<---hide the forward button
     }
  });
}
if($('form').find('div').last().is(':visible')){ //<---check the last of the div is visible
  $("#back").click(function () {
     $("#1").hide();
     $("#2").hide();
     $("#3").hide();
     $("#4").hide();
    if (!(counter <= 1)) {
        counter--;
    }
    $("#" + counter).show();
    if($('form').find('div').first().is(':visible')){ //<--if first div is visible then
       $(this).hide(); //<----hide the back button
    }
});

Answer 2

you should handle the back and foward button visibility on first page or on the last page

like

if(counter==maxThings){
        $("#forward").hide();
    }

and

if(counter==1){
        $("#back").hide();
    }

maybe some thing like http://jsfiddle.net/UFCeX/

hope this help

Answer 3

What you want to do is on clicking #forward, show '#back' and hide #forward if counter === maxThings. On clicking #back, show '#forward' and hide '#back' if counter === minThings.

jsFiddle

$(document).ready(function () {
    var oldOption;
    var counter = 1;
    var maxThings = 4;
    var minThings = 1;
    $("#2").hide();
    $("#3").hide();
    $("#4").hide();
    $('#back').hide();

    $("#forward").click(function () {
        $("#1").hide();
        $("#2").hide();
        $("#3").hide();
        $("#4").hide();
        if (!(counter >= maxThings)) {
            counter++;
        }
        $("#" + counter).show();
        $('#back').show();
        if (counter === maxThings) {
            $('#forward').hide();
        }
    });

    $("#back").click(function () {
        $("#1").hide();
        $("#2").hide();
        $("#3").hide();
        $("#4").hide();
        if (!(counter <= 1)) {
            counter--;
        }
        $("#" + counter).show();
        $('#forward').show();
        if (counter === minThings) {
            $('#back').hide();
        }
    });
});

function calculate() {
    var total = (parseInt($('#studenttut option:selected').val()) + parseInt($('#campusrb>option:selected').val())) * parseInt($('#yearsatten>option:selected').val());
    $("#total").text(total);
}