Multi-select fields #146

New Issue

2018-03-27T07:35:26-05:00

zeraphie commented

2018-03-27 07:35:26 -05:00

(Migrated from github.com)

Hey again,

Going back to a similar thing as issue #139, I've recently found out that the multi-selects don't submit subsequent selected values (it only takes the first one chosen), I've put back in my hotfix that I mentioned there (I have the advantage that I don't need to support the other browsers)

<select multiple="" name="multi_select[]">
    <option value="" hidden="hidden" disabled="disabled">Select Option</option>
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
    <option value="3">Option 3</option>
</select>

For reference, I've readded the fix below into my project (there's also a polyfill here https://github.com/jimmywarting/FormData for it if needed.... using FormData has the advantage of parsing all these fields in the correct way as a standard)

// Override the paramObject using FormData as it doesn't parse multi-selects properly
options.requestOptions.requestParams = [...new FormData(el).entries()].reduce((total, item) => {
  total.push({
    name: item[0],
    value: item[1]
  });

  return total;
}, []);

I'm also using the latest version of pjax

Hey again, Going back to a similar thing as issue #139, I've recently found out that the multi-selects don't submit subsequent selected values (it only takes the first one chosen), I've put back in my hotfix that I mentioned there (I have the advantage that I don't need to support the other browsers) ```html <select multiple="" name="multi_select[]"> <option value="" hidden="hidden" disabled="disabled">Select Option</option> <option value="1">Option 1</option> <option value="2">Option 2</option> <option value="3">Option 3</option> </select> ``` For reference, I've readded the fix below into my project (there's also a polyfill here https://github.com/jimmywarting/FormData for it if needed.... using FormData has the advantage of parsing all these fields in the correct way as a standard) ```javascript // Override the paramObject using FormData as it doesn't parse multi-selects properly options.requestOptions.requestParams = [...new FormData(el).entries()].reduce((total, item) => { total.push({ name: item[0], value: item[1] }); return total; }, []); ``` I'm also using the latest version of pjax

robinnorth commented

2018-04-10 03:46:01 -05:00

(Migrated from github.com)

Can confirm that only the first selected value in a multi-select is submitted with PJAX's current form handling behaviour. @BehindTheMath, we can use FormData if we drop IE9 support, otherwise the fix for this is pretty easy -- I already have something working locally.

Can confirm that only the first selected value in a multi-select is submitted with PJAX's current form handling behaviour. @BehindTheMath, we can use `FormData` if we drop IE9 support, otherwise the fix for this is pretty easy -- I already have something working locally.

BehindTheMath commented

2018-04-10 17:59:29 -05:00

(Migrated from github.com)

It seems to me that using FormData results in a drastically request body being sent, since it uses Content-Type: multipart/form-data instead of Content-Type: application/x-www-form-urlencoded. I haven't looked into if there's a difference how backend servers parse them, but it's possible that this would be a breaking change, even though the structure of the request body is not documented.

It seems to me that using `FormData` results in a drastically request body being sent, since it uses `Content-Type: multipart/form-data` instead of `Content-Type: application/x-www-form-urlencoded`. I haven't looked into if there's a difference how backend servers parse them, but it's possible that this would be a breaking change, even though the structure of the request body is not documented.

zeraphie commented

2018-04-11 09:45:55 -05:00

(Migrated from github.com)

I've noticed no adverse effects of using form data :)

BehindTheMath commented

2018-04-11 23:59:46 -05:00

(Migrated from github.com)

@zeraphie If I remember correctly, you're using PHP in the backend. From what I'm told, PHP doesn't differentiate between the two.

However, Express.js for Node uses 2 different libraries to parse application/x-www-form-urlencoded and multipart/form-data.

I think we should stick with application/x-www-form-urlencoded (or possibly switch to application/json).

@robinnorth Can you implement your fix?

@zeraphie If I remember correctly, you're using PHP in the backend. From what I'm told, PHP doesn't differentiate between the two. However, Express.js for Node uses 2 different libraries to parse `application/x-www-form-urlencoded` and `multipart/form-data`. I think we should stick with `application/x-www-form-urlencoded` (or possibly switch to `application/json`). @robinnorth Can you implement your fix?

Sign in to join this conversation.

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: iLoveElysia/pjax#146