No matter how many times I click the next button, I am unable to proceed to the next page

Question

No matter how many times I click the next button, I am unable to proceed to the next page

Trying to create a form for an insurance company using basic HTML, CSS & JQuery. However, encountering an issue where I cannot proceed past the first page after clicking the Next button, and therefore unable to view the remaining 2 fieldsets. Can someone help me identify the mistake? Any assistance would be greatly appreciated.

//Scripting with jQuery
var current_fs, next_fs, previous_fs; //fieldsets
var left, opacity, scale; //properties we will animate for fieldsets
var animating; //flag to prevent rapid clicks

$(".next").click(function(){
  if(animating) return false;
  animating = true;

  current_fs = $(this).parent();
  next_fs = $(this).parent().next();

  $("#progressbar li").eq($("fieldset").index(next_fs)).addClass("active");

  next_fs.show(); 

  current_fs.animate({opacity: 0}, {
    step: function(now, mx) {
      scale = 1 - (1 - now) * 0.2;
      left = (now * 50)+"%";
      opacity = 1 - now;
      current_fs.css({
        'transform': 'scale('+scale+')',
        'position': 'absolute'
      });
      next_fs.css({'left': left, 'opacity': opacity});
    }, 
    duration: 800, 
    complete: function(){
      current_fs.hide();
      animating = false;
    }, 
    easing: 'easeInOutBack'
  });
});

$(".previous").click(function(){
  if(animating) return false;
  animating = true;

  current_fs = $(this).parent();
  previous_fs = $(this).parent().prev();

  $("#progressbar li").eq($("fieldset").index(current_fs)).removeClass("active");

  previous_fs.show(); 

  current_fs.animate({opacity: 0}, {
    step: function(now, mx) {
      scale = 0.8 + (1 - now) * 0.2;
      left = ((1-now) * 50)+"%";
      opacity = 1 - now;
      current_fs.css({'left': left});
      previous_fs.css({'transform': 'scale('+scale+')', 'opacity': opacity});
    }, 
    duration: 800, 
    complete: function(){
      current_fs.hide();
      animating = false;
    }, 
    easing: 'easeInOutBack'
  });
});

$(".submit").click(function(){
  return false;
})

/*custom font*/
@import url(https://fonts.googleapis.com/css?family=Montserrat);

/*basic reset*/
* {margin: 0; padding: 0;}

html {
  height: 100%;
  /*Image only BG fallback*/

  /*background = gradient + image pattern combo*/
  background: 
    linear-gradient(rgba(196, 102, 0, 0.6), rgba(155, 89, 182, 0.6));
}

body {
  font-family: montserrat, arial, verdana;
}
/*form styles*/
#msform {
  width: 400px;
  margin: 50px auto;
  text-align: center;
  position: relative;
}
#msform fieldset {
  background: white;
  border: 0 none;
  border-radius: 3px;
  box-shadow: 0 0 15px 1px rgba(0, 0, 0, 0.4);
  padding: 20px 30px;
  box-sizing: border-box;
  width: 80%;
  margin: 0 10%;

  /*stacking fieldsets above each other*/
  position: relative;
}
#msform fieldset:not(:first-of-type) {
  display: none;
}
...

...

jquery css arrays html

Answer 1

Answer №1

After implementing a logic (which may not be the most optimal), I have made some modifications to the code below. If needed, you can debug using console.log();. The animation process has been excluded from this example as it was not deemed problematic.

The changes made include adding classes to the progress bars and the fieldset.

If there are any doubts, feel free to ask in the comments section.

let current = 0;
let previous = 0;

$(".next").click(function(){
  if (current == 0) {
    current++;
    $('.stage' + current).show();
    $('.stage' + previous).hide();
    $('.bar' + current).addClass('active');
  } else {  
    previous = current;
    current++;
    $('.stage' + current).show();
    $('.stage' + previous).hide();
    $('.bar' + current).addClass('active');
  }
});

