Using AJAX via POST with multi-select
I have a search form that uses AJAX to fetch data and populate a table. Several of the search fields are multiple selects. Problem is, only the first option is getting passed thru to the PHP file called by the AJAX function.
- var fs_users = $("#users"), fs_status("#status"), fs_roles("#roles"), ...;
- var fs_allFields = $([]).add(fs_users).add(fs_status).add(fs_roles)...;
- $("#fsSearch").click(function() {
- //alert(fs_roles.val());
- $.ajax({
- "cache": false,
- "type": "POST",
- "url": "fetch_data.php",
- "data": fs_allFields,
- "dataType": "json",
- "error":...
- "success":...
- });
- });
For debugging purposes, the target PHP file ("fetch_data.php") dumps the $_POST and $_GET variables to a file. As mentioned, only the first option from the multi-selects is getting passed thru in the $_POST variable ($_GET is empty as expected). The alert (line 4) will correctly display a comma-delimited list of all the selected values (also verified via Firebug while stepping thru the code). Someone in another thread suggested using serialize() (e.g. line 9 becomes "fs_allFields.serialize()", but that caused NOTHING to get passed thru.
Maybe I've been staring at it too long and there's a simple fix is right in front of me, but I just can't see it.
HELP!
--Mitch
P.S. I'm using the latest versions of jQuery and jQuery-UI.