Possibility to set 'selected' property before form submit

[set-webmaster]

Hey there,

I already know that values are set to "selected" on form submit, but I'd like to know if it would be possible to set them as such as soon as they are moved from left to right (maybe with a new option set to true).

The reason I ask this is that whenever using frontend validation (jQuery validation in my case), the tests fail as the value reported by the multiselect is empty. Sometimes it works if the event handler in your code runs before the validation, but sometimes it doesn't. Also, in my case I call the validation tests manually before submitting the form, so your event handler never has a chance to run as the validation fails.

Would you have an idea to solve this problem? Would it cause other problems if setting them to selected as soon as they are actually selected? (I understand there might be different use cases and that moving from left to right might now always mean an option has been selected, but there might be a way to solve this issue)

[set-webmaster]

Okay by reading through the code, I saw that it would certainly break the leftSelected button's behavior as you use jQuery's :selected selector.

I will try to find a solution that would keep the current behavior and fix the issue for me and others who might have the same issue

[crlcu]

Hi @set-webmaster

There is afterMoveToRight and afterMoveToLeft callbacks that can be used to achieve what you want.

[set-webmaster]

Sadly no it cannot really be used for what I would like to have. The thing is you use the "selected" property of the options in the list to move them from left to right and vice-versa, but that breaks the possibility to retrieve the "currently selected ones" at any time using JS or jQuery.

I effectively use the afterMoveToRight and afterMoveToLeft callbacks, but that doesn't solve the problem, there's no way the form can be posted prior to your on form submit callback running, which is not always the case (as in my example, in which I intercept the form's submit and make it an AJAX request instead, your submit callback never runs, hence why the options cannot be posted as the form sees none of them as being selected)

[crlcu]

Ok, then perhaps you just need to make all of them selected just before your validation is called?

On Wed, 3 Jul 2019 at 14:41, set-webmaster notifications@github.com wrote:

Sadly no it cannot really be used for what I would like to have. The thing is you use the "selected" property of the options in the list to move them from left to right and vice-versa, but that breaks the possibility to retrieve the "currently selected ones" at any time using JS or jQuery.

I effectively use the afterMoveToRight and afterMoveToLeft callbacks, but that doesn't solve the problem, there's no way the form can be posted prior to your on form submit callback running, which is not always the case (as in my example, in which I intercept the form's submit and make it an AJAX request instead, your submit callback never runs, hence why the options cannot be posted as the form sees none of them as being selected)

— You are receiving this because you modified the open/close state. Reply to this email directly, view it on GitHub https://github.com/crlcu/multiselect/issues/176?email_source=notifications&email_token=AAMVXFDNLBFYIQ6NT24JC4DP5SGAHA5CNFSM4H45FBT2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGODZEFUFA#issuecomment-508058132, or mute the thread https://github.com/notifications/unsubscribe-auth/AAMVXFEFLIA43M3VM7GPA33P5SGAHANCNFSM4H45FBTQ .

[set-webmaster]

Yes that's what I'm doing, I implemented a custom jQuery validation rule that sets the options selected just before posting the form, it just feels hacky and I wondered if there was a way to do it natively, maybe by not relying on the options being selected in the moveToRight and moveToLeft functions. I understand though that it could be a big change, but it could be beneficial to not go against the normal multiselect behavior of having the selected items actually returning when calling the jQuery .val()method or using javascript's native HTMLSelectElement.selectedOptions;

A potential solution I thought about would be to add a click handler on the options in the left panel, then add a custom class (crlcu-selected) for example, and then use the options having this class set when calling moveToRight or moveToLeft instead of using the selected selector. This way, you could let the items being moved to right as selected and normal behavior would still work as expected. It would add a bit of code that would run every time an option is selected on the left panel, but I think it could be beneficial overall. It could be placed under an option too to let people decide if they want this behavior or not.

[set-webmaster]

Thinking about it, my proposed solution would break the shift click selection method, which relies on default browser behavior to work as expected.... hmmm that is a bit more complex than I expected :)

[set-webmaster]

A simpler approach then could be to add an event listener (that would be user configurable when initializing the plugin) to perform the selection of the items in the right panel at any time such as what you do in your actual form submit handler.

This way, I could for example simply trigger the event before validating the form, which would trigger the configured handler, sets the options in the right pane as selected, and then form validation and posting would work as expected. The only difference being that you don't depend entirely on your submit handler to run.

[marlongichie]

Hello, did this ever get resolved? I am currently experiencing related issue.

Please advise.

Thank you.