• ベストアンサー
  • すぐに回答を!

jquery.cookie.jsの使い方が分かりません。

jquery.cookie.jsの使い方が分かりません。 Web経験浅く、質問の仕方や内容に不足や不備があるかもしれませんが、ご容赦ください。 入力フォームでcookie.jsを使いたいのですが、どのようにスクリプトを書けばよいのか分かりません。 単純に、入力フォームに入力したデータを保存したいだけなのですが・・・。 いろいろ調べてみたいのですが、分かりやすいソースサンプルを見つけることが出来ず、困っております。 どなたか教えて下さいませんでしょうか? ちなみに、ソースサンプルは以下の通りです。 ------------------------------------------------------------------ <html> <head> <title>テスト</title> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="jquery.cookie.js"></script> <script type="text/javascript"> ????????????ここのスクリプトをどうしたらよいのか分かりません。 </script> </head> <body onload="getck()"> <form name="input">   性別:<input type="radio" name="sex" value="男性" />男性/      <input type="radio" name="sex" value="女性" />女性<br />   名前:<input type="text" name="name" /><br />   住所:<input type="text" name="add" /><br />   <input type="button" value="記録" onClick="setck()" /><br />   <input type="button" value="呼び出し" onClick="getck()" /><br /> </form> </body> </html> ------------------------------------------------------------------ 上記ソースではボタンクリックで呼び出しとしていますが、実際には、入力したフォームのページ(入力ページ1)とは別のフォームページ(入力ページ2)で、入力データを再利用する作りとなります。 要するに、入力ページ2を呼び出すと、入力ページ1で入力したデータが入力されている、という状態を求めております。 なので、<body onload="getck()">としてあります。 (テストも兼ねたサンプルソースなので、1ファイルで全てチェックできるようにしています) 説明が分かりにくいところもあるかと存じますが、何とぞご教示いただけますよう、宜しくお願い申し上げます。

共感・応援の気持ちを伝えよう!

  • 回答数3
  • 閲覧数1523
  • ありがとう数13

質問者が選んだベストアンサー

  • ベストアンサー
  • 回答No.3
  • fujillin
  • ベストアンサー率61% (1594/2576)

#1です。 >どのように取得して、どのように呼び出したらいいか >アドバイスいただけませんでしょうか アドバイスできるような柄ではありませんが… ラジオボタンのチェックの状況はその要素のchecked属性で取得/設定が可能です。 単純に各要素の設定状況(true falese false…)みたいなのを記録しておくか、どうせ選択されるものは一つだけ(または0個)なので、その番号を記録しておくなどすれば再現が可能だと思われます。 ごく簡単な取得/設定の例を作成してみました。 取得は、選択されたものの順番と各設定状況を、設定は番号によってセットする例です。 簡単な入力チェックなども入っているので、実際にはもっと短くまとめられるはずです。 (全角空白は半角にしてください) <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <html lang="ja"> <head><title>test</title> <meta http-equiv="Content-Script-Type" content="text/javascript"> <script type="text/javascript"> <!-- function get() { var elm = document.getElementById("form1").elements; var i=0, e, c=0, result = ""; while (e=elm[i++]) {  if (e.type == "radio") {   result += (result?", ":"") + e.checked;   c++;   if (e.checked) result = "No" + c + " : " + result;  } } document.getElementById("text1").value = result; } function set() { var n = document.getElementById("text2").value; var elm = document.getElementById("form1").elements; var i, c=0; if (isNaN(n = parseInt(n))) {  alert("数字を入力"); return; } for (i=0; i<elm.length; i++) {  if (elm[i].type == "radio") {   if ((++c) == n) elm[i].checked = true;  } } } //--> </script> </head> <body> <form id="form1"> <input type="radio" name="test">ラジオ1 <input type="radio" name="test">ラジオ2 <input type="radio" name="test">ラジオ3 <form> <hr> <p> <input id="text1" type="text" value="" style="width:12em;"> <input type="button" value="選択ボタンを表示" onclick="get()"><br> <input id="text2" type="text" value=""> <input type="button" value="番号によりラジオボタンをセット" onclick="set()"> </p> </body> </html>

共感・感謝の気持ちを伝えよう!

質問者からのお礼

ご親切にありがとうございます! 早速試してみます。 大変勉強になります。

