jquery datepicker not sending data on using .serialize() for populating the grid

Question

I have a form with 2 input type="text" , 1 combo box and other contains ( combo box contains equal , after,before & between operators + start date(jquery datepicker)+end date(jquery date picker ) but when i am sending the data to server its not appending date parameters with the url using .serialize().

My approach:

$("form#transactionForm").submit(function() {
    var newUrl = "/cpsb/transactionHistory.do?method=getTransactionHistoryDetails&" +
                 $(this).serialize();

    $("#transactionHistory").jqGrid(
        "setGridParam",
        {"url": newUrl, datatype:"json"}).trigger("reloadGrid");
    return false;
});

mark up:

<form class="transform" id="transactionForm" method="post" action="">
    <fieldset class="ui-widget ui-widget-content ui-corner-all">
        <legend class="ui-widget ui-widget-header ui-corner-all">Transaction History</legend>
        <p>
            <label for="lpn">LPN</label>
            <input id="lpn" name="lpn"/>
        </p>
        <p>
            <label for="sku">SKU</label>
            <input id="sku" name="sku" class="skui ui-widget-content" />
        </p>
        <p>
            <label for="ttype">Transaction Type:</label>
            <select id="ttype" name="tranType" >
            <option value="">Select transaction type</option>
            <option value="100">100-Receipt</option>
            <option value="110">110-Shipment</option>
            <option value="120">120-Pallet Update</option>
            </select>
        </p>
        <p>
            <label for="tdate">Transaction date:</label>
            <select id="tdate" name="date">
                <option value="equalsDate">Equal</option>
                <option>Between</option>
                <option value="beforeDate">Before</option>
                <option value="afterDate">After</option>
            </select>
            <input id="sdate" type="text"  style="width:70px"/>
            <input id="edate" type="text"  style="width:70px"/>
        </p>
        <p>
            <button class="submit" type="submit">Search</button>
        </p>
    </fieldset>
</form>

Answer 1

The problem is very easy. If you want that the input fields with ids "sdate" and "edate" having datepicker will be serialized under the names startDate and endDate you have to modify your HTML code from

<input id="sdate" type="text"  style="width:70px"/>
<input id="edate" type="text"  style="width:70px"/>

to

<input id="sdate" name="startDate" type="text" style="width:70px"/>
<input id="edate" name="endDate"   type="text" style="width:70px"/>

The function jQuery.serialize() serialize only elements which has name attribute. All your <select> have name attribute so they are serialized.