Question

I’ve been stumbling my way through jQuery and have the following:

<form class="form" method="POST" action="<?php the_permalink(); ?>">
<?php $counter = 1; if(get_field('step_by_step_training')): ?>
<?php while(the_repeater_field('step_by_step_training')): ?>    
    <div class="form-row">
        <p class="training"><?php echo the_sub_field('introduction'); ?></p>
        <button class="next">Next</button>
    </div>
<?php $counter++; endwhile; ?> 
<?php endif; ?> 
</form>

<script type="text/javascript">
jQuery(function($) {
$(document).ready(function() {    

    // prepend a 'previous' button to all form-rows except the first
    $('<button>').addClass('previous').text('Previous').prependTo($('.form-row').not(':first'));

    // hide all form-rows, but not the first one
    $('.form-row').not(':first').hide();

    // add the submit button to the last form-row
    $('<input>').prop('type', 'submit').val('Submit').appendTo($('.form-row:last'));


    // handle the previous button, we need to use 'on' here as the
    // previous buttons don't exist in the dom at page load
    $('.form-row').on('click', 'button.previous', function(e) {
        e.preventDefault();
        $(this).parent('div.form-row').hide().prev('div.form-row').show();
    });

    $('button.next').click(function(e) {
        // prevent the next buttons from submitting the form
        e.preventDefault();
        // hide this form-row, and show the next one
        $(this).parent('div.form-row').hide().next('div.form-row').show();
    });    

});
});
</script>

This is creating a step by step process.

I want to hide the next button on the last step but can’t seem to get it to work. I’ve tried the following but the next buttons stop working.

$('button.next').is(':last').hide();

Answer 1

You can try this:

  $('button.next').last().hide();