jquery datepicker 不发送数据使用 .serialize() 填充网格答案

【问题标题】：jquery datepicker not sending data on using .serialize() for populating the gridjquery datepicker 不发送数据使用 .serialize() 填充网格
【发布时间】：2010-09-09 20:05:50
【问题描述】：

我有一个表单，其中包含 2 个输入类型 =“文本”、1 个组合框和其他包含（组合框包含相等、之后、之前和运算符之间 + 开始日期（jquery datepicker）+结束日期（jquery datepicker）但是当我将数据发送到服务器时，它不会使用 .serialize() 在 URL 中附加日期参数。

我的做法：

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

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

标记：

<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>

【问题讨论】：

标签： jquery jqgrid datepicker submit serialization

【解决方案1】：

这个问题很简单。如果您希望 ID 为 "sdate" 和 "edate" 且具有 datepicker 的输入字段将在名称 startDate 和 endDate 下序列化，您必须从

修改您的 HTML 代码

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

到

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

函数jQuery.serialize() 仅序列化具有name 属性的元素。你所有的<select> 都有name 属性，所以它们被序列化了。

【讨论】：

谢谢！我的错....当用户选择其他组合框选项而不是介于...之间时，我可以禁用结束日期...仅在我想使用结束日期的运算符之间进行选择...
我不完全了解您想要什么，但在我看来，您在问题中找到了答案。您可以使用$("#edate").removeAttr('name'); 删除name 属性或使用$("#edate").attr('name', 'startDate'); 恢复它
我想禁用我的第二个日期选择器...只有当用户从下拉组合框中选择“介于”选项时，才能使用日期选择器...
@paul: 那么你可以将“change”事件处理程序绑定到下拉列表“#tdate”（$("#tdate").change(function() { ... }），如果选中的项目（$("#tdate option:selected").text()）是“Between”然后显示第二个日期选择器使用$("#edate").show() 或使用$("#edate").hide() 隐藏它。如果你会看到$.serialize() 将序列化隐藏的日期选择器，那么使用$("#edate").removeAttr('name') 和$("#edate").attr('name', 'startDate') 的技巧。
@Oleg ..我可以这样做 $("#tdate").change(function(){ if(($("#tdate option:selected").text()) = = 之间）{ $("#edate").show(); } else { $("#edate").hide(); } });和