1. 程式人生 > >jquery serializeobject();方法序列化表單的屬性,返回字串。

jquery serializeobject();方法序列化表單的屬性,返回字串。

serializeobject(); 可以將表單中的文字框 下拉框 根據name 屬性 序列化成字串,必須在js中寫這個方法

$.fn.serializeObject = function() {
    var o = {"unique_id":new Date().getTime(),"state":false};
    var a = this.serializeArray();
    $.each(a, function() {
        if (o[this.name]) {
            if (!o[this.name].push) {
                o[this.name] = [o[this.name]];
            }
            o[this.name].push(this.value || '');
        } else {
            o[this.name] = this.value || '';
        }
    });
    return o;
};

<form class="form-horizontal m-t" id="design_task_form" onsubmit="return false">
                        <div class="form-group">
                            <label class="col-sm-3 control-label" style="margin-left: 15%;">製作專案:</label>
                            <div class="col-sm-6">
                                <select style="width:245px;"  class="chosen-select" data-id="task_item" id="task_item" name="task_item"></select>
                                <input type="hidden" id="f_task_item" value="${designTask.task_item}">
                            </div>
                        </div>
                        <div class="hr-line-dashed"></div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label" style="margin-left: 15%;">製作類別:</label>
                            <div class="col-sm-6">
                                <select style="width:245px;"  class="chosen-select" data-id="task_classify" id="task_classify" name="task_classify"></select>
                                <input type="hidden" id="f_task_classify" value="${designTask.task_classify}">
                            </div>
                        </div>
                        <div class="hr-line-dashed"></div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label" style="margin-left: 15%;">色別:</label>
                            <div class="col-sm-6">
                                <%-- <input id="color" name="" class="form-control required" value="${designTask.color}"> --%>
                                <select style="width:245px;"  class="chosen-select" data-id="color" id="color" name="color"></select>
                                <input type="hidden" id="f_color" name="f_color" value="${designTask.color}">
                            </div>
                        </div>
                        <div class="hr-line-dashed"></div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label" style="margin-left: 15%;">數量:</label>
                            <div class="col-sm-6">
                                <input id="quantity" style="width:245px;" name="quantity" class="form-control required" value="${designTask.quantity}">
                            </div>
                        </div>
                        <div class="hr-line-dashed"></div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label" style="margin-left: 15%;">單位:</label>
                            <div class="col-sm-6">
                                <select style="width:245px;"  class="chosen-select" data-id="unit" id="unit" name="unit" value="${designTask.unit}"></select>
                                <input type="hidden" id="f_unit" value="${designTask.unit}">
                            </div>
                        </div>
                        <%-- <div class="hr-line-dashed"></div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label" style="margin-left: 15%;">設計人:</label>
                            <div class="col-sm-6">
                                <select style="width:245px;"  class="chosen-select" data-id="server" id="designer" name="designer">
                                    <c:forEach items="${userList}" var="user" varStatus="status">
                                        <option value="${user.user_id}" id="user${user.user_id}">${user.true_name}</option>
                                    </c:forEach>
                                </select>
                                <input type="hidden" id="f_designer" value="${designTask.designer}">
                                <input type="hidden" id="designer_name" name="designer_name">
                            </div>
                        </div> --%>
                        <input type="hidden" id="designer" name="designer" value="${designTask.designer}">
                        <input type="hidden" id="designer_name" name="designer_name" value="${designTask.designer_name}">
                        <div class="hr-line-dashed"></div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label" style="margin-left: 15%;">完成時間:</label>
                            <div class="col-sm-6">
                                <input placeholder="完成時間" style="width:245px;" class="form-control layer-date required" id="finish_date" name="finish_date" value="<fmt:formatDate value="${designTask.finish_date}" pattern="yyyy-MM-dd HH:mm:ss"/>">
                            </div>
                        </div>
                    </form>