form表单处理数据

news/2024/7/19 14:05:39 标签: form, js

serializeObject()  ==> Object

serializeArray() ==> Array

贴部分代码:

<form action="" id="defaultForm">
            <table class="table table-bordered table-striped" border="1" cellspacing="0" cellpadding="0"
                   style="width:1000px;margin:0 auto">
                <tr>
                    <td>项目名称</td>
                    <td>
                        <input id="PROJECTNAME" name="PROJECTNAME" type="text" value="" placeholder="用户填"
                               class="form-control"/></td>

                    <td>申报编码</td>
                    <td>
                        <!--系统自动生成-->
                        <span id="DECLARECODE"></span>
                    </td>
                </tr>
                <tr>
                    <td>申报文号</td>
                    <td>
                        <input id="DECLARENUMBER" name="DECLARENUMBER" type="text" value="" placeholder="用户填"
                               class="form-control"/></td>
                    <td>申报文件名称</td>
                    <td>
                        <input id="DECLAREFILENAME" name="DECLAREFILENAME" type="text" value="" placeholder="用户填"
                               class="form-control"/></td>
                </tr>
                <tr>
                    <td>年份</td>
                    <td>
                        <!--用户填-->
                        <input name="DECLAREYEAR" id="DECLAREYEAR" type="text" readonly="readonly" maxlength="20"
                               class="input-medium Wdate"
                               value="2018"
                               onclick="WdatePicker({dateFmt:'yyyy',isShowClear:true});" autocomplete="false"/>
                    </td>
                    <td>申报指南名称</td>
                    <td><span id="DECLAREGUIDENAME"></span>
                    </td>
                </tr>

                <tr>
                    <td>建设单位</td>
                    <td colspan="3"><input name="BUILDUNIT" type="text" class="form-control" placeholder="用户填"/></td>

                </tr>
                <tr>
                    <td>建设内容</td>
                    <td colspan="3">
                    <textarea rows="15" class="form-control" value="用户填" style="width:87%; height:180px"
                              name="BUILDCONTENT" htmlEscape="false"></textarea></td>
                </tr>
                    <td>建设性质</td>
                    <td style="text-align: center;">
                        <!--用户选-->
                        <select id="BUILDNATURE" name="BUILDNATURE" width="100%" class="form-control"
                                style="text-align: center;">
                            <option value="" selected="selected"></option>
                            <option value="continue">改扩建</option>
                            <option value="expand">扩建</option>
                            <option value="move">迁建</option>
                            <option value="new">新建</option>
                            <option value="rebuild">改建</option>
                            <option value="reprint">翻建</option>
                            <option value="single">单纯购置</option>
                        </select>
                    </td>
                    <td>建设单位是否属于农垦系统</td>
                    <td style="text-align: center;">
                        <!-- 用户选-->
                        <select id="BUILDBELONGFARM" name="BUILDBELONGFARM" class="form-control" width="100%">
                            <option value=""></option>
                            <option value="0" selected="selected">否</option>
                            <option value="1">是</option>
                        </select>
                    </td>
                </tr>
                <tr>
                    <td>立项年度</td>
                    <td colspan="3">
                        <!-- 等立项批复通过自动获取-->
                        <input name="SETUPYEAR" type="text" readonly="readonly" maxlength="20"
                               class="input-medium Wdate required input1 disabled"
                               id="SETUPYEAR" value=""
                               onclick="WdatePicker({dateFmt:'yyyy',isShowClear:true});" disabled="disabled"/>
                    </td>
                </tr>
                <tr>
                    <td>填表人:</td>
                    <td>
                        <input name="CREATEUSER" id="CREATEUSER" value="" htmlEscape="false" readonly="readonly"
                               class="form-control"/>
                    </td>
                    <td>填报日期:</td>
                    <td>
                        <input name="UPDATEDATE" id="UPDATEDATE" type="text" readonly="readonly" maxlength="20"
                               class="input-medium Wdate"
                               value=""
                               onclick="WdatePicker({dateFmt:'yyyy-MM-dd'});"/>
                    </td>
                </tr>

            </table>
        </form>
