フォームの内容をJSON形式で取得「JSON Form」
当ページのリンクには広告が含まれています。
スポンサーリンク
フォームの内容をJSON形式で取得するプラグイン「JSON Form」を紹介します。
jQueryプラグイン「JSON Form」
このプラグインを使えば、フォームに入力されたテキストや数字……などをJSON（ジェイソン、JavaScript Object Notation）形式で取得することができます。
また、JSON形式のデータをHTMLフォームに反映することもできます。
スポンサーリンク
それではデモページをご覧ください。
デモのソース（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>
スポンサーリンク