jquery form表单获取内容以及绑定数据


Posted in Javascript onFebruary 24, 2016

在日常开发的过程中,难免会用到form表单,我们需要获取表单的数据保存到数据库,或者拿到后台的一串json数据,要将数据绑定到form表单上,这里我写了一个基于jquery的,formHelp插件,使用起来也很简单:

获取表单的数据:$("#formid").serializeJson();

绑定数据到表单:$("#formid").setForm(json);

jquery.formHelp.js插件

/**
 * 将form里面的内容序列化成json
 * 相同的checkbox用分号拼接起来
 * @param {dom} 指定的选择器
 * @param {obj} 需要拼接在后面的json对象
 * @method serializeJson
 * */
$.fn.serializeJson=function(otherString){
  var serializeObj={},
    array=this.serializeArray();
  $(array).each(function(){
    if(serializeObj[this.name]){
      serializeObj[this.name]+=';'+this.value;
    }else{
      serializeObj[this.name]=this.value;
    }
  });

  if(otherString!=undefined){
    var otherArray = otherString.split(';');
    $(otherArray).each(function(){
      var otherSplitArray = this.split(':');
      serializeObj[otherSplitArray[0]]=otherSplitArray[1];
    });
  }
  return serializeObj;
};

/**
 * 将josn对象赋值给form
 * @param {dom} 指定的选择器
 * @param {obj} 需要给form赋值的json对象
 * @method serializeJson
 * */
$.fn.setForm = function(jsonValue){
  var obj = this;
  $.each(jsonValue,function(name,ival){
    var $oinput = obj.find("input[name="+name+"]");
    if($oinput.attr("type")=="checkbox"){
      if(ival !== null){
        var checkboxObj = $("[name="+name+"]");
        var checkArray = ival.split(";");
        for(var i=0;i<checkboxObj.length;i++){
          for(var j=0;j<checkArray.length;j++){
            if(checkboxObj[i].value == checkArray[j]){
              checkboxObj[i].click();
            }
          }
        }
      }
    }
    else if($oinput.attr("type")=="radio"){
      $oinput.each(function(){
        var radioObj = $("[name="+name+"]");
        for(var i=0;i<radioObj.length;i++){
          if(radioObj[i].value == ival){
            radioObj[i].click();
          }
        }
      });
    }
    else if($oinput.attr("type")=="textarea"){
      obj.find("[name="+name+"]").html(ival);
    }
    else{
      obj.find("[name="+name+"]").val(ival);
    }
  })
}

html测试代码

<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title>jQueryFormHelp练习</title>
  <script src="http://libs.baidu.com/jquery/2.0.0/jquery.js"></script>
  <script src="jquery.formHelp.js"></script>
  <script type="text/javascript">

  $(function () {
    $("#form").setForm({a: '张三家的附近可考虑将', b: '王五', c: '王五', d: 'nishi yaldjlkfjal ',e:7,f:'8;10',i:'王'});
  });
  function submitForm(){
    console.log($("#form").serializeJson('id:12;name:13;'));
  }
</script>
</head>

<body>
<form id="form">
  <div><input type="text" name="a" /></div>
  <div><input type="text" name="b" id="b" /></div>
  <div><input type="hidden" name="c" id="c" /></div>
  <div>
    <textarea name="d" rows="8" cols="40"></textarea>
    <input type="checkbox" name="f" value="10"/>
  </div>
  <div><select name="e">
    <option value="5" selected="selected">5</option>
    <option value="6">6</option>
    <option value="7">7</option>
  </select></div>
  <div>
    <input type="checkbox" name="f" value="8" />
    <input type="checkbox" name="f" value="9"/>
  </div>
  <div>
    <input name="i" type="radio" value="王" />王
    <input name="i" type="radio" value="小" />小
  </div>
  <div>
    <input type="button" name="g" value="Submit" id="g" onclick="submitForm()"/>
  </div>
</form>


</body>
</html>

以上就是jquery获取form表单内容以及绑定数据到form表单的全部内容,希望对大家的学习有所帮助。

