0

I have a problem with a php multistep form which should normally switch between different steps/forms in one single page.

However, when I click on the first "Next" button, instead of sliding to the next element, the page refreshes and displays the first step/form.

<button class="firstNext next">Next</button>

I hope someone can help me. Below are the CodePen references:

Debug CodePen : https://cdpn.io/ibx/debug/KKMzjJQ/PNrvYKqamoKM
Code: CodePen : https://codepen.io/ibx/pen/KKMzjJQ

Thank you for your help!

SamanthaAlexandria
  • 225
  • 1
  • 12
  • 1
    When you click the next button in Codepen you get the following error message :A link in this Pen has a missing `href` value, or this Pen is trying to change the document.location. Since this is a form it looks as though the entire form is trying to be submitted. You will need to add this.preventDefault() to each of your addListener events. This prevents the buttons event from bubbling up to the form event. –  Oct 18 '20 at 02:47
  • I have added `this.preventDefault()` after `function(){` but the same error seems to persist. – SamanthaAlexandria Oct 18 '20 at 14:24
  • 1
    I have changed the code to this and it worked! `nextBtnFirst.addEventListener("click", (event) => { event.preventDefault();` – SamanthaAlexandria Oct 19 '20 at 00:36

1 Answers1

0

I have changed the code to this and it worked!
nextBtnFirst.addEventListener("click", (event) => { event.preventDefault();

SamanthaAlexandria
  • 225
  • 1
  • 12