/**
         * 自动将form表单封装成json对象
         */
        $.fn.serializeObject = function () {
            var o = {};
            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;
        };

        var formObject = $("#defaultForm").serializeObject(),
            formArray = $("#defaultForm").serializeArray();
        console.log(formObject)
        console.log(formArray)

控制台显示如下:

Object中 字段为form中input、textarea等的name值,内容为value

Array中  name<==>input[name=xxx],value<==>$(input[name=xxx]).val()


http://www.niftyadmin.cn/n/1076933.html

相关文章

http GET 和 POST 请求的优缺点和误区 (搬砖)

这么一个浮躁的下午我居然能吧博主大大的文章看完&#xff0c;佩服自己&#xff0c;一定要转发~&#xff01;#&#xffe5;%……&*&#xff08;&#xff09; 原文链接 https://blog.csdn.net/zzk220106/article/details/78595108 Get和Post在面试中一般都会问到&#xff…

Apache虚拟主机实验集

目录实验&#xff1a;基于PORT的多虚拟主机配功能实验&#xff1a;基于 ip 的多虚拟主机配功能实验&#xff1a;基于 FQDN 的多虚拟主机配功能实验&#xff1a;基于PORT的多虚拟主机配功能 实验环境&#xff1a; 网站服务器&#xff1a;192.168.99.101 客户机&#xff1a;192.…

Linux/CentOS 服务安装/卸载,开机启动chkconfig命令详解|如何让MySQL、Apache开机启动?...

chkconfig chkconfig在命令行操作时会经常用到。它可以方便地设置和查询不同运行级上的系统服务。这个可要好好掌握&#xff0c;用熟练之后&#xff0c;就可以轻轻松松的管理好你的启动服务了。 注&#xff1a;谨记chkconfig不是立即自动禁止或激活一个服务&#xff0c;它只是简…

jqgrid序号列宽度调整-已入坑

今天新做一个需求&#xff0c;在jqgrid做表格的基础上加序号列并且设置列标题&#xff0c; 头都大了&#xff0c; 照例问过度娘之后&#xff0c;把成功的例子和大家分享一下。 jqgrid显示序列号的代码只需要加一行就可以&#xff1a; rownumbers: true, 但是由于初始化序列号…

Apache实验集_yum安装版

实验目录源码编译apache实验&#xff1a;httpd 配置 basic 验证实验&#xff1a;httpd 开启传输数据压缩功能实验&#xff1a;httpd 配置 https 协议源码编译apache 下载源代码并解压缩&#xff1a; wget httpd-2.4.27.tar.bz2 wget apr-1.6.2.tar.bz2 wget apr-util-1.6.0.t…

Linux学习06-文件与文件系统的压缩

1 Linux常见的压缩命令 *.Z compress 程序压缩的文件&#xff1b; *.zip zip 程序压缩的文件&#xff1b; *.gz gzip 程序压缩的文件&#xff1b; *.bz2 bzip2 程序压缩的文件&#xff1b; *.xz xz 程序压缩的文件&#xff1b; *.tar …

Apache全解(一)_发展历史

目录HTTP协议和APACHETCP/IP协议跨网络的主机间通讯Socket套接字客户/服务器程序的套接字函数系统调用Socket通信示例&#xff1a;HTTP协议和APACHE #互联网Internet #Internet与中国 Internet最早来源于美国国防部高级研究计划局ARPA建立的ARPANet&#xff0c;1969年投入运…

数据压缩 : 简要

1. 决定压缩哪些对象 通过sp_estimate_data_compression_savings 评估在ROW和PAGE压缩时分别节省的空间量。 表包含如下数据模式时&#xff0c;会有较好的压缩效果&#xff1a; 数字类型的列和固定长度的字符类型数据&#xff0c;但两者的大多数值都不会用到此类型的所有字节。…