$(".previous").click(function(){
  if (previous == 0) {
    current = previous;
    $('.stage' + current).show();
    $('.stage' + (current + 1)).hide();
    $('.bar' + (current + 1)).removeClass('active');
  } else {
    current = previous;
    previous--;
    $('.stage' + current).show();
    $('.stage' + (current + 1)).hide();
    $('.bar' + (current + 1)).removeClass('active');
  }
});

<!-- custom font -->
@import url(https://fonts.googleapis.com/css?family=Montserrat);

<!-- basic reset -->
* {margin: 0; padding: 0;}

html {
  height: 100%;
  <!-- Image only BG fallback -->

  <!-- background = gradient + image pattern combo -->
  background: 
    linear-gradient(rgba(196, 102, 0, 0.6), rgba(155, 89, 182, 0.6));
}

body {
  font-family: montserrat, arial, verdana;
}
<!-- form styles -->
#msform {
  width: 400px;
  margin: 50px auto;
  text-align: center;
  position: relative;
}
#msform fieldset {
  background: white;
  border: 0 none;
  border-radius: 3px;
  box-shadow: 0 0 15px 1px rgba(0, 0, 0, 0.4);
  padding: 20px 30px;
  box-sizing: border-box;
  width: 80%;
  margin: 0 10%;

  <!-- stacking fieldsets above each other -->
  position: relative;
}
<!-- Hide all except first fieldset -->
#msform fieldset:not(:first-of-type) {
  display: none;
}
<!-- inputs -->
#msform input, #msform textarea {
  padding: 15px;
  border: 1px solid #ccc;
  border-radius: 3px;
  margin-bottom: 10px;
  width: 100%;
  box-sizing: border-box;
  font-family: montserrat;
  color: #2C3E50;
  font-size: 13px;
...
    current++;
    $('.stage' + current).show();
    $('.stage' + previous).hide();
    $('.bar' + current).addClass('active');
  }
});

$(".previous").click(function(){
  if (previous == 0) {
    current = previous;
    $('.stage' + current).show();
    $('.stage' + (current + 1)).hide();
    $('.bar' + (current + 1)).removeClass('active');
  } else {
    current = previous;
    previous--;
    $('.stage' + current).show();
    $('.stage' + (current + 1)).hide();
    $('.bar' + (current + 1)).removeClass('active');
  }
});

Answer 2

After implementing a logic (which may not be the most optimal), I have made some modifications to the code below. If needed, you can debug using console.log();. The animation process has been excluded from this example as it was not deemed problematic.

The changes made include adding classes to the progress bars and the fieldset.

If there are any doubts, feel free to ask in the comments section.

let current = 0;
let previous = 0;

$(".next").click(function(){
  if (current == 0) {
    current++;
    $('.stage' + current).show();
    $('.stage' + previous).hide();
    $('.bar' + current).addClass('active');
  } else {  
    previous = current;
    current++;
    $('.stage' + current).show();
    $('.stage' + previous).hide();
    $('.bar' + current).addClass('active');
  }
});

$(".previous").click(function(){
  if (previous == 0) {
    current = previous;
    $('.stage' + current).show();
    $('.stage' + (current + 1)).hide();
    $('.bar' + (current + 1)).removeClass('active');
  } else {
    current = previous;
    previous--;
    $('.stage' + current).show();
    $('.stage' + (current + 1)).hide();
    $('.bar' + (current + 1)).removeClass('active');
  }
});

<!-- custom font -->
@import url(https://fonts.googleapis.com/css?family=Montserrat);

<!-- basic reset -->
* {margin: 0; padding: 0;}

html {
  height: 100%;
  <!-- Image only BG fallback -->

  <!-- background = gradient + image pattern combo -->
  background: 
    linear-gradient(rgba(196, 102, 0, 0.6), rgba(155, 89, 182, 0.6));
}

body {
  font-family: montserrat, arial, verdana;
}
<!-- form styles -->
#msform {
  width: 400px;
  margin: 50px auto;
  text-align: center;
  position: relative;
}
#msform fieldset {
  background: white;
  border: 0 none;
  border-radius: 3px;
  box-shadow: 0 0 15px 1px rgba(0, 0, 0, 0.4);
  padding: 20px 30px;
  box-sizing: border-box;
  width: 80%;
  margin: 0 10%;

  <!-- stacking fieldsets above each other -->
  position: relative;
}
<!-- Hide all except first fieldset -->
#msform fieldset:not(:first-of-type) {
  display: none;
}
<!-- inputs -->
#msform input, #msform textarea {
  padding: 15px;
  border: 1px solid #ccc;
  border-radius: 3px;
  margin-bottom: 10px;
  width: 100%;
  box-sizing: border-box;
  font-family: montserrat;
  color: #2C3E50;
  font-size: 13px;
