Rumah > hujung hadapan web > tutorial js > borang borang jquery mendapatkan kandungan dan mengikat kemahiran data_javascript

borang borang jquery mendapatkan kandungan dan mengikat kemahiran data_javascript

WBOY
Lepaskan: 2016-05-16 15:13:42
asal
1840 orang telah melayarinya

Dalam proses pembangunan harian, tidak dapat dielakkan untuk menggunakan borang borang. Kami perlu mendapatkan data borang dan menyimpannya ke pangkalan data, atau mendapatkan rentetan data json di latar belakang borang, di sini saya menulis saya mempunyai pemalam formHelp berdasarkan jquery, yang sangat mudah digunakan:

Dapatkan data borang: $("#formid").serializeJson();

Ikat data pada borang: $("#formid").setForm(json);

pemalam 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);
    }
  })
}

Salin selepas log masuk

kod ujian 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>
Salin selepas log masuk

Di atas adalah keseluruhan kandungan jquery untuk mendapatkan kandungan borang borang dan mengikat data ke borang borang saya harap ia akan membantu pembelajaran semua orang.

sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan