ファーム名を取得し、別データからクリックで入力するには？

質問

こんにちは。
請求書の入力で、mysqlのデータをphpで書き出し、<formで入力・更新を行いたいのですが、複数個あるフォーム名の取得方法が分かりません。
<select を使わないのは、該当の項目がない場合、任意で入力したいためです。
<form の name="kouban" をクリックしたら、menu が出てきて、それをクリックすると、 name="naiyou"に入るようにしたいです。

JavaScript初心者なので、サンプルを元にやってみましたが、出来ません。。

よろしくお願いします。

<SCRIPT language=JavaScript>
<!--
function menu(form){
blk1.style.left=window.event.clientX;
blk1.style.top=window.event.clientY;
blk1.style.display="block";
tm1=setTimeout("hideMenu()",3000);

}
function hideMenu(){
clearTimeout(tm1);
blk1.style.display="none";
}

function SetMsg(strNum,strNum2) {
var strMsg;
var strMsg2;
strMsg = strNum;
strMsg2 = strNum2;
document.forms[strMsg2].naiyou.value=strMsg;
}
// -->
</SCRIPT>

************************
*フォームは複数あります*
************************
<?php
$a=1;
省略
?>
<form action="yoyaku.php" method="POST" name="ryoukin<?php echo $a;?>">
<input type="text" name="kouban" onclick="menu(this.form)" />
<input type="text" name="naiyou" /></
<?php $a++; ?>

********************************
*menuの内容をフォームに渡したい*
********************************
<div id=blk1 style="position:absolute;display:none">
<table bgcolor="#E0EBF1" bordercolor="#0651A9">
<tr>
<td><a href="javascript:SetMsg('宅配便代','****ここにフォーム名を入れる****')">国際航空券代</a></td>
</tr>
<tr>
<td><a href="javascript:SetMsg('交通費','****ここにフォーム名を入れる****')">外国諸税</a></td>
</tr>
<tr>
<td><a href="javascript:SetMsg('ご利用代金','****ここにフォーム名を入れる****')">フライトポイントご利用</a></td>
</tr>
</table>
</div>

回答No.1

OKbokuzyo · ベストアンサー

どういうことをしたいのかはよく分からなかったけれど
JavaScript的にダメそうなところは

> function menu(form){
> blk1.style.left=window.event.clientX;
> blk1.style.top=window.event.clientY;
> blk1.style.display="block";
> tm1=setTimeout("hideMenu()",3000);
>
> }
> function hideMenu(){
> clearTimeout(tm1);
> blk1.style.display="none";
> }

blk1が解決できないので下記のように書きなおしてください
document.getElementById("blk1")

また、tm1はmenu関数のローカル変数として扱われますので
clearTimeoutも実行されないと思います。
（※ 余談ですが、JavaScriptでは変数の宣言が必要ないとはいえ、
　　 なるべくきちんと書く方が好ましいです）

あと、setTimeoutの扱いはブラウザによってまちまちなので
よく調べてから使用してください。
（私の記憶ではNNの場合、第一引数は文字列ではなかったと思うので）

よくわからないのは‥、koubanがテキストフィールドとなっている点と、
koubanをクリックすると３秒で表示を消すのですか？

補足

レスありがとうございます。補足説明させていただきます。
請求書の項目（宅配便代だの、交通費だの）を入力するとき、
<input type="text" name="kouban" onclick="menu(this.form)" />
がクリックされた時、サブウィンドウ（のようなもの？？？）が出てきて、
******サブウィンドウ（のようなもの？？？）*****
1 宅配便代
2 交通費
などなど
******

そのサブウィンドウ（のようなもの？？？）をクリックしたら、
<form action="yoyaku.php" method="POST" name="ryoukin<?php echo $a;?>">の<input type="text" name="naiyou" />にその項目が入るようにしたいのです。

<a href="javascript:SetMsg('宅配便代','****フォーム名(1)****')">宅配便代</a>
****フォーム名(1)****　にフォーム名(ryoukin3など)入れれば、入るのですが、フォーム名は(ryoukin1、ryoukin2・・複数)あるので、選択されているフォーム名を、SetMsg()に渡せばいいのでしょうが、それが分かりません。

