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

回答の条件
  • 1人5回まで
  • 登録:2010/06/08 19:12:41
  • 終了:2010/06/15 19:15:03

ベストアンサー

id:Bombastus No.3

ホーエンハイム回答回数409ベストアンサー獲得回数522010/06/08 19:34:45

ポイント22pt

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

<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件)

id:ko8820 No.1

ko8820回答回数1221ベストアンサー獲得回数692010/06/08 19:17:56

ポイント23pt

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

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

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

id:Cherenkov No.2

Cherenkov回答回数1502ベストアンサー獲得回数4922010/06/08 19:32:41

ポイント23pt

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

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

ホーエンハイム回答回数409ベストアンサー獲得回数522010/06/08 19:34:45ここでベストアンサー

ポイント22pt

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

<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>
id:kebo987654 No.4

kebo987654回答回数38ベストアンサー獲得回数102010/06/09 23:06:23

ポイント22pt

予め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>
id:Bombastus No.5

ホーエンハイム回答回数409ベストアンサー獲得回数522010/06/13 15:46:58

ポイント10pt

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>
  • id:capsuleq
    自動終了となってしまい申し訳ありませんでした。
    みなさまからいただいた回答でぶじ思い通りに動かすことができ、大変感謝いたします。

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません