jQuery Grid Plugin - jqGrid

I am using datepicker to select dates for my query. When I hard code the url to call the index.php as in the sample everything works great. My query picks up the dates.
var startdate = "2014-07-01";
var enddate = "2014-07-02";
url: "index.php?startdate="+ startdate +"&enddate=" + enddate,

 

now when I change to this the dates are not being picked up. 

var startdate = $('#startdate').val();
var enddate = $('#enddate').val();
url: "index.php?startdate="+ startdate +"&enddate=" + enddate,

 

I know the structure works properly because the first example returns the proper records. if I use the second method I get nothing returned, as I would expect with no dates.

What am I missing