Multi-Page Forms

<div class="ajax-form-container">
	<div class="form-container">
		<p class="mb-2"><strong><span>*</span> Required</strong></p>
		<form id="personalLoanApplicationForm" data-parsley-validate name="personalLoanApplicationForm" class="ajax-form" data-parsley-excluded=":hidden">
    		<input type="hidden" name="formId" value="personalLoanApplicationForm" class="form-id-input">
    		<div class="form-page page-1">

    			{{! Place your form fields here}}

    			<fieldset>
    				<legend class="sr-only">Page One Form Navigation</legend>
    				<button class="btn btn-success next" type="button">Next</button>
    			</fieldset>
    		</div>

    		{{! If your form only has two pages, copy the navigation from "page three" below and put it on Page 2 instead, replacing the "Next" button since you want to have the correct class on the "Back" button. }}

    		<div class="form-page page-2 d-none">
    			
    			{{! Place your form fields here}}

    			<fieldset>
    				<legend class="sr-only">Page Two Form Navigation</legend>
    				<button class="btn btn-danger back" type="button">Back</button> 
    				<button class="btn btn-success btn-submit next" type="button">Next</button>
    			</fieldset>
    		</div>

    		{{! Include as many other pages as you need}}

    		<div class="form-page page-3 d-none">
    			
    			{{! Place your form fields here}}

    			<fieldset class="form-group">
    				<legend class="sr-only">Page Three Form Navigation</legend>
    				<button class="btn btn-danger back" type="button">Back</button> 
    				<button type="submit" class="btn btn-default">Submit<span class="sr-only"> Personal Loan Application Form</span><span class="loading" aria-hidden="true"><span class="loading-inner"></span></span></button>
    				
    				<div class="error" role="alert" aria-atomic="true">There was an error submitting the form.</div>
    			</fieldset>
    		</div>
    	</form>
    </div>
    <noscript><h2>Notice</h2><div>This form requires Javascript be turned on for it to work. Please turn on Javascript and refresh the page if you would like to submit an online form. If you cannot turn on Javascript, we encourage you to contact your nearest branch location.</div></noscript>
</div>

//Steps through sections of the application when continue is clicked, scrolling to the top of the page each time.

// Loop through each Next button and determine which page to show/hide based on the index of the button that was clicked
$('.next').each( function(index) {

	// Create variables to determine which page we're on using Index, and which page we're going to
    var page = (index+1);
    var currentPage = '.page-' + (page);
    var nextPage = '.page-' + (page+1);

    $(this).click(function(e) { // When the Next button is clicked
      e.preventDefault();
      e.stopPropagation
      //Destroy and reenable parsley so it validates the correct items
      $('form#personalLoanApplicationForm').parsley().destroy();
      $('form#personalLoanApplicationForm').parsley().validate();
      //check to see if parsley is valid before continuing to next page
      if($('form#personalLoanApplicationForm').parsley().isValid() === true) {
          $(currentPage).hide();
          $(nextPage).show();
          //scroll to top of page and focus on the first input
          $("html, body").animate({ scrollTop: $("form#personalLoanApplicationForm").offset().top-100 }, 600);
          $(nextPage + '.form-group:first-child input').focus(); // Focus on the first field on that page
          //reset parsley
          $('form#personalLoanApplicationForm').parsley().destroy();       
          $('form#personalLoanApplicationForm').parsley();
    
      }
      else{ //form has errors
          $('form#personalLoanApplicationForm').parsley().validate();
      }
	});
});

// Loop through each Back button
$('.back').each( function(index) {
	
	// Create variables to determine which page we're on using Index, and which page we're going to
    var page = (index+1);
    var currentPage = '.page-' + (page+1);
    var previousPage = '.page-' + (page);

    $(this).click(function(e) { // When the Back button is clicked
      e.preventDefault();
      $(currentPage).hide();
      $(previousPage).show();
      $(previousPage + ' .form-group:first-child input').focus(); // Focus on the first field on that page
      $("html, body").animate({ scrollTop: $("form#perssonalLoanApplicationForm").offset().top-100 }, 600);
      //reset parsley again so you don't validate the next page
      $('form#personalLoanApplicationForm').parsley().destroy();  
    });

  });