その他の回答 (2)

  • 回答No.2
  • yyr446
  • ベストアンサー率65% (870/1330)

「jquery.cookie.js」の方じゃなく「jquery.ooCookie.js」 http://www.bsped.com/jquery.ooCookie.js の方を使って、簡単に作ってみました。 <form name="input">   性別:<input type="radio" name="sex" value="男性" />男性/      <input type="radio" name="sex" value="女性" />女性<br />   名前:<input type="text" name="name" /><br />   住所:<input type="text" name="add" /><br />   <input type="button" value="記録" onClick="setck(this.form)" /><br />   <input type="button" value="呼び出し" onClick="getck(this.form)" /><br /> </form> に対して、 <script type="text/javascript"> function setck(f){  var c = new $.cookie();  c.data=$(f).serialize();  c.set(); } function getck(f){  var c = new $.cookie();  c.get();  var datas=decodeURIComponent(c.data).split("&");  for(var i=0;i<datas.length;i++){   var data=datas[i].split("=");   for(var j=0;j<f.length;j++){    if(f[j].type=="radio" && f[j].name==data[0] && f[j].value==data[1])    f[j].checked=true;    else    if(f[j].type=="text" && f[j].name==data[0])     f[j].value=data[1];   }  } } </script> ※行頭の全角空白文字は、半角空白に変えて下さい。

共感・感謝の気持ちを伝えよう!

  • 回答No.1
  • fujillin
  • ベストアンサー率61% (1594/2576)

確認してませんが… プラグインのサンプルコードをご覧になれば使用法はわかるかと http://plugins.jquery.com/project/Cookie http://stilbuero.de/jquery/cookie/ 要は  $.cookie(key, data, { expires : day });  で書き込み  $.cookie(key);  で読み出しみたいな感じ ◇日本語での解説サイト http://mysketch.jp/blog/2008/10/javascriptjquerycookie.php ◇jQuery Cookieライブラリ] クッキーのデータを保存する/読み出す http://www.openspc2.org/reibun/javascript2/Library/jquery-cookie/0001/ http://www.openspc2.org/reibun/javascript2/Library/jquery-cookie/0002/

共感・感謝の気持ちを伝えよう!

質問者からの補足

ご回答ありがとうございます!!(御礼が遅くなりもうしわけありません) 教えていただいたサイトを参考に、がんばって試してみたところ、テキストボックスのデータのやりとりはうまくいくようになりました。うれしいです。 ただ、残念ながら、ラジオボタンの部分がうまくできません・・・。 よろしければ、どのように取得して、どのように呼び出したらいいかアドバイスいただけませんでしょうか・・・? ぜひともよろしくお願いします。

