The request to the server does not include select multiple elements if they have no selected value.

[filip-minarik]

Describe the bug Select multiple elements without any selected value are not part of the payload sent to the server upon form submission.

To Reproduce Create a form with a select multiple element, where you define an empty value and do not select any option.

Try submitting the form and check the browser console for the server payload. The payload includes all form elements except the select multiple without a selected value.

If the select multiple has a selected value, it is sent to the server. If an empty value is used, the payload does not include a key with the HTML select name.

I tried creating a clean HTML select without a data controller and without using the Tom select, to see if there might be an issue with processing the empty value on the Tom select's side, or in the case of a data controller, if there might be an issue with initializing the Tom select in the data controller.

And the result is that this issue affects even a clean HTML select without a data controller and without using the Tom select.

Expected behavior If there is no value selected in the select multiple, the name of the element with an empty array value is sent to the server in the payload: html_name_of_select=[]

Screenshots

Desktop (please complete the following information):

• OS: It doesn't matter.
• Browser all
• Version last

Server (please complete the following information):

• Platfrom Version: 14.15
• Laravel Version: 10.32
• PHP Version: 8.1.27
• Database: Mysql
• Database Version: >5.6 (doesn't matter)

Additional context The problem is in the form serialization after form submit in orchid.js.

[filip-minarik]

This isn't Orchid's fault, but FormData's fault.

FormData cannot serialize a select multiple without a selected value.

Therefore, it is necessary to serialize the elements outside of FormData, or to serialize the select multiple separately if it does not exist in FormData:

function getFormData(formid){
  var form = document.getElementById(formid);
  let formdata = {};
  Array.from(form.querySelectorAll('input, select, textarea'))
    .filter(element => element.name)
    .forEach(element => {
      formdata[element.name] = element.type === 'checkbox' ? element.checked : element.tagName === 'SELECT' ? Array.from(element.selectedOptions).map(option => option.value) : element.value;
    }); 
  return formdata;
}

check demo: https://plnkr.co/edit/slGq0PUNuQNSBf8X

[filip-minarik]

It's standart behavior of html.....sorry