有学有练才叫学习:学而不思则罔,思而不学则殆:学而不习,纸上谈兵,习而不进,画地为牢!

jQuery自定义插件之获取form表单数据

javascript cat 3个月前 (07-06) 104次浏览 已收录 0个评论 扫描二维码

效果插件源码

 /*
 * @Author: daoyan 
 * @Date: 2020-07-09 16:46:11 
 * @Last Modified by:   daoyan 
 * @Last Modified time: 2021-07-09 16:46:11 
 */
;(function(window,$,undefined){

  $.fn.extend({
    /**
     * 获取表单数据
     * 可通过设置相同发class名称,使用此封装方法,批量获取form表单里面的值
     * 表单元素必须要有name属性,name属性是向后端提交的字段数据。
     * @param {object} option  可选参数,暂无使用
     */
    'getparameter': function(option){
      var defaults = {
          },
          result = {}, //返回结果对象形式
          opts = $.extend({}, defaults, option);

      this.each(function (index, item) {

        var getparameter = {
          $el: $(this), //当前循环对象
          $item: item, //当前循环对象
          defaults: defaults,      //插件默认值
          result: result,
          // 初始化
          'init': function(){
            // 调用判断类型方法
            this.itemType();

          },
          // 判断类型
          'itemType':function(){
            var _this = this;
            switch (this.$el[0].type) {
              case 'text':
              case 'password':
              case 'select-one':
              case 'tel':
              case 'search':
              case 'range':
              case 'number':
              case 'month':
              case 'email':
              case 'datetime-local':
              case 'datetime':
              case 'date':
              case 'color':
                _this.result[_this.$el.attr('name')] = $.trim(_this.$el.val());
                break;
              case 'checkbox':
                // 获取到复选框选中的元素
                var checkboxEl=$("input[name="+_this.$el.attr('name')+"]:checked");
                if(checkboxEl){
                    var checkboxArr=[];
                    var strVal = '';
                    // 取出复选框选中的值
                    checkboxEl.each(function(idx,itm){
                      checkboxArr.push($(itm).val());
                    });
                    _this.result[_this.$el.attr('name')] = checkboxArr.join(',');
                }
                break;
              case 'radio':
                // 获取到单选框选中的值,碰到radio直接获取val即可
                var radio_val=$("input[name="+_this.$el.attr('name')+"]:checked").val();
                if(radio_val){
                  _this.result[_this.$el.attr('name')] = radio_val;
                }
                break;
              default:
                break;
            }
          }
        };
        // 初始化插件
        getparameter.init();
      });

      return result;
    }
  });
})(window,jQuery);

案例html布局

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>导演 - 炮渣日记</title>
<style>
  *{
    margin: 0;
    padding: 0;
  }
  div{
    float: left;
  }
  label{
    display: block;
  }
</style>
<script src="./js/jquery-1.8.3.min.js"></script>
<script src="./js/jquery.getparameter.js"></script>
</head>
<body>
  <h3>下拉框</h3>
    <select name="sel" id="sel" class="query">
        <option value ="sel-1">sel-1</option>
        <option value ="sel-2">sel-2</option>
    </select>
    <h3>输入框</h3>
    <input type="text" name="text1"  class="query" value="  hello  " />
    <input type="text" name="text2"  class="query" value="  word  " />
    <h3>密码框</h3>
    <input type="password" name="password" class="query" value="  123456  " />
    <h3>单选框</h3>
    单选1<input type="radio" name="radio" class="query" value="r1" />
    单选2<input type="radio" name="radio" class="query" value="r2"  checked/>
    单选3<input type="radio" name="radio" class="query" value="r3" />
     <h3>复选框</h3>
    复选框1<input type="checkbox" name="check" id="" class="query" value="c1" checked/>
    复选框2<input type="checkbox" name="check" id="" class="query" value="c2"  />
    复选框3<input type="checkbox" name="check" id="" class="query" value="c3"  checked/>
    <h3>search</h3>
    <input type="range" name="range" id="" class="query" value="" />
    <input type="color" name="color" id="" class="query" value="" />
    <h3>
        <button type="button" id="save">
            提交
        </button>
    </h3>
</body>
<script>
$(function () {

  // 调用方法
  $("#save").click(function(){

    var parameter=$(".query").getparameter();
    console.log(111,parameter); 
 });
});
</script>
</html>

插件使用方法

在页面中引入jquery和jquery.getparameter.js文件(根据项目目录引入必要文件)。

<script src="./js/jquery-1.11.3.min.js"></script>
<script src="./js/jquery.getparameter.js"></script>

HTML结构

没有特殊结构,可以获取到元素即可。
初始化插件

在页面DOM元素加载完毕之后,通过getparameter()方法来初始化该插件。

$(function(){
  // 调用方法
  $("#save").click(function(){
    var parameter=$(".query").getparameter();
    console.log(parameter); 
 });
});
喜欢 (0)
cat
关于作者:
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址