子フォームで記入したものを親フォームに反映

0   名前： 斉藤 ： 2006/08/11（金） 14:43  ID:3OWz9P4Z
初めまして、色々試したのですが、どうしてもうまくいかないので
質問させてください。

子フォームでtextareaに入力した内容を、次のページの
親フォームの同じ項目のところに反映させたいのですが、
どなたかやり方を知ってましたら教えてください。。

トップページ（子フォーム）で名前とメアドを入力して送信を押すと
次の親フォームのページに飛び、名前とメアドは入力済みになっている、
という風にしたいのです。

子フォーム
http://staying.client.jp/form/

親フォーム
http://staying.client.jp/form/form.html

どうか宜しくお願いいたします。
1   名前： sevi- ： 2006/08/11（金） 14:43  ID:pKAWj1cb
・子フォームの送信方式をGET式に変更
・子フォームと親フォームの受け渡し対象となる各Form要素のname属性を同値にする
・後は以下のようにGET式の仕組みを利用して値を受け渡す.

他にはCookieを利用する手が存在するが、無効に設定されている事もあるので
個人的にはこちらの手法を用いる方が対応範囲がより広いと考える.

sevi-

index.html
-----------------------
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=shift_jis" />
	<title>フォームサンプル</title>
	<link rel="stylesheet" type="text/css" href="http://img.shinobi.jp/tadaima/tdftad.css" />
	<script type="text/javascript">
	function escapesubmit(fm)
	{
		for(var i=0; i<fm.elements.length; i++)
		{
			fm.elements[i].name = escape(fm.elements[i].name);
			fm.elements[i].value = escape(fm.elements[i].value);
		}	
		fm.submit();
		for(var i=0; i<fm.elements.length; i++)
		{
			fm.elements[i].name = unescape(unescape(fm.elements[i].name));
			fm.elements[i].value = unescape(unescape(fm.elements[i].value));
		}
		return false;
	}	
	function initialize_form(fm)
	{
		var obj_value_form = new Object();
		var list_code_search = window.location.search.substr(1).split("\&");
		var list_code_search_one;
		for(var i=0; i<list_code_search.length; i++)
		{
			list_code_search_one = list_code_search[i].split("=");
			alert(unescape(unescape(list_code_search_one[0])));
			obj_value_form[unescape(unescape(list_code_search_one[0]))] = unescape(unescape(list_code_search_one[1]));
		}
		for(var i=0; i<fm.elements.length; i++)
		{
			fm.elements[i].name = unescape(unescape(fm.elements[i].name));
			fm.elements[i].value = unescape(unescape(fm.elements[i].value));
		}
	}			
	</script>	
</head>
<body>
	<span>※子フォーム</span>	
	<form method="get" action="form.html" onsubmit="return escapesubmit(this);">
		<p>
			お名前</p>
		<input name="名前" type="text" size="33" maxlength="33" />
		<p>
			E-mail</p>
		<input name="email" type="text" size="33" maxlength="33" />
		<input name="送信" type="submit" value="送信" />
	</form>
</body>
</html>
2   名前： sevi- ： 2006/08/11（金） 14:43  ID:pKAWj1cb
文字数をオーバーしたので親フォームのソースをここに記す.

form.html
----------------------
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=shift_jis" />
	<title>親フォーム</title>
	<link rel="stylesheet" type="text/css" href="http://img.shinobi.jp/tadaima/tdftad.css" />
	<script type="text/javascript">
	function initialize_form(fm)
	{
		var list_code_search = window.location.search.substr(1).split("\&");
		var list_code_search_one;
		var obj_value_form = new Object();
		for(var i=0; i<list_code_search.length; i++)
		{
			list_code_search_one = list_code_search[i].split("=");
			obj_value_form[unescape(unescape(list_code_search_one[0]))] = unescape(unescape(list_code_search_one[1]));
		}
		for(var i=0; i<fm.elements.length; i++)
		{
			if(obj_value_form[fm.elements[i].name] == null)
				continue;
			fm.elements[i].value = obj_value_form[fm.elements[i].name];
		}
	}			
	</script>
</head>
<body onload="initialize_form(document.forms[0]);">
	<form action="xxx.cgi" method="post">
		※親フォーム<br />
		<table border="0" cellpadding="0" cellspacing="5" class="waku">
			<tr>
				<th width="118">
					<span class="txt_CC0000">お名前※：</span>
				</th>
				<td width="175">
					<p>
						<input name="名前" type="text" id="名前" size="35" />
					</p>
				</td>
			</tr>
			<tr>
				<th>ふりがな※：</th>
				<td>
					<input name="ふりがな" type="text" id="フリガナ" size="35" />
				</td>
			</tr>
			<tr>
				<th>
					生年月日・年齢※：</th>
				<td>
					<input name="生年" type="text" id="生年" size="4" />
					年
					<input name="月" type="text" id="月" size="4" />
					月
					<input name="日" type="text" id="日" size="4" />
					日 年齢
					<input name="年齢" type="text" id="年齢" size="4" />
					歳
				</td>
			</tr>
			<tr>
				<td colspan="2" scope="row">
					<input type="submit" name="Submit" value="送信" />
				</td>
			</tr>
			<tr>
				<td colspan="2" align="center" valign="top" scope="row">
				</td>
			</tr>
		</table>
	</form>
</body>
</html>
3   名前： m035 ◆Wpzr1YKOiq ： 2006/08/11（金） 14:43  ［URL］  ID:6D2htUvn
urlに
http://staying.client.jp/form/form.html?メールアドレス
のように付加すればいいと思います。
このとき、urlエンコードをしてからurlにメールアドレスを付加してください。
そして、受け取る側で、location.search.slice(1)をurlデコードし、それを該当箇所のvalueにすればできます。

#本当はCGIで処理したほうが絶対に良いのですけれど･･･
4   名前： m035 ◆Wpzr1YKOiq ： 2006/08/11（金） 14:43  ［URL］  ID:6D2htUvn
ダブりましたが、>>1-2の方が優れているのでそちらを参考に。
5   名前： sevi- ： 2006/08/11（金） 14:43  ID:pKAWj1cb
追伸：
index.htmlページ側のコードの内、スクリプトタグ内部の関数「initialize_form」は不要である.
すまない消し忘れた.
そのままでも動作に支障は無いが、一応削除しておいて欲しい.

sevi-
6   名前： 斉藤 ： 2006/08/11（金） 14:43  ID:3OWz9P4Z
sevi- 様

丁寧に教えてくださって、本当にありがとうございます！！
早速試しまして、ちゃんと反映されていました。

＞スクリプトタグ内部の関数「initialize_form」は不要である.
はい、消しておきました。
親切にしていただき、ありがとうございました。

m035 様
教えていただき、ありがとうございました。
今回はsevi-様の方法でやりましたが、他の機会で是非ためさせて頂きたいと思います。
#CGIが分かれば本当はいいのですが、勉強不足で。。
ありがとうございました！
一覧へ戻る