...
    current++;
    $('.stage' + current).show();
    $('.stage' + previous).hide();
    $('.bar' + current).addClass('active');
  }
});

$(".previous").click(function(){
  if (previous == 0) {
    current = previous;
    $('.stage' + current).show();
    $('.stage' + (current + 1)).hide();
    $('.bar' + (current + 1)).removeClass('active');
  } else {
    current = previous;
    previous--;
    $('.stage' + current).show();
    $('.stage' + (current + 1)).hide();
    $('.bar' + (current + 1)).removeClass('active');
  }
});

Answer 3

Answer №2

You pointed out in the comments that the easeInOutBack easing is actually a custom plugin. It seems like the issue might lie there, especially since it's not part of the original question for testing or debugging purposes. However, when I substituted 'easeInOutBack' with the default 'swing' easing, the intended functionality seemed to work as expected.

Have you confirmed whether the custom easing code is loading properly? Are there any error messages showing up in the console indicating something like

TypeError: n.easing[this.easing] is not a function

? If that's the case, then the custom easing code might not be loaded on the page.

If the custom easing code is included on the page, there may be error messages pointing you towards the right direction to troubleshoot and fix it.

//jQuery time
var current_fs, next_fs, previous_fs; //fieldsets
var left, opacity, scale; //fieldset properties which we will animate
var animating; //flag to prevent quick multi-click glitches

