Jquery Problem Loading Data from Form Into Ajax Driven PHP Page using Change

Question

I am probably making some silly mistake but I am newer to the world of Jquery and am looking for some help with this issue.

I have a form that I need to check/validate two dates once they change their values. Once they change I had an Ajax call that loaded a page "checkdates.php" and passed in two bits of data. The Date that changed and a project name to "checkdates.php" using GET and adding the data to the URL string. This Ajax call loaded the page in a div with the ID "status" and php page displayed what the outcome of the date check was.

The Old code used prototype to pull in the data as a function and I used the onChange event on the form elements:

<script type="text/javascript" src="prototype.js"></script>
    <script type="text/javascript">
    /*function checkDate(date,project){
    if(date!==''){
    new Ajax.Updater('status', 'datechecker.php?date='+date+'&project='+project, { method: 'get' });
    } else {
    alert('enter a valid date!');
    }
    }
</script>

The code I'm trying to move over to jquery now looks like:

<script type="text/javascript">
    $(document).ready(function() {
     $('input#date_to').change(function() {
     var datevalue = $(this).val();
     $('#status').load('datechecker.php?date='+datevalue+'&project='+<? echo $_COOKIE['department']; ?>);
     }
     );

     $('input#date_from').change(function() {
     var datevalue = $(this).val();
     $('#status').load('datechecker.php?date='+datevalue+'&project='+<? echo $_COOKIE['department']; ?>);
     }
     );
    });
    </script>

I think it may be an issue probably with how i'm pulling in my data or how i'm asking it to check the .change feature because it's not firing. Any assistance would be wonderful. Again the disclaimer: I'm sort of new to jquery so please be nice if it's some obvious idiot mistake.

EDIT: As requested the HTML/PHP of the rest of the file (sorry for the formatting, this was a quick and dirty project that was last minute but turned into a huge headache):

<form id="form1" name="form1"  method="get" action="?page=post_request">
<div class="timeavailable">
<? 
    require('data.php');
    $name=$_COOKIE['un'];
    $query="SELECT * FROM time WHERE emp_name='".$name."'";
    $result=mysql_query($query);
    $num=mysql_num_rows($result);
    mysql_close();
    $i=0;
?>
Vac: <b><? echo mysql_result($result,$i,"vacationtime"); ?></b>   
Personal: <b><? echo mysql_result($result,$i,"personaltime"); ?></b>
Pts: <b><? echo mysql_result($result,$i,"points"); ?></b>
<input type="hidden" name="vacationtime" value="<? echo mysql_result($result,$i,"vacationtime"); ?>">
<input type="hidden" name="personaltime" value="<? echo mysql_result($result,$i,"personaltime"); ?>">
</div>
     <h1>Time Off Request Form</h1>
     <div class="header">
<div class="floatydetails">
<br>
Reason for Absence:<br>
<textarea name="reason_detail" id="reason_detail" rows="<?php echo $textareaheight; ?>" cols="<?php echo $textareawidth; ?>"></textarea>
<div id="status"></div>
<div id="daysrequested"></div>
</div>

     <div class="col1">
     Type of Absence Requested:<br>
      <label for="reason_for_request"></label>
       <select name="reason_for_request" id="reason_for_request">
        <option value="Sick" >Sick</option>
        <option value="Vacation" >Vacation</option>
        <option value="Bereavement" >Bereavement**</option>
        <option value="Doctor Appointment" >Doctor Appointment**</option>
        <option value="Court" >Court*</option>
        <option value="Jury Duty" >Jury Duty*</option>
        <option value="Personal Day" >Personal Day</option>
        <option value="Other" >Other</option>
       </select><br>
     <div class="col2">
      Date of Request (mm/dd/yyyy)<br/>
      <label for="date_from">From:</label> 
      <input type="text" name="date_from" id="date_from" class="required" /><br>
      <label for="date_to">To:</label>  
      <input type="text" name="date_to" id="date_to" class="required" /><br>
      Partial Request (HH:MM am/pm)<br/>
      <label for="date_from">From:</label> 
      <input type="text" name="partial_from" id="partial_from" class="date-pick"  /><br>
      <label for="date_to">To:</label>  
      <input type="text" name="partial_to" id="partial_to" class="date-pick" /><br>

     </div>
     </div>
     <div class="clear-fix"></div><br><br>
     <hr>
     <center><b>
     Note: If You do Not have the Time Available, Your request will be Denied.<br>
     * Proper Documentation is required Before approval is made.   ** Proper documenation is required upon return.
     </b></center>
     </div>
     <input type="hidden" name="do" value="post">
     <input type="hidden" name="emp_name" value="<? echo $_COOKIE['un']; ?>">
     <input type="hidden" id="projects" name="projects" value="<? echo $_COOKIE['department']; ?>">
     <input type="hidden" name="supervisor" value="<? echo $cms->grabItemByName(employees, $_COOKIE['user_id'], supervisor); ?>">
     <input type="hidden" name="emp_number" value="<? echo $cms->grabItemByName(employees, $_COOKIE['user_id'], employee_id); ?>">
     <input type="hidden" name="page" value="post_request">
     </form>

Answer 1

Is $_COOKIE['department'] an integer? Otherwise you'll probably have a syntax error there.

Both the functions seem to be identical so you can combine them like this:

<script type="text/javascript">
    $(document).ready(function() {
        $('input#date_to,input#date_from').change(function() {
            var datevalue = $(this).val();
            $('#status').load('datechecker.php?date='+datevalue+'&project='+<? echo json_encode($_COOKIE['department']); ?>);
        });
    });
</script>

Answer 2

Here is a possible answer:

http://stackoverflow.com/questions/695946/jquery-change-event-trigger

Also, try watching the console in Firebug to make sure your php page is getting/returning the correct values.

Answer 3

I found a solution after some of your help and some trial and error. Using the .ajax I was able to get more flexiability to do what I wanted.

<script type="text/javascript">
    $(document).ready(function() {
        $('#date_to,#date_from').change(function() {
     //$('input').change(function() {
            var datevalue = $(this).val();
      var project = $('#projects').val();
            $('#status p').load('datechecker.php?date='+datevalue+'&project='+project);
        });
    });
</script>

Hope this helps someone out.