人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

【クッキーとjavascript】クッキーに保存されている診断結果(color=red,blue,whiteもしくは値なし)があります。ユーザがフォームを送信するときにこの結果を<input type='hidden' name='color' value='XXXX'>として渡すjavascriptを教えてください。undefinedのときには空にしたいです。

●質問者: capsuleq
●カテゴリ:コンピュータ ウェブ制作
✍キーワード:Blue COLOR JavaScript RED クッキー
○ 状態 :終了
└ 回答数 : 5/5件

▽最新の回答へ

1 ● ko8820
●23ポイント

http://www.sasaraan.net/program/js/jscookie.html#read

上記のようにJavascriptでクッキーの値を読み込んで、

document.writeでXXXXXの部分に出力すればよいです。


2 ● Cherenkov
●23ポイント

クッキーの名前を被りにくいものに替えた方がいいかも。

window.onload = function(){
 var color = /color=(\w+);/.exec(document.cookie) || "";
 document.getElementsByName('color')[0].value = color[1];
}

3 ● ホーエンハイム
●22ポイント ベストアンサー

こんな感じでいかがでしょう。

<html>
<head>
<script type="text/javascript">
<!--
function getCookie(key) {
 tmp = document.cookie + ";";
 tmp1 = tmp.indexOf(key, 0);
 if (tmp1 != -1) {
 tmp = tmp.substring(tmp1, tmp.length);
 start = tmp.indexOf("=", 0);
 end = tmp.indexOf(";", start);
 return (unescape(tmp.substring(start + 1, end)));
 }
 return("undefined");
}

function init() {
 str = getCookie("color");
 document.hoge.color.value = str;
}
//-->
</script>
</head>

<body onLoad="init()">
<form name="hoge">
<input type="hidden" name="color" />
</form>
</body>
</html>

4 ● kebo987654
●22ポイント

予めtype=hiddenのinput要素を用意しておいてsubmit時にvalueを変更するのが手っ取り早いでしょう。

クッキーの取得はjquery.cookie.jsを利用すると簡単にできます。

jQuery、jquery.cookie.jsを下記リンクからDLしてください。

[jQuery]

jQuery: » jQuery 1.4.2 Released

[jquery.cookie.js]

Plugins | jQuery Plugins

<!-- 実装例 //-->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja">
<head>
<meta http-equiv="content-type" content="text/html; charset=Shift_JIS">
<meta http-equiv="content-script-type" content="text/javascript">
<meta http-equiv="content-style-type" content="text/css">
<title>- test -</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.cookie.js"></script>
<script type="text/javascript"><!--
function OnSubmit( form )
{
// クッキーからデータを取得(なかった場合は空文字に)
var data = $.cookie( "color" ) || "";
// データをセット
form.color.setAttribute( "value", data );
}
//--></script>
</head>
<body>
<form action="http://example.com/" onsubmit="OnSubmit( this );">
<input type="submit" value="submit">
<input type="hidden" name="color" value="">
</form>
</body>
</html>

color以外にも複数データを扱いたい場合はこの方法だと面倒なので、動的にinput要素を追加するのもありだと思います。

(IE8, Firefox3.6, Opera9.6で動作確認)

<!-- 実装例 //-->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja">
<head>
<meta http-equiv="content-type" content="text/html; charset=Shift_JIS">
<meta http-equiv="content-script-type" content="text/javascript">
<meta http-equiv="content-style-type" content="text/css">
<title>- test -</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.cookie.js"></script>
<script type="text/javascript"><!--
function OnSubmit( form )
{
setData( form, "color1" );
setData( form, "color2" );
}
function setData( form, name )
{
// クッキーからデータを取得(なかった場合は空文字に)
var data = $.cookie( name ) || "";

// input要素を作成
var input;
if( document.all )
{
// ブラウザがIEのとき
input = document.createElement( '<input name="' + name + '">' ); // IEは動的にname属性を変更できないので要素生成時にname属性を指定します。
}
else
{
input = document.createElement( "input" );
input.setAttribute( "name", name );
}
input.setAttribute( "type", "hidden" );
input.setAttribute( "value", data );

// input要素を追加
form.appendChild( input );
}
//--></script>
</head>
<body>
<form action="http://example.com/" onsubmit="OnSubmit( this );">
<input type="submit" value="submit">
</form>
</body>
</html>

5 ● ホーエンハイム
●10ポイント

No.3の回答ですが、「undefinedのときには空にしたいです」というご要望を見落としていました。以下のように訂正します。

<html>
<head>
<script type="text/javascript">
<!--
function getCookie(key) {
 tmp = document.cookie + ";";
 tmp1 = tmp.indexOf(key, 0);
 if (tmp1 != -1) {
 tmp = tmp.substring(tmp1, tmp.length);
 start = tmp.indexOf("=", 0);
 end = tmp.indexOf(";", start);
 return (unescape(tmp.substring(start + 1, end)));
 }
 return("");
}

function init() {
 str = getCookie("color");
 document.hoge.color.value = str;
}
//-->
</script>
</head>

<body onLoad="init()">
<form name="hoge">
<input type="hidden" name="color" />
</form>
</body>
</html>
関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