フォームの内容をJSON形式で取得「JSON Form」

当ページのリンクには広告が含まれています。

jQuery Plugin » フォーム » フォームの内容をJSON形式で取得「JSON Form」

フォームの内容をJSON形式で取得するプラグイン「JSON Form」を紹介します。

jQueryプラグイン「JSON Form」

このプラグインを使えば、フォームに入力されたテキストや数字……などをJSON（ジェイソン、JavaScript Object Notation）形式で取得することができます。

また、JSON形式のデータをHTMLフォームに反映することもできます。

それではデモページをご覧ください。

「JSON Form」のデモ

デモのソース（HTML + jQuery）

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="description" content="JSON Form のデモでーす。">
<title>JSON Form - jQueryプラグイン</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="js/jquery.jsForm.js"></script>
<script>
$(function(){
  // some json data
  var jsonData = {
    name: "お名前",
    age: 20,
    hobby: [{description:'食べ歩き'},{description:'散歩'},{description:'寝る'}]
//    links: [{href:'http://www.gargan.org',description:'Gargan.org'},{href:'http://www.github.com',description:'GitHub'}]
  };
  $("#demo").jsForm({
    data:jsonData
  });
  $("#show").click(function() {
    alert(JSON.stringify($("#demo").jsForm("get"), null, " "));
  });
});
</script>
</head>
<body>
<h1>JSON Form のデモです。</h1>
<div id="demo">
<p>お名前: <input name="data.name"/></p>
<p>年齢: <input name="data.age" class="number"/></p>
<fieldset>
  <legend>趣味</legend>
  <ul class="collection" data-field="data.hobby">
    <li><input name="hobby.description"/>
  </ul>
</fieldset>
</div>
<button id="show">クリック！クリック！</button>
</body>
</html>

jQueryプラグイン「JSON Form」

デモのソース（HTML + jQuery）

関連記事（一部広告含む）