今日の人気記事

  1. バーチャルキーボードを実装「Keyboard」
  2. Tableカラム(列)にソート機能を追加「Tablesorter」
  3. 簡単にドロップダウンメニューがつくれる「Superfish」
  4. 動画のポップアップLightbox「Video Lightning」
  5. 日付と時間の入力を補助する「DateTimePicker」

フォームの内容を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>
スポンサーリンク

関連記事(一部広告含む)