JQuery专栏之十三————获取表单中可编辑控件的名称、类型及其值

13. 获取表单中可编辑控件的名称、类型及其值。

在jQquery中，可以通过多种方法获取页面中的所有可编辑控件的名称、类型和值。不同类型的控件其取值方法不同。一般控件可直接使用jQuery语句$(#id).val()取值，而textbox和combobox控件需要使用getValue方法取值。checkbox控件的取值比较复杂，可以在判断其选中状态的基础上，使用attr()方法从属性中取值。

本例使用$('input, select, textarea').each(function(index)方法遍历一个页面所有控件，利用循环，先使用this和attr(‘type’)分别提取控件的标识符和类别，然后根据控件类别采用不同的取值方式获取控件内容值，并将结果按照JSON格式存放到一个data变量中，在一个textarea框中显示出来。具体方法和代码如下：

$('input, select, textarea').each(function(index){

     var input = $(this);

     var id=input.attr('id');

     var value=undefined;

     var type=input.attr('type');

     var hidden=input.attr('hidden');

     if (id!=undefined){

              if (type=='text' && hidden!='hidden'){

                        value=input.textbox('getValue');

              }else if (type=='combobox'){

                        value=input.combobox('getValue');

              }else if (type=='checkbox'){

                        if (input.is(':checked')) value=input.attr('xtext');

              }else if (type!='button'){

                        value=input.val();                       

              }

              if (value!=undefined){

                        if (data!='') data+=',';                           

                        data+='"'+id+'":"'+value+'"';

                        console.log(id+'----'+type+'----'+value);

              }

     }

});

data='{'+data+'}';

$("#xformvalues").val(data);

由于获取一个控件值的程序比较繁琐，因此可以专门构造一个自定义函数，在给定一个控件ID值的基础上，返回其内容值。具体方法可参考Easyui_function.js文件中的myGetInputValue()函数。

本例所属的控件遍历方法也可应用于其他事务处理中。例如，将一个表单中的所有可编辑控件内容清空，或设置为只读状态等。

作业题：

1．根据页面中各个控件名称及其内容值，生成一条数据库Insert语句和update语句。

2．在利用$('input, select, textarea').each(function(index)获取页面控件时，如何避免那些不是表单中的控件，如本例中的xformvalues，它是window窗口中的控件。