Javascript 相关文章推荐
AJAX架构之Dojo篇
Apr 10 Javascript
JS链式调用的实现方法
Mar 07 Javascript
jquery中focus()函数实现当对象获得焦点后自动把光标移到内容最后
Sep 29 Javascript
Vue制作Todo List网页
Apr 26 Javascript
Vue.js常用指令之循环使用v-for指令教程
Jun 27 Javascript
vue中遇到的坑之变化检测问题(数组相关)
Oct 13 Javascript
js数组方法reduce经典用法代码分享
Jan 07 Javascript
Angular 5.x 学习笔记之Router(路由)应用
Apr 08 Javascript
vue通过v-html指令渲染的富文本无法修改样式的解决方案
May 20 Javascript
微信小程序自定义联系人弹窗
May 26 Javascript
解决vue与node模版引擎的渲染标记{{}}(双花括号)冲突问题
Sep 11 Javascript
ajax请求前端跨域问题原因及解决方案
Oct 16 Javascript
javascript cookie的简单应用
Feb 24 #Javascript
javascript的正则匹配方法学习
Feb 24 #Javascript
适用于javascript开发者的Processing.js入门教程
Feb 24 #Javascript
JavaScript设计模式经典之命令模式
Feb 24 #Javascript
JavaScript设计模式经典之工厂模式
Feb 24 #Javascript
JavaScript的设计模式经典之建造者模式
Feb 24 #Javascript
JavaScript的设计模式经典之代理模式
Feb 24 #Javascript
You might like
php表单提交问题的解决方法
2011/04/12 PHP
php笔记之:AOP的应用
2013/04/24 PHP
关于svn冲突的解决方法
2013/06/21 PHP
国产PHP开发框架myqee新手快速入门教程
2014/07/14 PHP
浅谈使用PHP开发微信支付的流程
2015/10/04 PHP
PHP如何通过表单直接提交大文件详解
2019/01/08 PHP
JavaScript实现快速排序(自已编写)
2012/12/19 Javascript
变量声明时命名与变量作为对象属性时命名的区别解析
2013/12/06 Javascript
jquery实现在页面加载的时自动为日期插件添加当前日期
2014/08/20 Javascript
详解JavaScript中的blink()方法的使用
2015/06/08 Javascript
js实现的早期滑动门菜单效果代码
2015/08/27 Javascript
Bootstrap每天必学之js插件
2015/11/30 Javascript
Javascript技术难点之apply,call与this之间的衔接
2015/12/04 Javascript
js获取Get值的方法
2016/09/29 Javascript
JS制作适用于手机和电脑的通知信息效果
2016/10/28 Javascript
Node.JS文件系统解析实例详解
2017/05/15 Javascript
vue上传图片组件编写代码
2017/07/26 Javascript
微信小程序 input表单与redio及下拉列表的使用实例
2017/09/20 Javascript
JavaScript函数节流和函数去抖知识点学习
2018/07/31 Javascript
Vue 自定义指令实现一键 Copy功能
2019/09/16 Javascript
jQuery+Ajax+js实现请求json格式数据并渲染到html页面操作示例
2020/06/02 jQuery
在vue中实现禁止屏幕滚动,禁止屏幕滑动
2020/07/22 Javascript
原生JS实现弹幕效果的简单操作指南
2020/11/10 Javascript
[52:03]DOTA2-DPC中国联赛 正赛 Ehome vs iG BO3 第三场 1月31日
2021/03/11 DOTA
python实现文件路径和url相互转换的方法
2015/07/06 Python
Python模拟百度自动输入搜索功能的实例
2019/02/14 Python
Python后台开发Django会话控制的实现
2019/04/15 Python
opencv导入头文件时报错#include的解决方法
2019/07/31 Python
python解释器spython使用及原理解析
2019/08/24 Python
python opencv把一张图片嵌入(叠加)到另一张图片上的实现代码
2020/06/11 Python
瑞典廉价机票预订网站:Seat24
2018/06/19 全球购物
Java 中访问数据库的步骤?Statement 和PreparedStatement 之间的区别?
2012/06/05 面试题
物理教学随笔感言
2014/02/22 职场文书
公司请假条格式
2014/04/11 职场文书
2019朋友新婚祝福语精选
2019/10/10 职场文书
vue打包时去掉所有的console.log
2022/04/10 Vue.js