เกี่ยวกับ javascript ไม่ดึงค่ามาแสดง รบกวนช่วยดูให้หน่อยค่ะ

<link type="text/css" href="css/ui.all.css" rel="stylesheet"/>
<link rel="stylesheet" type="text/css" href="css/ui.datepicker.css">
<script type="text/javascript" src="js/jquery-1.4.2.js"></script>
<script type="text/javascript" src="js/ui.datepicker.js"></script>
<script type="text/javascript" charset="utf-8">
function showUser(str)
{
if (str=="")
  {
  document.getElementById("txtHint").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("txtHint").innerHTML=xmlhttp.responseText;
    }
  }
xmlhttp.open("GET","frm_contact.php?p="+str,true);
xmlhttp.send();
    

}

$(function(){
        
        $("#start_period1").datepicker({dateFormat: 'yy-mm-dd'});
        $("#stop_period1").datepicker({dateFormat: 'yy-mm-dd'});
        
    }); 

</script>
<select name="type_id" id="type_id" onchange="showUser(this.value)">
         <option value="">เลือก</option>
         <option value="11">11</option>
         <option value="22">22</option>
        
      </select>   
                         
<div id="txtHint"> </div>



frm_contact.php
<table width="100%" border="0" style="font-size:13px;" cellpadding="3" cellspacing="3">

  <tr>
   
    <td><input name="start_period1" type="text" id="start_period1" maxlength="10" readonly value="<? echo date("Y-m-d"); ?>"/></td>
    <td><input name="stop_period1" type="text" id="stop_period1" maxlength="10"  readonly value="<? echo date("Y-m-d"); ?>"/></td>
  </tr>
  
</table>