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

前端技术 2023/09/07 JavaScript

在日常开发的过程中，难免会用到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表单的全部内容，希望对大家的学习有所帮助。

本文地址：https://www.stayed.cn/item/18108

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案