Question

UPDATE: Thanks for all the quick responses. Should have probably clarified that I’ve already got JQuery providing the widgets with functionality. But it is helpful to better understand what the relationship is btw HTML, Javascript and PHP in web development.

I am trying to put together a web page that queries a database and returns some pre-written MySQL queries:

I have a handful of queries like:

function someQuery($connection) {

 $query = "SELECT DISTINCT Column1, Column2
                 FROM TABLE1, TABLE2
                 WHERE TABLE1.Colum1_ID = TABLE2.Colum1_ID";

        if (!($result = @ mysql_query ($query, $connection)))
           showerror();

        if (@ mysql_num_rows($result) != 0) {
           echo "\n<table border=1 width=100%>";

           echo "\n<tr>" .
                 "\n\t<th>Column1</th>" .
                 "\n\t<th>Column2</th>" .
                 "\n</tr>";

           while($row = @ mysql_fetch_array($result)) {

              echo "\n<tr>" .
                    "\n\t<td>{$row["Column1"]}</td>" .
                    "\n\t<td>{$row["Column2"]}</td>";

           }
           echo "\n</table>";
        }

then I have widgets for displaying the functions:

   <li class="widget">  
       <div class="widget-top">
          <h3>Query Category</h3>
           <select>
             <option value="1">Query of Interest 1</option>
             <option value="2">Query of Interest 2</option>
             <option value="3">Query of Interest 3</option>
             <option value="4"Query of Interest 4</option>
           </select>
       </div>
       <div class="widget-content">
           <p><?

            ****Would Run Query here ****, but want to check the selections above and run query associated with selected option.

              ?></p>
       </div>
   </li>

So my question is, how do it set it up so that the user could select one of the queries of interest from the drop down menu so that the associated PHP function will run, displaying the query results the user selected??

I’ve done a lot of searching around and was suprised to find that nothing seems to match what I am trying to do here, although I feel like this is a rather routine feature.

Answer 1

The easiest way to do this, is to use the onChange event from the SELECT form element. When the event is fired, you could then call an AJAX function, to populate (by executing a server side script) the DIV tag.

The below sample assumes the use of jQuery.

Give your select element an ID

<select id="myselect">
    <option value="1">query 1</option>
    <option value="2">query 2</option>
    <option value="3">query 3</option>
</select>

Then add a jquery script to populate the DIV tag.

$('#myselect').change(function() {
    $('.widget-content').load('runquery.php?id='+this.options[this.selectedIndex].value);
});