phpのwhile出力に対するJSを使った計算

質問

JS初心者です。phpでmysqlからデータを取り出し、whileでテーブルに商品名等と単価・数・小計を出力していますが、各項目の数字を変更しphpで再計算させると当然ながらリロードが発生するのでテーブルの頭に戻って表示されてしまいます。この点を改善しなければならず、計算自体は単純なものですので、JSかAjaxでと思ったのですが、いずれの方法でも最初の一行しか動作いたしません。各エレメントの「id='x'」を「id='x<?=[renban]?>'」とすると横取りソフト上では「id=x3752」のように各行個別に番号が割り当てられているのですが、結果は同じで、JSには関係がないようにも見えます。下記ではwhileの中にJSが入っていますが、<SCRIPT TYPE="text/javascript"> <!-- // --> </SCRIPT> としてヘッダに置くと全く反応せず、ブラウザのエラー表示では「オブジェクトを指定して下さい」と出ます。大変困ってしまいました。どなたかご教授いただけますよう、よろしくお願いいたします。
以下見ずらいとは思いますが、実際のコードの抜粋です。問題はフォーム中ほどの部分です。

//ここまでDBからのデータ呼び出し部分
以下本題です
while($row = mysql_fetch_array($result)){
PRINT<<<EOF
<form action= "mv6.php" name="form1" method="POST" id="form1">
</tr><tr bgcolor="FFFFFF" onMouseOver="this.style.backgroundColor='#FFCCFF'" onMouseOut="this.style.backgroundColor='#FFFFFF'" >
<td width="20">
<INPUT type='hidden' name='renban' value='$row[renban]'>
<INPUT type='hidden' name="kind[$row[renban]]" value="ok">
<input type="checkbox" name="del[$row[renban]]" value="ok"></td>
<td width="220">
<INPUT size='26' type='text' name='shu[$row[renban]]' value='$row[shu]'class = 'nonbor' onFocus="this.style.backgroundColor='#FFFF99'" onBlur="this.style.backgroundColor='ffffff'" ></td>
<td width="300" ><INPUT size='36' type='text' name='hin_na[$row[renban]]' value='$row[hin_na]' id = 'hin_na[$row[renban]]'
class = 'nonbor' onFocus="this.style.backgroundColor='#FFFF99'" onBlur="this.style.backgroundColor='ffffff'"></td>
<SCRIPT>
function cal(){
x = document.getElementById('x').value;
y = document.getElementById('y').value;
z = x * y;
document.getElementById('z').value = z;
}
</SCRIPT>
<td width="90" ><INPUT size='12' type='text' name='x' value='$row[tanka]' id='x'
class = 'nonborri' onKeyup="cal(this);" onFocus="this.style.backgroundColor='#FFFF99'" onBlur="this.style.backgroundColor='ffffff'"></td>

<td width="90"><INPUT size='12' type='text' name='y' value='$row[kazu]' id='y' class = 'nonborri' onKeyup="cal(this);" onFocus="this.style.backgroundColor='#FFFF99'" onBlur="this.style.backgroundColor='ffffff'"></td>

<td width="100"><INPUT size='13' type='text' name='z' value='' id='z' class = 'nonborri' onFocus="this.style.backgroundColor='#FFFF99'" onBlur="this.style.backgroundColor='ffffff'"></td>
<td width="240"><INPUT size='40' type='text' name='bikou[$row[renban]]' value='$row[bikou]' class = 'nonbor' onFocus="this.style.backgroundColor='#FFFF99'" onBlur="this.style.backgroundColor='ffffff'">
</td>
</tr>
</TABLE>
EOF;
}

回答No.1

is_may · ベストアンサー

