Pass select list to php page

Question

I am currently trying to pass a select list (the whole list) into a php page and grabbing the individual values from the list to do a dynamic sql query. I pass in selectItems, but when I perform an echo, I get

[object HTMLSelectElement]

I have also tried passing in selectItems.value, but that only passes in one of the 3 list items.I have searched for the past day and I haven't had much success. I'm not too sure how to approach this. Any help would be greatly appreciated.

The current select list is as follows

    <select multiple name="selectItems" size="6" id="selectItems">
    <option value="value1" selected="selected">value1</option>
    <option value="value2" >value2</option>
    <option value="value3" >value3</option>
    </select>

    <input type=button id="opener" value='Clickme' onclick="showTable(selectItems, 'getquery.php')">

A snippet from the showtable function below, I am basically trying to pass the list (denoted by q) and the location of the page.

xmlhttp.open("GET",page+"?q="+str,true);
xmlhttp.send();

MackieeE · Accepted Answer · 2013-03-11T16:11:56.680

2

Your initial onclick method wasn't passing through the Select node at first, and even then - you're sending across the actual node itself to PHP; not the extracted values.

As dm03514 said himself, you can serialise the Query string in form of a PHP Array so it's more easily manageable at the PHP level.

jsFiddle: http://jsfiddle.net/7dtXs/1/

    <script type="text/javascript">
    function showtables( selectObj, page ) {

        var xmlhttp = new XMLHttpRequest();
        var str = "";

        var AllOptions = selectObj.options;
        var SelectedOptions = selectObj.selectedOptions;

       /**
        *   Iterate through each Object that is selected
        *   From here you can pick out:
        *       - id name
        *       - value
        *   etc, to form a query string 
       **/
       for ( var x = 0; x < AllOptions.length; x++ ) {
           str +=  ( !x ? "" : "&" ) 
                   + AllOptions[x].value + "=" + AllOptions[x].textContent;
       }

      /** 
       *    if apples & shaz.. selected   
       *    str now contains:
       *        &value1=Apples&vsalue2=shazbots
      **/
      console.log( str );

      xmlhttp.open("GET", page + "?" + str, true);
          xmlhttp.send();
      }
  </script>

    <select multiple name="selectItems" size="6" id="selectItems">
        <option value="value1">Value1</option>
        <option value="value2">Value2</option>
        <option value="value3">Value3</option>
    </select>

    <!-- Passing through ID.selectedOptions to function -->
<input type="button" id="opener" value="Clickme" onclick="showtables( document.getElementById('selectItems'), 'getquery.php' );">

Furthermore, your example did have mis-quotations, not sure if that's just on your example or your code - for example: type=button should be type="button".

I hope I understood your question correctly! :)

edited Mar 11 '13 at 16:11

answered Mar 08 '13 at 22:23

MackieeE

11,197
3
37
53

Unfortunately, I wasn't able to get the code to serialize. :( Why do we use .selectedOptions? Does that grab only the selected values of the listbox? I would like to grab all of it regardless of selection. When I try to echo q in the php page, nothing seems to load from php. Any ideas? – rawrPowershell Mar 11 '13 at 14:42
Well, I've updated my answer to simply iterate the options instead - but logicically, you only need the selected items because you already know the values of the other items, 0! So if you were to send all the values of a list selection.. it almost defeats the purpose of it in the first place, because how can you differentiate the true/falses? Which is where checkboxes are probably a better option. Lastly, if you load the page directly in your browser (yoursite/getquery.php?q=test) - and there's no echo of 'test' - you might need to check your PHP Code for Errors – MackieeE Mar 11 '13 at 15:00
Nice JSfiddle is very helpful. The reason why I need to grab all the list items is because I have 2 button functions, one function will query for individual items and the one I am working on now will query everything within the list. The code works great, but when I pass it to a simple php page, it won't load. I am currently doing $q=$_GET["q"]; echo $q; but it doesn't seem to like the values I pass in from the serialization. I appreciate the awesome help so far :) – rawrPowershell Mar 11 '13 at 15:51
That's quite alright! =] Firstly, do: die( $_GET ); in your getquery.php, if nothing at all appears, then nothing is reaching the page unforuantely. If that's the case, follow this [Stackoveflow page here](http://stackoverflow.com/questions/1820927/request-monitoring-in-chrome) that listens to all the HTTP (Ajax) requests going out of your current page, so when you click the button, check to see where the Ajax request is going.. =) – MackieeE Mar 11 '13 at 15:59
Apologies, I had to edit small part of the code because ?q= was always returning empty (but the other values were still appearing) – MackieeE Mar 11 '13 at 16:13
But if I remove ?q and do a $q=$_GET, it only returns "Array" when I echo. – rawrPowershell Mar 11 '13 at 16:40
let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/25968/discussion-between-mackieee-and-rawrpowershell) – MackieeE Mar 11 '13 at 16:42

score 0 · Answer 2 · answered Mar 08 '13 at 21:05

0

you can serialize the html values

what php is looking for is an array of values ie.

http://example.com/?selectItems[]=test&selectItems[]=test1

This will allow you to access all values as an array in php.

Now as for the best way to do it. I don't know using vanilla javascript. you can loop through all selected values and build your own querystring?

answered Mar 08 '13 at 21:05

dm03514

50,477
16
96
131

I have tried serializing, but I wasn't sure if that was the correct route as I wasn't able to get it to work properly. Basically my output was s:26:"[object HTMLSelectElement]"; – rawrPowershell Mar 08 '13 at 21:18

Pass select list to php page

2 Answers2