PHP & Ajax - can i use POST to retrieve form value without reload

Question

I have a php file "Criteria" to display a bunch of html multi select dropdowns that can be used to create criteria for a query.

I have a php file "Results" which builds an SQL statement according to the selected options from various dropdowns, executes the query, and then displays the results of that query.

I would like to skip having to reload & echo all the html for each select dropdown, as they each contain hundreds of options. Ajax was my solution for this.

For each dropdown, an onchange event calls my javascript, which executes an Ajax call to my "Results" page. This "Results" page would then get the value of each select dropdown using $_POST['htmlSelectDropdownID'].

The problem, now that I have implemented Ajax, is that the selected value from the select dropdowns is not coming across to my Results file... and I can only assume this is because the HTML never reloaded...

Does anybody have a suggestion of how to resolve this issue?

Thanks,

------------------------ code --------------------------

My Javascript / Ajax

 function AjaxPostback(){
/*if (str=="")
{
    document.getElementById("divTest").innerHTML="";
    return;
} */
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
    xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
    if (xmlhttp.readyState==4)// && xmlhttp.status==200)
    {
        document.getElementById("divResults").innerHTML=xmlhttp.responseText;
    }
}
xmlhttp.open("GET","Results.php", true); //?q="+str,true);
xmlhttp.send();}

Just 1 of the dropdown on my page

Group By <select id="selGroupBy" name="selGroupBy" onchange="AjaxPostback()">
            <option value='Department' <?php if ($_POST['selGroupBy'] == 'Department') echo 'selected="selected"'; ?>>Department</option>
            <option value='Store' <?php if ($_POST['selGroupBy'] == 'Store') echo 'selected="selected"'; ?>>Store</option>
            <option value='Date' <?php if ($_POST['selGroupBy'] == 'Date') echo 'selected="selected"'; ?>>Date</option>
            <option value='Size' <?php if ($_POST['selGroupBy'] == 'Size') echo 'selected="selected"'; ?>>Size</option>
        </select>

-- The html that builds the Criteria (dropdown html) and the div (divResults) who's innerHTML is filled with the javascript

<div>
            <?php include ("Criteria.php"); ?>

            <div class="divResults" id="divResults">
                &nbsp;
            </div>
        </div>

When called, my Results.php file simply checks to document for things like.. if (isset($_POST['selDepartment']) && ($_POST['selDepartment'] == "320 Socks") { $sqlSelect .= $_POST['selDepartment']; }

I have also tried using $_GET instead of $_POST to retrieve the value, same result.. =\

Answer 1

It seems that you never send any param to your Results page. Try to add this:

xmlhttp.open("GET","Results.php?selGroupBy="+document.getElementById("selGroupBy").value, true); //?q="+str,true);

And get it on your php page with:

$val = $_GET['selGroupBy'];

Well, I maybe not understand your prob.