Question

Hide Next Button in Pagination Until Required Fields are Completed

Forms

Updated April 22, 2018

asked on March 8, 2017

Hello!

I have done a great deal of searching in Answers for assistance with this. I have a form that has pagination using a progress bar using out of the box functionality in 10.2. I searched a variety of topics such as https://answers.laserfiche.com/questions/68947/Making-it-mandatory-to-fill-all-fields-under-one-tab-before-continuing#116563 and have not been able to find any javascript that disables or hides the next button until all required fields are completed on the page. I'm wondering if it is because I'm using a progress bar rather than tabs or perhaps because I'm not using legacy javascript such as the code provided in http://www.laserfiche.com/SolutionExchange/Article/three-ways-to-improve-a-laserfiche-form-with-javascript It would make my form much more user friendly if the user didn't have to go back through all the pages in order to hit the "Submit" button.

Could someone help me identify the source of my problem with getting this enhancement to work?

Thank you!

0 0

Answer

SELECTED ANSWER

replied on March 8, 2017 • Show version history

Hi Benjamin,

A possible solution is like this:

$(document).ready(function(){
  $("#form1").change(validate);
  validate();
  $('.cf-next-btn').click(validate);
  $('.cf-prev-btn').click(validate);
  function validate() {
    if ($("#form1").parsley({excluded:":hidden"}).isValid()) {
      $('.cf-next-btn').show();
    }
    else {
      $('.cf-next-btn').hide();
    }
  }
})

3 0

replied on March 9, 2017

Works absolutely perfectly! Thank you so much for your help.

0 0

replied on April 19, 2018

Hi Rui,

Is it possible to just disable the 'Next" button instead of hiding it?

I tried with $('.cf-next-btn').prop('disabled',false); - it disables it however after validation is it is enabled on the final page along with submit. Clicking on Submit here takes the user to a blank page.

Thanks,

Senbaga

0 0

replied on April 22, 2018

Hi Senbaga,

You may update the validate function like this to disable the button on last page:

function validate() {
    if ($("#form1").parsley({excluded:":hidden"}).isValid()) {
      $('.cf-next-btn').prop('disabled',false);
    }
    else {
      $('.cf-next-btn').prop('disabled',true);
    }
    var pages = $(".cf-page:not(.hidden)");
    $(pages[pages.length - 1]).find(".cf-next-btn").attr("disabled", true);
  }

0 0

Replies

replied on March 22, 2018

Thanks for this. Works like a charm.

0 0

You are not allowed to follow up in this post.

Question

Question

Hide Next Button in Pagination Until Required Fields are Completed

Answer

Replies

Sign in to reply to this post.