関連するQ&A

  • jQueryでcookie 追加書き込み

    jQueryでcookieに追加書き込みをしたいのですが、どうやってもわかりません。 ここからクッキを追加書き込みを実現したいのですが、 どうやっても頭が回らず困って、混乱気味になっています。 誰か助けてください! おねがいいたします! <!DOCTYPE html> <html lang="jp"> <head> <meta charset="utf-8"> <script type="text/javascript" src="http://www.google.com/jsapi"></script> <script type="text/javascript">google.load("jquery", "1.7.1");</script> <script type="text/javascript" src="jquery.cookie.js"></script> <script type="text/javascript"> //入力された値をCookieに保持する function cookie(){ $.cookie("cookie", $("#cookieValue").val()); $("#result").html($.cookie("cookie")); } //現在のCookieの値を出力 $(function() { $("#result").html($.cookie("cookie")); }); </script> <title></title> </head> <body> <input id="cookieValue" type="input"> <a href="index.html" onclick="cookie()">クッキー</a> <p><span id="result"></span></p> </body> </html>

  • jquery.validate.jsについて

    jqueryで入力チェックを行うプログラムを実装したく、「jquery.validate.js」を利用したいと思っているのですが、inputのnameが配列の場合、うまく動作しません。 ご存知の方、いらっしゃいましたら、ご教授いただけると幸いです。 以下に動作しないコードを貼り付けます。 尚、下記コードで「[]」を取り除いて実行すると正常に動作するため、nameに配列を指定するのが問題であると考えています。 どなたか、よろしくお願いいたします。 <form method="post" id="check_form1"> 名前 <input name="name[]" type="text" id="name"> メール <input name="mail[]" type="text" id="mail"> <input type="submit" name="Submit" value="Submit"/> </form> <!-- 入力チェック --> <script type="text/javascript" src="js/jquery.validate.js"></script> <script type="text/javascript"> $(function(){ $("#check_form1").validate({ rules: { name[] :{ required: true }, mail[] :{ required: true, email: true } }, messages: { name[] :{ required: "お名前を入力してください" }, mail[] :{ required: "メールアドレスを入力してください", email: "正しいメールアドレスを入力してください" } } }); }) </script>

  • シャドウボックスとjQueryを共存させるには

    シャドウボックス3.0.3を利用しています。 チェックボックスを複数選択するjQueryをシャドウボックス内で利用したいのですが、 シャドウボックスとjQueryがコンフリクトしてしまうようで、実現できません。 共存させるにはどのように記述を変えれば良いでしょうか? <head> <script type="text/javascript" src="../common/js/jquery-1.3.1.min.js"></script> <!-- シャドウボックス --> <script type="text/javascript" src="../common/js/shadowbox/shadowbox.js"></script> <link rel="stylesheet" type="text/css" href="../common/js/shadowbox/shadowbox.css"> <script type="text/javascript"> $(document).ready(function(){ Shadowbox.init(); }); </script> <!-- チェックボックスの複数選択 --> <script type="text/javascript"> $(function(){ $("#toggle").click(function(){ $('.chkbox').attr('checked', $(this).attr('checked')); }); }); </script> </head> <body> <a href="#inline" title="シャドウボックス" rel="shadowbox;width=900;height=1200">シャドウボックス</a> <div id="inline" style="display:none"> <input type="checkbox" id="toggle"> toggle<br> <br> <input class="chkbox" type="checkbox" name="ids[]" value="1"> 1<br> <input class="chkbox" type="checkbox" name="ids[]" value="2"> 2<br> <input class="chkbox" type="checkbox" name="ids[]" value="3"> 3<br> </div> </body>

  • jQuery 変数の使い方について

    jQuery 変数の使い方について 【やりたいこと】 ラジオボタンが複数ある為現在のアクションをまとめたい。 ■ $("input:radio[name='radio01']:checked").val(); の'radio01'の部分に変数を使いたい。 ■document.forms["MON"].hradio02.value の"MON"のフォーム名と、「hradio02」name部分に変数を使いたい。 http://kaicoo.blogspot.jp/2012/03/query_30.html 等を参考に元のソースから JSをまとめてみましたが、うまくいきません。 jQuery内の変数の記述方法を 教えていただけませんでしょうか? よろしくお願いいたします。 ★JSをまとめたサンプルソース <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <META http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <META http-equiv="Content-Style-Type" content="text/css"> <script src="jquery.js"></script> <script type="text/javascript" language="JavaScript"> <!-- function setVal(obj) { var formname = obj.form.name; var radioname = obj.getAttribute('name'); alert(formname); alert(radioname); //選択したラジオのvalueをhiddenに格納する document.forms[formname].h '+ radioname +' .value = $("input:radio[name='+ radioname +']:checked").val(); alert(document.forms[formname].h '+ radioname +'.value); } //--> </script> </head> <body> <table border="1"> <FORM name="MON"> <tr> <td> 結果: </td> <td> <input type="radio" name="radio01" value="良好" onClick="setVal(this);" >良好 <input type="radio" name="radio01" value="不良" onClick="setVal(this);"> 不良 <input type="hidden" name="hradio01" value="未入力です。"> </td> </tr> <tr> <td> 結果2: </td> <td> <input type="radio" name="radio02" value="良好" onClick="setVal(this);" >良好 <input type="radio" name="radio02" value="不良" onClick="setVal(this);"> 不良 <input type="hidden" name="hradio02" value="未入力です。"> </td> </tr> </table> </Form> </body> </html> ★元のソースのサンプル <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <META http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <META http-equiv="Content-Style-Type" content="text/css"> <script src="jquery.js"></script> <script type="text/javascript" language="JavaScript"> <!-- function setVal_01(obj) { document.forms["MON"].hradio01.value = $("input:radio[name='radio01']:checked").val(); alert(document.forms["MON"].hradio01.value); } //--> </script> <script type="text/javascript" language="JavaScript"> <!-- function setVal_02(obj) { document.forms["MON"].hradio02.value = $("input:radio[name='radio02']:checked").val(); alert(document.forms["MON"].hradio02.value); } //--> </script> </head> <body> <table border="1"> <FORM name="MON"> <tr><td> 結果: </td> <td><input type="radio" name="radio01" value="良好" onClick="setVal_01(this);" >良好 <input type="radio" name="radio01" value="不良" onClick="setVal_01(this);"> 不良 <input type="hidden" name="hradio01" value="未入力です。"> </td> </tr> <tr> <td> 結果2: </td> <td> <input type="radio" name="radio02" value="良好" onClick="setVal_02(this);" >良好 <input type="radio" name="radio02" value="不良" onClick="setVal_02(this);"> 不良 <input type="hidden" name="hradio02" value="未入力です。"> </td> </tr> </table> </Form> </body> </html>

  • jQueryを使ってスタイルの変更

    ----- 実現したいこと ----------------------------- 以下をjQueryを使って実現したいです。 ・「名前」のうちどれか1つが選択されたら  「名前」の背景を白くする。(「名前」ulタグのbackground-colorを#ffffffへ) ・「季節」のうちどれか1つが選択されたら  「季節」の背景を白くする。(「季節」ulタグのbackground-colorを#ffffffへ) 方針だけでもご教授いただければ幸いでございます。 ----- ソース ------------------------------------- <html> <head> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> </script> </head> <body> □名前<br> <ul style="background-color:#ff0000;"> <input type="checkbox" value="1">一郎<br> <input type="checkbox" value="2">二郎<br> <input type="checkbox" value="3">三郎 </ul> <br> <br> <br> □季節<br> <ul style="background-color:#ff0000;"> <input type="checkbox" value="1">春<br> <input type="checkbox" value="2">夏<br> <input type="checkbox" value="2">秋<br> <input type="checkbox" value="2">冬 </ul> </body> </html>

  • Jquery と JqueryUIについて

    現在、Jquery と JqueryUIを使ってプログラムを書いています。上手く動作しないので以下について教えてください。 やりたいことは、ボタンを押すと文字があらわれたり消えたりするという動作を実現したいと思っていますが、今は、ボタンと文字が表示されるのみで、ボタンを押しても全く動きません。 現在書いているコードは以下のとおりです。 ---- <html> <head> <script type="text/javascript" src="js/jquery-1.7.1.min.js"></script> <script type="text/javascript" src="js/jquery-ui-1.8.17.custom.min.js"></script> <script> $(function() { $('#button').click(function(){ $('#sample-text').show(); }); }); </script> </head> <body> <input type="button" id="button" value="ボタン"> <p id="sample-text">Hello World!</p> </body> </html> ------------------- Jqueryのバージョンは、最初、UIとの互換性を考え、1.3.2を使っていましたが、動かないため、現在は新しいバージョンで試してみたところです。(1.4.4でもだめでした) JSファイルの場所は、上記htmlファイルと同じ階層のjsディレクトリ内です。 また、補足ですが、これが上手くいけば、script内の show メソッドのかわりに toggleを使いたいと考えています。 上記コードで間違っている部分がわかる方がいらっしゃいましたら教えてください。 よろしくお願いいたします。

    • ベストアンサー
    • AJAX
  • jQueryのタブにスクロールバーをつけたい

    jQueryのタブにスクロールバーをつけたい jQueryの「ui.tabs.js」を使ってタブを制作し、「jquery.cookie.js」でタブの内容を記憶し。 さらに、そのタブの中身が設定した枠を超えると「jScrollPane.js」を使って横にスクロールバーがでるようにしたいのですがうまくいきません。 <script src="./js/jquery-1.2.6.js" type="text/javascript"></script> <script src="./js/jquery.cookie.js" type="text/javascript"></script> <script src="./js/ui.core.js" type="text/javascript"></script> <script src="./js/ui.tabs.js" type="text/javascript"></script> <script src="./js/jScrollPane.js" type="text/javascript"></script> <script src="./js/jquery.mousewheel.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function() { $('#container1 > ul').tabs({ event: 'click' ,cookie: { expires: 30 } , cache: true}); $('#fra_sl').jScrollPane({scrollbarWidth:13, scrollbarMargin:9}); }); </script> <body> <div id="container1"> <ul> <li id="tab1"><a href="#tab_categry">タブ1</a></li> <li id="tab2"><a href="#tab_all">タブ2</a></li> </ul> <div id="pane1"> <div id="tab_categry"> <p>中身1(省略)</p> </div> <div id="tab_all"> <p>中身2(省略)</p> </div> </div> </div> </body> 以前同じような質問をされていた方がいたのでそちらも参考にして試してみたのですが→http://okwave.jp/qa/q4819862.html javascriptは初心者なものでよくわかりませんでしたorz どなたかわかる方がいましたら教えてもらえないでしょうか??

  • jQueryについて質問です。

    jQueryについて質問です。 複数のプラグインを一つのページに組み込み同時に使いたいのですが、 それぞれが干渉しているのかどれか一つしか使えません。 http://solidstate.jp/Navigation/treeMenu/script_54.html http://solidstate.jp/ContentsDisplay/accordion/script_130.html http://solidstate.jp/Navigation/houseOfCake/script_172.html こちらに紹介されている記事を参考に <script type="text/javascript" src="jquery-1.3.2.min.js"></script> <script type="text/javascript" src="jquery.navigmenu.js"></script> <script type="text/javascript"> $(function(){ $('#menu').navigmenu(); }); </script> <script type="text/javascript" src="accordian.pack.js"></script> <script type="text/javascript"> window.onload = function() { new Accordian('basic-accordian',5,'header_highlight'); } </script> <script src="lib/jquery.js" type="text/javascript"></script> <script src="lib/jquery.cookie.js" type="text/javascript"></script> <script src="jquery.treeview.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function(){ $("#filetree").treeview({//ターゲットとなる要素に付加するID animated: "fast", //アニメーション設定(削除するとアニメ無し) collapsed: true, //開閉設定(削除するとロード時にメニューを全開) unique: true, //動作設定(削除すると自動的に閉じなくなる) persist: "cookie", //Cookie }); }); </script> このような記述を行いました。 ですが、動くのはひとつだけです。 これらを同時に動かすにはどうすればよいでしょうか? 優先順位は上からです。

  • jqueryにて

    こちらではお初にお世話になります。 よろしくおねがいします! さて、jqueryを用いてScrollFollowを実装中なのですが、 正常に動作させることが出来ません。 ソースは <script type="text/javascript" src="./jslib/ui.core.js"></script> <script type="text/javascript" src="./jslib/jquery-1.2.6.js"></script> <script type="text/javascript" src="./jslib/jquery.scrollfollow.js"></script> <script type="text/javascript" src="./jslib/jquery.easing.1.3.js"></script> <script type="text/javascript" src="./jslib/jquery.cookie.js"></script> <script type="text/javascript"> $( document ).ready( function (){ $('test').scrollFollow({ }); }); </script> をヘッド部分に、 <div id="test"> コンテンツ </div> をBODYに記述しています。 動作せずにFirefoxのエラーコンソールで確認したところ エラー: jQuery is not defined ソースファイル: (省略)update/jslib/ui.core.js 行: 238 エラー: $("test").scrollFollow is not a function ソースファイル: http://contest2009.thinkquest.jp/tqj2009/110392/update/ 行: 13 と表示されました。jsファイルの生存は確認できており、 その系統のミスではないと思うのですが。。。 どなたかアドバイスをお願いします!

  • jQuery-datepicker on IE8

    以下のような非常にシンプルなHTMLでjqueryのdatepicker()を使用しています。 他のブラウザでは問題なく動作するのですが、IE8でのみ、カレンダーは表示されるものの、 日付を選択してもカレンダーが閉じず、テキストボックスにも選択日付が設定されません。 どなたか解決方法をご存知の方、教えてください。 以下にHTMLソースと、テスト用に設置してあるURLを記載します。 よろしくお願いします。 http://apps.spiral-software.com/test/datepicker.html <html> <head> <title>datepicker</title> <link rel="stylesheet" href="jquery-ui.css" type="text/css" /> <script type="text/javascript" src="jquery-1.5.1.min.js"></script> <script type="text/javascript" src="jquery-ui-1.8.11.min.js"></script> <script type="text/javascript"> $(function () { $("#incidentDateId").datepicker({ dateFormat: "yy/mm/dd" }); }); </script> </head> <body> <form> <input id="incidentDateId" name="incidentDateName" type="text" value="" /> </form> </body> </html>