日期:2014-05-16 浏览次数:20441 次
看了jquery的表单对象,产生了自己写一个表单数据生成json字符串的函数的想法,试了一下,代码如下,抛砖引玉吧!
html代码:
<div style="width:400px;background-color:#CCCCCC;padding:10px"> <form id="myform"> <p> 姓名:<input type="text" value="wangsir" id="uname" name="uname"/> </p> <p> 怩称:<input type="text" value="风一样的男子" id="nikename" name="nikename"/> </p> <p> 性别:<select name="sex" id="sex"><option selected value=1>男</option><option value=0>女</option></select> </p> <p> 婚姻状态:<input type="radio" name="married" value="yes"/>已婚<input type="radio" name="married" value="no">未婚 </p> <p> 个人爱好: <input type="checkbox" name="fav" value="足球">足球 <input type="checkbox" name="fav" value="台球" >台球 <input type="checkbox" name="fav" value="羽毛球">羽毛球 </p> <p> 择偶标准: <input type="checkbox" name="standard" value="高">高 <input type="checkbox" name="standard" value="帅">帅 <input type="checkbox" name="standard" value="富">富 </p> <p> 目标城市:<select name="city" id="city"><option selected value="wh">武汉</option><option value="other">外省</option></select> </p> <p> 头像:<input type="text" readonly value="./images/head.jpg" id="headpic" name="headpic"><img src="./images/head.jpg" width=64px height=64px id="headpic" /> </p> <p> 受教育经历: <textarea rows="10" cols="50" id="eduhistory" name="eduhistory" value="" width="200px" height="180px"></textarea> </p> <p> <input type="button" value="提交" onclick="javascript:alert($('#myform').formtojson());"/> <input type=reset value="取消" /> </p> </form> </div>
?
javascript代码:
?
$.fn.formtojson = function(){ ? ???? var formid="#"+$(this).attr("id"); ?????????? var json=""; ???? var radios=""; ???? var checks=""; ???? var texts=""; ???? var combos=""; ???? var textareas=""; ???? var selector=formid+" input"; //找到表单中所有的input标签 ???? var comboselector=formid+" select";? //找到表单中所有select combo对象 ???? var textareaselector=formid+" textarea";? //找到表单的大文本输入框 ???? //处理大文本框 ???? for(i=0;i<$(textareaselector).length;i++){ ??????? var textareaelement=textareaselector+":eq("+i+")"; ???? var textareaname=$(textareaelement).attr("name"); ???? if(textareas.indexOf(textareaname)==-1){ ??????? textareas=(textareas.length==0?"":textareas+",")+textareaname+":'"+ ???? $("textarea[name='"+textareaname+"']").val()+"'"; ???? } ???? } ???? //处理下拉列表框 ???? for(i=0;i<$(comboselector).length;i++){ ??????? var comboelement=comboselector+":eq("+i+")"; ???? var comboname=$(comboelement).attr("name"); ???? if(combos.indexOf(comboname)==-1){ ??????? combos=(combos.length==0?"":combos+",")+comboname+":'"+ ???? $("select[name='"+comboname+"']").val()+"'"; ???? } ???? } ???? //处理input对象 ???? for(i=0;i<$(selector).length;i++) ???? { ?????? var element=selector+":eq("+i+")"; ??? var etype=$(element).attr("type"); ??? //处理文本框 ??? if(etype=="text"||etype=="password"){ ??? ?var tkname=$(element).attr("name"); ????if(texts.indexOf(tkname)==-1){ ?????? texts=(texts.length==0?"":texts+",")+tkname+":'"+$("input[name='"+tkname+"']").val()+"'"; ????} ??? } ??? //处理单选框 ??? if(etype=="radio"){ ??? ?var rkname=$(element).attr("name"); ????if(radios.indexOf(rkname)==-1){ ?????? var checkedcount=$("input[name='"+rkname+"']:checked").length; ?????? radios=(radios.length==0?"":radios+",")+rkname+":'"+ ??????? (checkedcount==0?"":$("input[name='"+rkname+"']:checked").val())+"'"; ????} ??? } ??? //处理多选框 ??? if(etype=="checkbox"){ ??? ???? var ckname=$(element).attr("name"); ?????//alert(ckname); ???????????????????? //1\检查checks是否已经此checkbox ?????if(checks.indexOf(ckname+":")==-1){ //以前没有找到过 ??????? //2\没有,则将其值存