Question

Hide next button on multiple subsequent pages

Forms

Updated September 2, 2020

asked on September 1, 2020

For an application I'm working on, I'm trying to create three eligibility question on three separate pages before one can reach the main application. The first page contains this javascript and works well - it hides the Next button until a valid entry is input into the pcn field:

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

For each of the next two pages/questions, I would like the Next button to be hidden by default and only show if the answer to a radio button question is Yes. The only difference between the two pages is the CSS class. I tried the code below, but the Next button does not hide by default, and only hides when the No answer is selected.

$(document).ready(function(){
$('.cf-next-btn').hide();
$('.affected input').change(function(){
      if($('.affected input[value="Yes"]:checked').length > 0){
      $('.cf-next-btn').show();
    }
    else{
      $('.cf-next-btn').hide();
      alert ('Show alert.');
    }
});
});

I'm wondering if there is some confusion going on with so many show/hide commands, and if it's possible to distinguish the show/hides by the ID for the page...?

Thank you in advance for any assistance.

1 0

Answer

SELECTED ANSWER

replied on September 2, 2020

Hi Susan,

I think you need to run hiding code on button "Next" Click event

 $('.cf-next-btn').click(function () {
    $('.cf-next-btn').hide();
  })

regards,

0 0

replied on September 2, 2020

Thank you, Mohamed, for taking the time to respond. This is what I was missing!

1 0

Replies

You are not allowed to reply in this post.

replied on September 2, 2020 • Show version history

Rats - my thinking was shortsighted. My form is broken up into six pages. I now have code (as below) to control the Next button for the first three pages based on input/answer selections. All works great! But then how do I get the next button to behave normally/show for the remainder of the application pages?

$(document).ready(function(){
$('.cf-next-btn').click(function () {
$('.cf-next-btn').hide();
$('.affected input').change(function(){
      if($('.affected input[value="Yes"]:checked').length > 0){
      $('.cf-next-btn').show();
    }
    else{
      $('.cf-next-btn').hide();
      alert ('Show first alert.');
    }
});
});
});

$(document).ready(function(){
$('.cf-next-btn').click(function () {
$('.cf-next-btn').hide();
$('.income input').change(function(){
      if($('.income input[value="Yes"]:checked').length > 0){
      $('.cf-next-btn').show();
    }
    else{
      $('.cf-next-btn').hide();
      alert ('Show second alert.');
    }
});
});
});

Thank you.

You are not allowed to follow up in this post.

Question

Question

Hide next button on multiple subsequent pages

Answer

Replies

Sign in to reply to this post.