初心者ゆえ、お許しください。。。
＞blk1が解決できないので下記のように書きなおしてください
＞document.getElementById("blk1")
どの部分を書き換えればいいのでしょうか？

＞あと、setTimeoutの扱いはブラウザによってまちまちなので
＞よく調べてから使用してください。
はい。わかりました。

＞よくわからないのは‥、koubanがテキストフィールドとなっている点＞と、koubanをクリックすると３秒で表示を消すのですか？
サンプルから取ってきたので・・・入力補助なので、消えてもいいかな？と思いまして。

回答No.2

OKbokuzyo

なんとなく意味が分かりました。
<div id=blk1 ‥ >内に書かれた内容は表示するメニューの雛形となっているのですね。

入力フォームは複数存在し、それぞれのフォームに<div id=blk1 ‥>を使い回したいが
その際、関数SetMsgの第二引数にフォームを渡すには
どうすればよいか分からないということでよいでしょうか？

いろいろ方法は考えられますが
一番簡単な方法としてはグローバルな変数を宣言し、
そこに選択されたフォームを格納するようにすれば良いです。
具体的に言えば、質問文に書かれたJavaScriptに
下記コメント部分の行を書き足してみてください。

<SCRIPT language=JavaScript>
<!--
// 選択されたFormを格納するグローバルな変数
var g_selectForm = null;

function menu(form){
// 選択されたフォームをグローバル変数へ格納
g_selectForm = form;

blk1.style.left=window.event.clientX;
blk1.style.top=window.event.clientY;
blk1.style.display="block";
tm1=setTimeout("hideMenu()",3000);

}

‥ 中略 ‥

function SetMsg(strNum,strNum2) {
var strMsg;
var strMsg2;
strMsg = strNum;
strMsg2 = strNum2;
// グローバル変数から現在選択されているフォームを割り出す
g_selectForm.naiyou.value=strMsg;
}

これでとりあえずは動くことかと思います。

しかし見て気づくかと思いますが、
この変更によっていくつか不要なコードが存在しています。
説明が少し面倒なので、不要コードを消した例を下記に示しますので
ご自身でどのように違うのかご確認ください。
（※ JavaScriptの記述として相応しくないと思われる箇所も気づいた範囲で書き直しました。
問題があれば、ご自身で書き換えてください。）

============ 例 =============

<SCRIPT language=JavaScript>
<!--
var g_selectForm = null;
var tm1 = null;

function menu(form){
g_selectForm = form;
document.getElementById("blk1").style.left=window.event.clientX;
document.getElementById("blk1").style.top=window.event.clientY;
document.getElementById("blk1").style.display="block";
tm1=setTimeout("hideMenu()",3000);

}
function hideMenu(){
clearTimeout(tm1);
document.getElementById("blk1").style.display="none";
}

function SetMsg(strNum) {
g_selectForm.naiyou.value = strNum;
}
// -->
</SCRIPT>

************************
*フォームは複数あります*
************************
<?php
$a=1;
省略
?>
<form action="yoyaku.php" method="POST" name="ryoukin<?php echo $a;?>">
<input type="text" name="kouban" onclick="menu(this.form)" />
<input type="text" name="naiyou" /></form>
<?php $a++; ?>

********************************
*menuの内容をフォームに渡したい*
********************************
<div id="blk1" style="position:absolute;display:none">
<table bgcolor="#E0EBF1" bordercolor="#0651A9">
<tr>
<td><a href="javascript:SetMsg('宅配便代')">国際航空券代</a></td>
</tr>
<tr>
<td><a href="javascript:SetMsg('交通費')">外国諸税</a></td>
</tr>
<tr>
<td><a href="javascript:SetMsg('ご利用代金')">フライトポイントご利用</a></td>
</tr>
</table>
</div>

お礼

ありがとうございます！！！
そのままコピペしたら、出来ました。。。

＞（※ JavaScriptの記述として相応しくないと思われる箇所も気づいた範囲で書き直しました。
問題があれば、ご自身で書き換えてください。）

ありがとうございます。初心者ゆえ、サンプルをただコピペしただけです。ご丁寧に訂正してくださり、本当にありがとうございました！