Question

I’m using the http://www.advancedcustomfields.com plugin to create custom fields in WordPress. I’m specifically using the repeater field functionality.

On a page I have a repeater that has an unlimited amount of rows. The usual way of echoing out all the data is the following:

<?php $counter = 1; if(get_field('step_by_step_training')): ?>
<?php while(the_repeater_field('step_by_step_training')): ?>
    <p class="training-<?php echo $counter; ?>"><?php the_sub_field('introduction'); ?></p>
<?php $counter++; endwhile; ?> 
<?php endif; ?> 

Is it possible to show one row of data at a time with a next button that when pressed will show the next row of data? I only want one row of data showing at a time so if row 1 is originally showing, when next is clicked it hides row 1 and shows row 2. Essentially creating a step by step process.

Eventually I’d like to include a form so the user can submit data.

---

UPDATE:

<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 Form Element</button>
    </div>
<?php $counter++; endwhile; ?> 
<?php endif; ?>     
</form>

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

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

    $('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>

Answer 1

You could do something simple like this using jQuery (I think this is what you wanted?):

$(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 Form').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();
}); 

});

some example markup:

<form action="index.php" method="post">

    <div class="form-row">
        <label for="forename">Forename</label>
        <input type="text" name="forename" />
        <button class="next">Next Form Element</button>
    </div>

    <div class="form-row">
        <label for="forename">Surname</label>
        <input type="text" name="surname" />
        <div style="clear: both;"></div>
        <label for="another">Another</label>
        <input type="text" name="another" />
        <button class="next">Next Form Element</button>
    </div>

    <div class="form-row">
        <label for="last">Last Form Element</label>
        <input type="text" name="last" />
    </div>

</form>

You can add as many form elements to each form-row as you want, here’s a fiddle to play with

edit

Things to note here are that the previous buttons are injected to the DOM dynamically, and so is the forms submit button (notice how I’ve removed it from the last form-row in the markup)

Here’s an updated fiddle