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

Question

capsuleq

18

18もっと見る

90pt

コンピュータウェブ制作

【クッキーと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

※ 有料アンケート・ポイント付き質問機能は2023年2月28日に終了しました。

No.1

ko88201221692010/06/08 19:17:56

23pt

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

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

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

No.2

Cherenkov15044932010/06/08 19:32:41

23pt

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

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

No.4

kebo98765438102010/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>

No.5

ホーエンハイム409522010/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>

capsuleq 2010/06/16 16:24:33

自動終了となってしまい申し訳ありませんでした。
みなさまからいただいた回答でぶじ思い通りに動かすことができ、大変感謝いたします。

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

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

リクエスト送信済

回答リクエストを送信したユーザーはいません

ホーエンハイム · Accepted Answer · 2010-06-08T19:34:45+09:00

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

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

ホーエンハイム · Accepted Answer · 2010-06-08T19:34:45+09:00

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

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

ベストアンサー

ホーエンハイム409522010/06/08 19:34:45

その他の回答（4件）

ko88201221692010/06/08 19:17:56

Cherenkov15044932010/06/08 19:32:41

ホーエンハイム409522010/06/08 19:34:45ここでベストアンサー

kebo98765438102010/06/09 23:06:23

ホーエンハイム409522010/06/13 15:46:58

コメント（1件)

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