Question

I am trying to setup a page where the users can select 1 criteria from a select menu and then select the second from another.

I would then like these variables to pass through my auto updating div using ajax so that they are used in the .php that is refreshed.

The select menu is working fine but how would I pass the values through ajax and then make sure it remembered them for the refresh.

FORM

<select id="employee_user"> 
<option value="">--</option> 
<option value="333">Test User</option> 
<option value="111">Testing Testing</option>     
</select> 

<select id="they" onchange="showUser(this.value, employee_user.value)"> 
<option value="">--</option> 
<option value="20120801" class="333" title="Test User">20120801</option> 
<option value="20110801" class="333" title="Test User">20110801</option> 
<option value="20100801" class="333" title="Test User">20100801</option> 
<option value="20120801" class="111" title="Testing Testing">20120801</option> 
<option value="20110801" class="111" title="Testing Testing">20110801</option> 
</select> 

</form> 

AUTO REFRESHING DIV

<script>
(function($)
{
    $(document).ready(function()
    {
        $.ajaxSetup(
        {
            cache: false,
            beforeSend: function() {
                $('#updatingdiv').hide();
                $('#loading').show();
            },
            complete: function() {
                $('#loading').hide();
                $('#updatingdiv').show();
            },
            success: function() {
                $('#loading').hide();
                $('#updatingdiv').show();
            }
        });
        var $container = $("#updatingdiv");
        $container.load("getholidaylog.php");
        var refreshId = setInterval(function()
        {
            $container.load('getholidaylog.php');
        }, 9000);
    });
})(jQuery);
</script>

    <div id="updatingdiv"></div>
    <img src="loading.gif" id="loading" alt="loading" style="display:none;" />

and then getholidaylog.php would:

$year = $_GET["year"];
$username = $_GET["username"];

and use for the database query.

EDIT

$j(document).ready(function() {     
    $j("#year_select").change(function (){
        $.ajaxSetup(
        {
            cache: false,
            beforeSend: function() {
                $('#updatingdiv').hide();
                $('#loading').show();
            },
            complete: function() {
                $('#loading').hide();
                $('#updatingdiv').show();
            },
            success: function() {
                $('#loading').hide();
                $('#updatingdiv').show();
            }
        });
        var $container = $("#updatingdiv");

        var user_select= $j('#user_select').val();
        var year_select= $j('#year_select').val();
        $container.load('getholidaylog.php',{username:user_select,year:year_select}); 
        var refreshId = setInterval(function()
        {
            $container.load('getholidaylog.php');
        }, 9000);
    });

})(jQuery);

**

Answer 1

Following code passing the values to php page successfully

<script type="text/javascript">
    $(document).ready(function(){
        $("#they").change(function () {
        var firstVal = $("#employee_user").val();
        var secVal = $("#they").val();

        $.ajax({
                type: "POST",
                data: "year="+ firstVal +"&username="+ secVal,
                url: "getholidaylog.php",
                success: function(msg){
                $("#updatingdiv").html(msg);

                }
            });
        });
    }); 
</script>

but instead of loading the getholidaylog.php into div load the content of respective page into the div