JavaScript + Ajax 実践サンプル集 - 入力したデータをクッキーに保存する

入力したデータをクッキーに保存する　《プログラマーがネットで副収入を得る方法とは》

説明補足説明コード分割コード関連書籍コメント投稿

このサンプルは、jQueryのpin()プラグインを利用してフォームから入力／選択した情報をクッキーに保存して復元します。サンプルの「Field1」と「Field3」の右側にピンが表示されています。データを入力／選択した後にピンをオンにするとそのデータがクッキーに保存されます。次回、このフォームを表示したときピンをオンにしたデータが復元されます。

このサンプルを編集して試してみる

$('#field1').pin();

<input type="text" name="field1" value="" id="field1">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>jQuery - Pin </title>

$(function() {

$('#field1').pin();
      $('#field3').pin();
   
    });
  </script>

</head>
<body id="pin">

<form id="myform" method="post" action="">
		Field 1 : 
		<input type="text" name="field1" value="" id="field1"><br />
		Field 2 : 
		<input type="text" name="field2" value="" id="field2"><br />
		Field 3 : 
		<select id="field3">
      <option value="1">Option 1</option>
      <option value="2">Option 2</option>
      <option value="3">Option 3</option>
      <option value="4">Option 4</option>
    </select><br />
	</form>
  
</body>
</html>

HEAD部BODY部

ボックス内のコードをHTMLドキュメントの<HEAD>セクションにコピー＆ペーストしてください。

            
  <script src="jQuery/jquery-1.2.6.js" type="text/javascript"></script>
  <script src="jQuery/pin/jquery.cookie.js" type="text/javascript"></script>
  <script src="jQuery/pin/jquery.pin.js" type="text/javascript"></script>
  
  <script type="text/javascript">

    $(function() {

      $('#field1').pin();
      $('#field3').pin();
   
    });
  </script>

コメント・提案の投稿！

名前
メール
件名
本文

JavaScript + Ajax 実践サンプル集 (1276本以上)　◇編集して実行可能◇

jQueryを使い倒せ!　jQueryでAjaxを実装するための基礎知識と実践サンプルを一挙公開中... powered by asp.net 3.5

入力したデータをクッキーに保存する　《プログラマーがネットで副収入を得る方法とは》

JavaScript + Ajax 実践サンプル集 (1276本以上) ◇編集して実行可能◇

jQueryを使い倒せ! jQueryでAjaxを実装するための基礎知識と実践サンプルを一挙公開中... powered by asp.net 3.5

入力したデータをクッキーに保存する 《プログラマーがネットで副収入を得る方法とは》

JavaScript + Ajax 実践サンプル集 (1276本以上)　◇編集して実行可能◇

jQueryを使い倒せ!　jQueryでAjaxを実装するための基礎知識と実践サンプルを一挙公開中... powered by asp.net 3.5

入力したデータをクッキーに保存する　《プログラマーがネットで副収入を得る方法とは》