現状では、まず一行目で「cal()」という関数や「x」、「y」という名前のテキストボックスが設置されます。この時点では問題ありませんが、二行目でまた一行目と全く同じ関数やテキストボックスが配置されてしまいます。JavaScriptが上手く動かないのはこのように同名の関数などが発生してしまうためです。
具体的な解決策としては、whileの前に$i=0;などのカウント変数を宣言し、whileが一度終わるときに$i++;として足します。そして「cal()」やJavaScript内のテキストボックスの参照名（x,y,z）、テキストボックス名やそのイベントハンドラの関数名など、繰り返し処理で重複してしまう名称には全部「$i」を付加します。
説明下手なので分かりにくいかと思いましたのでテスト実行したものを貼ります。

<table border="1">
<tr>
<td></td>
<td>種目</td>
<td>品名</td>
<td>X</td>
<td>Y</td>
<td>Z</td>
<td>備考</td>
</tr>
<?php
$i=1;
while($i<10){
PRINT<<<EOF
<form action= "mv6.php" name="form1" method="POST" id="form1">
</tr>
<tr bgcolor="FFFFFF" onMouseOver="this.style.backgroundColor='#FFCCFF'" onMouseOut="this.style.backgroundColor='#FFFFFF'" >
<td width="20">
<INPUT type='hidden' name='renban' value='$row[renban]'>
<INPUT type='hidden' name="kind[$row[renban]]" value="ok">
<input type="checkbox" name="del[$row[renban]]" value="ok">
</td>
<td width="220">
<INPUT size='26' type='text' name='shu[$row[renban]]' value='$row[shu]'class = 'nonbor' onFocus="this.style.backgroundColor='#FFFF99'" onBlur="this.style.backgroundColor='ffffff'" >
</td>
<td width="300" >
<INPUT size='36' type='text' name='hin_na[$row[renban]]' value='$row[hin_na]' id = 'hin_na[$row[renban]]'
class = 'nonbor' onFocus="this.style.backgroundColor='#FFFF99'" onBlur="this.style.backgroundColor='ffffff'">
</td>
<script language="javascript" type="text/javascript"><!--
bx$i=by$i="";
function cal$i(){
x = document.getElementById('x$i').value;
y = document.getElementById('y$i').value;
z = x * y;
if(isNaN(x)){
document.getElementById('x$i').value=bx$i;
} else if(isNaN(y)){
document.getElementById('y$i').value=by$i;
} else {
document.getElementById('z$i').value = z;
bx$i = x;
by$i = y;
}
}
//-->
</script>
<td width="90" >
<INPUT size='12' type='text' name='x$i' value='$row[tanka]' id='x' class = 'nonborri' onKeyup="cal$i(this);" onFocus="this.style.backgroundColor='#FFFF99'" onBlur="this.style.backgroundColor='ffffff'">
</td>
<td width="90">
<INPUT size='12' type='text' name='y$i' value='$row[kazu]' id='y' class = 'nonborri' onKeyup="cal$i(this);" onFocus="this.style.backgroundColor='#FFFF99'" onBlur="this.style.backgroundColor='ffffff'">
</td>
<td width="100"><INPUT size='13' type='text' name='z$i' value='' id='z' class = 'nonborri' onFocus="this.style.backgroundColor='#FFFF99'" onBlur="this.style.backgroundColor='ffffff'">
</td>
<td width="240"><INPUT size='40' type='text' name='bikou[$row[renban]]' value='$row[bikou]' class = 'nonbor' onFocus="this.style.backgroundColor='#FFFF99'" onBlur="this.style.backgroundColor='ffffff'">
</td>
</tr>
EOF;

$i++;
}
?>
</table>

お礼

御礼
is_may様、おかげさまで無事に解決することができました。
ありがとうございました。

見ず知らずの私からの質問に、ここまですばやく、懇切丁寧にお答えいただけてとても嬉しいです。
お忙しい中、テストをしていただいた上でコードを教えていただくなんて感激です。これで数日ぶりに今夜はゆっくり休めます。。

おおげさと思われるかも知れませんが、助けていただいて胸が熱くなる思いです。
これを機に私も力になれる質問にはお答えしていこうと思います。

本当にありがとうございました。感謝。