Topic: Form reset button / label clearing
Click a form "reset" button containing a multiselect, all selected options are cleared (both in the textbox where they're comma-separated and the checkboxes themselves) and the multiselect dropdown label should reset back in place of the cleared options.
The options are not cleared and the label in the textbox is blank, though it has cleared the comma-separated selected options in the textbox.
https://mdbootstrap.com/snippets/standard/andrewjknox/5011746
Ahh, I see - right that change has got me part there, thanks!
But. If the page renders in with an option already selected, it doesn't clear? I'm rendering with a view model set in an ASPNET Core controller and binding server-side. So, users coming to the page (or submitting the filter form) via something like, "https://domain/?distances=5k"
Would this be a bug or in this scenario, can I get around this by rendering the selected options (csv) into a hidden input field and set programmatically client-side?
I've updated the snippet.
Kamila Pieńkowska staff commented 1 year ago
"If the page renders in with an option already selected, it doesn't clear?" - I don't understand this question, sorry.
andrewjknox free commented 1 year ago
I'd updated the snippet which showcases that issue (i.e. the selected option is set server-side, not client-side so renders the option as selected):
<option value="5k" selected="selected"<5K</option<
Kamila Pieńkowska staff commented 1 year ago
I see. You can set initial options with Javascript using the same method I've added to the Reset button.
If you render the way you do now it should also work correctly.
andrewjknox free commented 1 year ago
Just on your last comment, that approach didn't work when the page loads in with selected options, where I used setValue('') - it cleared the textbox, but left the checkbox checked.
Kamila Pieńkowska staff commented 1 year ago
Do you mean that the reset button didn't work or setting value with js?
If you set values with JS you need to remove passing initial values with HTML. Also, make sure your JS is executed after the page is loaded.
Example in the snippet: https://mdbootstrap.com/snippets/standard/kpienkowska/5040698
This is not a bug. It should work as it does. To reset the select value you need to use setValue method.
Here is a snippet example:
https://mdbootstrap.com/snippets/standard/kpienkowska/5015048
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- ForumUser: Free
- Premium support: No
- Technology: MDB Standard
- MDB Version: MDB5 6.1.0
- Device: PC
- Browser: Edge
- OS: Windows 10
- Provided sample code: No
- Provided link: Yes