CODEWITHSUNDEEP
phpjavascript
rawrPowershell
rawrPowershell

Reputation: 124

Pass select list to php page

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();

Upvotes: 1

Views: 752

Answers (2)

MackieeE
MackieeE

Reputation: 11872

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! :)

Upvotes: 2

dm03514
dm03514

Reputation: 55972

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?

Upvotes: 0

Related Questions