Topic: MDB Pro - Linear Stepper will not submit form
Expected behavior Submit the form when user clicks submit button at the end of the stepper
(I unminified the stepper code to get an error on a line to troubleshoot)
Actual behavior Form doesn't submit, no counsel errors until I click "submit" and I get the following:
steppers.min.js:2718 Uncaught ReferenceError: feedback is not defined at HTMLButtonElement. (steppers.min.js:2718) at HTMLUListElement.dispatch (jquery.min.js:2) at HTMLUListElement.v.handle (jquery.min.js:2) (anonymous) @ steppers.min.js:2718 dispatch @ jquery.min.js:2 v.handle @ jquery.min.js:2
Resources (screenshots, code snippets etc.) Here is my code: https://mdbootstrap.com/snippets/jquery/jaysenbarlow/1662688
This still doesn't work..... incredibly frustrating. Can anyone help? It's been 6 months and several updates later.
Tomek Makowski staff commented 4 years ago
Hi
Here is solution
https://mdbootstrap.com/snippets/jquery/tomekmakowski/2305959#html-tab-view
All you have to do is put your stepper in to <form action="" method=""></form>
and then add button with type submit at the end of the form
Regards
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- User: Pro
- Premium support: No
- Technology: MDB jQuery
- MDB Version: 4.10.0
- Device: Surface Book
- Browser: Chrome
- OS: Windows 10
- Provided sample code: No
- Provided link: Yes
Mateusz Łubianka staff commented 5 years ago
Hi @jaysenbarlow,
This error can concern lack of data-feedback attribute. Check out this link: https://mdbootstrap.com/docs/jquery/components/stepper/#feedback
Best,
jaysenbarlow pro commented 5 years ago
I've spent hours reading the documentation before posting for help, my code is posted in the link... I really need help to get this to submit. I don't understand your answer. What do I need to do to make this submit when the submit button is clicked?
Edit: I went through and added the data-feedback tag and built the function as the link you sent me described, and it still won't submit. I really need to get this project done for my company, please help when you can. I know HTML, PHP, CSS, but I do not know Java and can't make this work.
Mateusz Łubianka staff commented 5 years ago
It seems that it's an stepper issue. I'll create a task, our team will check this and fix this as soon as possible.
Best,
jaysenbarlow pro commented 5 years ago
OK, thanks for looking into it - I will keep checking back, is there a work-around that will work in the meantime? Can I just drop the validate tag? I guess I'll go play with it while waiting. Thanks again for the help.
Mateusz Łubianka staff commented 5 years ago
Yes, you can try to drop the validate tag.
Best
jaysenbarlow pro commented 5 years ago
I did try, no change. Any fix in sight? Any alternative or shim to make this work temporarily?
jaysenbarlow pro commented 5 years ago
Changing it from a Button to a link with the Button styling and then using JS to submit the form on link click is a working workaround for anyone else who is stuck like me:
a role="button" aria-label="submit form" href="javascript:void(0)" onclick="document.querySelector('form').submit()"
Mateusz Łubianka staff commented 5 years ago
Is it work now?
jaysenbarlow pro commented 5 years ago
Not how it's supposed to. Also if the vertical stepper is being used on a landing page with just the full image cover background it will expand beyond the viewport and not be usable. Even when adding a scroller to the form. So, no, it's not working but I can't wait a week for help so I am working on it myself.
Mateusz Łubianka staff commented 5 years ago
@jaysenbarlow,
Try to place submit buton just before form closing tag.After ul closing tag.