Topic: Stepper Next Button Not Working

brian03 priority asked 9 months ago


Expected behavior I copied the Stepper Form Wizard example from the documentation and am trying to get it to work with Next and Previous buttons. I included "class="stepper" data-mdb-stepper-init" in my index.html file. I also created a js file including the UMD version from the documentation for the buttons. The documentation mentions including "import "mdb-ui-kit"" but I am not sure where to add this. Is this what is causing the error? Please provide syntax and where to put it if this is the issue. Thanks!

Actual behavior Error Stepper not defined enter image description here

Resources (screenshots, code snippets etc.) Index.html

<!DOCTYPE html>

Material Design for Bootstrap

1 step1 First name(required) invalid Last name(required) invalid Nickname(optional) 2 step2 Company name(required) invalid Address(required) invalid Email(required) invalid Phone(optional) invalid 3 step3 Additional information Create an account? Place order Previous step Next step

registration.stepper.js (UMD version)

const stepper = new Stepper(document.getElementById('stepper-form-example'));

document.getElementById('form-example-next-step').addEventListener('click', () => { stepper.nextStep(); });

document.getElementById('form-example-prev-step').addEventListener('click', () => { stepper.prevStep(); });


Kamila Pieńkowska staff answered 9 months ago


Problem is that you imported UMD version and copied JS code for ES version.

just change Steppper to mdb.Stepper and let me know if it helped.



Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

  • ForumUser: Priority
  • Premium support: Yes
  • Technology: MDB Standard
  • MDB Version: MDB5 7.1.0
  • Device: Laptop
  • Browser: Chrome
  • OS: Windows
  • Provided sample code: No
  • Provided link: No