$(".next").click(function(){
  if(animating) return false;
  animating = true;

  current_fs = $(this).parent();
  next_fs = $(this).parent().next();

  //activate next step on progressbar using the index of next_fs
  $("#progressbar li").eq($("fieldset").index(next_fs)).addClass("active");

  //show the next fieldset
  next_fs.show(); 
  //hide the current fieldset with style
  ...

/*custom font*/
@import url(https://fonts.googleapis.com/css?family=Montserrat);

/*basic reset*/
* {margin: 0; padding: 0;}

html {
  height: 100%;
  /*Image only BG fallback*/

  /*background = gradient + image pattern combo*/
  background: 
    linear-gradient(rgba(196, 102, 0, 0.6), rgba(155, 89, 182, 0.6));
}

body {
  font-family: montserrat, arial, verdana;
}
/*form styles*/
#msform {
  width: 400px;
  margin: 50px auto;
  text-align: center;
  position: relative;
}
...

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- multistep form -->
<form id="msform">
  <!-- progressbar -->
  <ul id="progressbar">
    <li class="active">Account Setup</li>
    <li>Social Profiles</li>
    <li>Personal Details</li>
  </ul>
  <!-- fieldsets -->
  <fieldset>
    <h2 class="fs-title">Create your account</h2>
    ...

Answer 4

You pointed out in the comments that the easeInOutBack easing is actually a custom plugin. It seems like the issue might lie there, especially since it's not part of the original question for testing or debugging purposes. However, when I substituted 'easeInOutBack' with the default 'swing' easing, the intended functionality seemed to work as expected.

Have you confirmed whether the custom easing code is loading properly? Are there any error messages showing up in the console indicating something like

TypeError: n.easing[this.easing] is not a function

? If that's the case, then the custom easing code might not be loaded on the page.

If the custom easing code is included on the page, there may be error messages pointing you towards the right direction to troubleshoot and fix it.

//jQuery time
var current_fs, next_fs, previous_fs; //fieldsets
var left, opacity, scale; //fieldset properties which we will animate
var animating; //flag to prevent quick multi-click glitches

$(".next").click(function(){
  if(animating) return false;
  animating = true;

  current_fs = $(this).parent();
  next_fs = $(this).parent().next();

  //activate next step on progressbar using the index of next_fs
  $("#progressbar li").eq($("fieldset").index(next_fs)).addClass("active");

  //show the next fieldset
  next_fs.show(); 
  //hide the current fieldset with style
  ...

/*custom font*/
@import url(https://fonts.googleapis.com/css?family=Montserrat);

/*basic reset*/
* {margin: 0; padding: 0;}

html {
  height: 100%;
  /*Image only BG fallback*/

  /*background = gradient + image pattern combo*/
  background: 
    linear-gradient(rgba(196, 102, 0, 0.6), rgba(155, 89, 182, 0.6));
}

body {
  font-family: montserrat, arial, verdana;
}
/*form styles*/
#msform {
  width: 400px;
  margin: 50px auto;
  text-align: center;
  position: relative;
}
...

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- multistep form -->
<form id="msform">
  <!-- progressbar -->
  <ul id="progressbar">
    <li class="active">Account Setup</li>
    <li>Social Profiles</li>
    <li>Personal Details</li>
  </ul>
  <!-- fieldsets -->
  <fieldset>
    <h2 class="fs-title">Create your account</h2>
    ...

No matter how many times I click the next button, I am unable to proceed to the next page

Answer №1

Answer №2

Similar questions

The alert dialog does not appear when clicking on "a"

Attempting to showcase a button element within a popover, although it is failing to appear

Steps to activate a particular Bootstrap tab upon clicking a hyperlink

Utilizes an external CSS font file for eBay advertisement

Ensure Safari sends the Origin header in jQuery GET requests

Utilizing display: flex for creating table padding

Identifying strings from an array in the input using JavaScript and then displaying the identified string

Struggling with XML parsing using JQuery

HighCharts fails to display on Polymer webpage

Implementing the expand and collapse functionality to the Discovery sidebar on the DSpace 4.2 xmlui platform

Popup to confirm JqGrid inline editing

Show the picture stored in the S3 cloud storage

Using Jquery, take out each parent element and duplicate the child element

Rails and Javascript: Partial does not retrieve data attribute, yet it is visible in the DOM

Adding an iframe with inline script to my Next.js website: A step-by-step guide

An assortment of diverse data types in TypeScript arrays

Dealing with alternating rows in a dynamic manner: tips and tricks

Adding text values to an HTML form action

Output the following by using the given format: a -> *a1**aabbbaa* -> a2b3a2

Embed a script into an iframe from a separate domain

No matter how many times I click the next button, I am unable to proceed to the next page

Answer №1

Answer №2

Similar questions

The alert dialog does not appear when clicking on "a"

Attempting to showcase a button element within a popover, although it is failing to appear

Steps to activate a particular Bootstrap tab upon clicking a hyperlink

Utilizes an external CSS font file for eBay advertisement

Ensure Safari sends the Origin header in jQuery GET requests

Utilizing display: flex for creating table padding

Identifying strings from an array in the input using JavaScript and then displaying the identified string

Struggling with XML parsing using JQuery

HighCharts fails to display on Polymer webpage

Implementing the expand and collapse functionality to the Discovery sidebar on the DSpace 4.2 xmlui platform

Popup to confirm JqGrid inline editing

Show the picture stored in the S3 cloud storage

Using Jquery, take out each parent element and duplicate the child element

Rails and Javascript: Partial does not retrieve data attribute, yet it is visible in the DOM

Adding an iframe with inline script to my Next.js website: A step-by-step guide

An assortment of diverse data types in TypeScript arrays

Dealing with alternating rows in a dynamic manner: tips and tricks

Adding text values to an HTML form action

Output the following by using the given format: *a* -> *a1**aabbbaa* -> *a2b3a2*

Embed a script into an iframe from a separate domain

Output the following by using the given format: a -> *a1**aabbbaa* -> a2b3a2