| ポイント |
<![CDATA[
fnArray = ["data","str","cat"];
for (j=0; j<fnArray.length; j++)
{
cnt = document.myFORM[fnArray[j]].length;
for (i=0; i<cnt; i++)
{
flag = document.myFORM[fnArray[j]][i].checked;
text = document.myFORM[fnArray[j]][i].value;
if (flag == true) parent.rightFrame.dataFunc(fnArray[j],text);
}
}
function dataFunc(fStr,txt)
{
document.myFORM[fStr].value = txt;
}
]]>
|
| 説 明 |
フレームをまたいでラジオボタンで選択されたデータを渡すには、「document.フォーム名["ラジオボタン名"][参照番号].checked」でラジオボタンがチェックされているかどうかを調べます。ラジオボタングループが複数ある場合には配列にラジオボタン名を入れておくと楽になります。ラジオボタンでのname属性が同じ＝グループである場合には上記のように参照番号を使ってチェック状態を調べ、表示するフレームの関数を呼び出します。この時に、どのフォームに表示するか、表示文字も一緒に渡します。 |
| サンプル |
<![CDATA[
<html>
<head>
<title>フレームをまたいでラジオボタンで選択されたデータを渡す</title>
<script language="JavaScript"><!--
function sendData()
{
fnArray = ["data","str","cat"];
for (j=0; j<fnArray.length; j++)
{
cnt = document.myFORM[fnArray[j]].length;
for (i=0; i<cnt; i++)
{
flag = document.myFORM[fnArray[j]][i].checked;
text = document.myFORM[fnArray[j]][i].value;
if (flag == true) parent.rightFrame.dataFunc(fnArray[j],text);
}
}
}
// --></script>
</head>
<body>
<form name="myFORM">
<input type="radio" name="data" value="値１" checked>値１<br>
<input type="radio" name="data" value="値２">値２<br>
<input type="radio" name="data" value="値３">値３<br>
<input type="radio" name="str" value="文字１">文字１<br>
<input type="radio" name="str" value="文字２" checked>文字２<br>
<input type="radio" name="str" value="文字３">文字３<br>
<input type="radio" name="cat" value="猫１">猫１<br>
<input type="radio" name="cat" value="猫２">猫２<br>
<input type="radio" name="cat" value="猫３" checked>猫３<br>
<input type="button" value="受渡し" onClick="sendData()">
</form>
</body>
</html>
]]>
|
| 補足説明 |
他フレームにデータを渡すにはいくつか方法がありますがセキュリティの都合で簡単にフレーム内のオブジェクトが操作しにくくなってきています。同一ドメイン内でないとデータの受け渡しはできません。
フレーム分割のページ等の内容は以下の通りです。
<![CDATA[
●フレーム分割ページ
<html>
<head>
<title>フレームをまたいでラジオボタンで選択されたデータを渡す</title>
<frameset cols="20%,*">
<frame src="code_left.html">
<frame src="code_right.html" name="rightFrame">
</frameset>
</head>
</html>
●左側のページ(code_left.html)
<html>
<head>
<title>フレームをまたいでラジオボタンで選択されたデータを渡す</title>
<script language="JavaScript"><!--
function sendData()
{
fnArray = ["data","str","cat"];
for (j=0; j<fnArray.length; j++)
{
cnt = document.myFORM[fnArray[j]].length;
for (i=0; i<cnt; i++)
{
flag = document.myFORM[fnArray[j]][i].checked;
text = document.myFORM[fnArray[j]][i].value;
if (flag == true) parent.rightFrame.dataFunc(fnArray[j],text);
}
}
}
// --></script>
</head>
<body>
<form name="myFORM">
<input type="radio" name="data" value="値１" checked>値１<br>
<input type="radio" name="data" value="値２">値２<br>
<input type="radio" name="data" value="値３">値３<br>
<input type="radio" name="str" value="文字１">文字１<br>
<input type="radio" name="str" value="文字２" checked>文字２<br>
<input type="radio" name="str" value="文字３">文字３<br>
<input type="radio" name="cat" value="猫１">猫１<br>
<input type="radio" name="cat" value="猫２">猫２<br>
<input type="radio" name="cat" value="猫３" checked>猫３<br>
<input type="button" value="受渡し" onClick="sendData()">
</form>
</body>
</html>
●右側のページ(code_right.html)
<html>
<head>
<title>フレームをまたいでラジオボタンで選択されたデータを渡す</title>
<script language="JavaScript"><!--
function dataFunc(fStr,txt)
{
document.myFORM[fStr].value = txt;
}
// --></script>
</head>
<body>
渡されたデータです。
<form name="myFORM">
値：<input type="text" name="data"><br>
文字：<input type="text" name="str"><br>
猫：<input type="text" name="cat"><br>
</form>
</body>
</html>
]]>
|
|
■サンプルスクリプトを実行する >>実行
■各ブラウザでの動作結果を見る >>View!
|
フレームをまたいでラジオボタンで選択されたデータを渡す