capsuleq回答ポイント 90pt

ウォッチ 2

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

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

ログインして回答する

ベストアンサー

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

スター

その他の回答

ko88202010/06/08 19:17:56
満足23pt

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

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

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

スター

Cherenkov2010/06/08 19:32:41
満足23pt

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

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

スター

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

スター

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

スター

その他の回答を読む

この質問へのコメント

capsuleq2010/06/16 16:24:33

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

ベストアンサー

ホーエンハイム2010/06/08 19:34:45
満足22pt

その他の回答

ko88202010/06/08 19:17:56
満足23pt

Cherenkov2010/06/08 19:32:41
満足23pt

kebo9876542010/06/09 23:06:23
満足22pt

ホーエンハイム2010/06/13 15:46:58
回答オープン10pt

この質問へのコメント

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

質問の情報

この質問のカテゴリ

この質問に含まれるキーワード

人気の質問

メニュー

PC版

ベストアンサー

ホーエンハイム2010/06/08 19:34:45 満足22pt

その他の回答

ko88202010/06/08 19:17:56 満足23pt

Cherenkov2010/06/08 19:32:41 満足23pt

kebo9876542010/06/09 23:06:23 満足22pt

ホーエンハイム2010/06/13 15:46:58 回答オープン10pt

この質問へのコメント

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

質問の情報

この質問のカテゴリ

この質問に含まれるキーワード

人気の質問

メニュー

PC版

ホーエンハイム2010/06/08 19:34:45
満足22pt

ko88202010/06/08 19:17:56
満足23pt

Cherenkov2010/06/08 19:32:41
満足23pt

kebo9876542010/06/09 23:06:23
満足22pt

ホーエンハイム2010/06/13 15:46:58
回答オープン10pt