入力した数値の合計を自動計算をしたい

Question

前提・実現したいこと

ここに質問の内容を詳しく書いてください。
（例）PHP(CakePHP)で●●なシステムを作っています。
■■な機能を実装中に以下のエラーメッセージが発生しました。

発生している問題・エラーメッセージ

現在ボタンを押下しないと計算ができない状態ですが、数量を入力したら自動計算をしたいです。
現状ではその後、お客様情報画面（shop_form.html）で入力していただき、入力チェック画面（shop_form_check.php）
最終的には（shop_form_done.php）で、お客様情報とカートで選択した商品や、金額等をDBに落としたいです。

＊現状では特に問題なく動作していますが、自動計算をjavascriptde
でどのように書けばよいのか教えてください

該当のソースコード

<?php session_start(); session_regenerate_id(true); if(isset($_SESSION['member_login'])==false) { print'ようこそゲスト様<br/>'; print'<a href="member_login.html">会員ログイン</a>'; print '<br/>'; } else { print 'ようこそ'; print $_SESSION['member_name']; print '様<br/>'; /*****ログアウト*****/ print'<a href="member_logout.php"><img src="../images/button/cman20210829004351830.png"></a>'; print '<br/>'; } try { if(isset($_SESSION['cart'])==true) { $cart=$_SESSION['cart']; $kazu=$_SESSION['kazu']; $max=count($cart); } else { $max=0; } if($max==0) { print'カートに商品が入っていません。<br/>'; print'<br/>'; /*****商品一覧へ*****/ print'<a href="shop_list.php"><img src="../images/button/cman20210829004754362.png"></a>'; exit(); } /* var_dump($cart); exit(); */ require_once('../Connections/DBSET.php'); foreach($cart as $key => $val) { $sql='SELECT code,name,price1,price2,price3,price4,price5,price6,gazou FROM mst_product WHERE code=?'; $stmt= $dbh->prepare($sql); $data[0]= $val; $stmt->execute($data); $rec=$stmt->fetch(PDO::FETCH_ASSOC); $pro_code[]=$rec['code']; $pro_name[]=$rec['name']; $pro_price1[]=$rec['price1']; $pro_price2[]=$rec['price2']; $pro_price3[]=$rec['price3']; $pro_price4[]=$rec['price4']; $pro_price5[]=$rec['price5']; $pro_price6[]=$rec['price6']; /*****カンマ区切り*****/ $pro_price1_h[]=number_format($rec['price1']); $pro_price2_h[]=number_format($rec['price2']); $pro_price3_h[]=number_format($rec['price3']); $pro_price4_h[]=number_format($rec['price4']); $pro_price5_h[]=number_format($rec['price5']); $pro_price6_h[]=number_format($rec['price6']); if($rec['gazou']=='') { $pro_gazou[]=''; } else { $pro_gazou[]='<img src="../product/gazou/'.$rec['gazou'].'">'; } } $dbh=null; } catch(Exception $e) { print 'ただいま障害により大変ご迷惑をお掛けしております。'; exit(); } ?>

カートの中身<br/>
<br/>

<table border="1"> <form method="post" action="kazu_change.php"> <?php for($i=0;$i<$max;$i++) { ?> <tr> <td colspan="2">商品コード:<?php print $pro_code[$i];?></td>

	<td colspan="4">商品名:<?php print $pro_name[$i];?></td>
</tr>
<tr align="center">
	<td>100枚(税抜単価)</td>
	<td>200枚(税抜単価)</td>
	<td>300枚(税抜単価)</td>
	<td>400枚(税抜単価)</td>
	<td>500枚(税抜単価)</td>
	<td>1,000枚(税抜単価)</td>
</tr>
<tr align="right">
	<td><?php print $pro_price1_h[$i].'円';?></td>
	<td><?php print $pro_price2_h[$i].'円';?></td>
	<td><?php print $pro_price3_h[$i].'円';?></td>
	<td><?php print $pro_price4_h[$i].'円';?></td>
	<td><?php print $pro_price5_h[$i].'円';?></td>
	<td><?php print $pro_price6_h[$i].'円';?></td>
</tr>
<tr>
	<td align="center">ご注文枚数</td>
	<td><input type="text" name="kazu<?php print $i;?>" value="<?php print $kazu[$i];?>" width="100"></td>
	<td align="center">合計金額</td>
	<td align="right"><?php print $pro_price1[$i]*$kazu[$i];?>円</td>
</tr>
<tr align="center" >
	<td colspan="6">選択商品を削除する場合にはチェックを入れてください。<input type="checkbox" name="sakujo<?php print $i;?>"></td>
</tr>
<tr  align="center">
	<td colspan="6">数量変更または削除する場合には、最後に変更ボタンを押してください。
	<input type="hidden" name="max" value="<?php print $max;?>">
	<input type="submit" value="変更ボタン"></td>	
</tr>
<tr align="center">	
	<td colspan="7"><?php print $pro_gazou[$i];?></td>
</tr>

<?php } ?>

</table>
	
	<input type="button" onClick="history.back()"value="戻る">

</form>	

<br/> <a href="shop_form.html">ご購入手続きへ進む</a><br/> <?php if(isset($_SESSION["member_login"])==true) { print'<a href="shop_kantan_chrck.php">会員簡単注文へ進む</a><br/>'; /*****会員様ご注文*****/ print'<a href="shop_kantan_chrck.php"><img src="../images/button/cman20210829010524732.png"></a>'; } ?>

### 試したこと


### 補足情報（FW/ツールのバージョンなど）

PHP　MYSQLを使用してます

Comments

[m.ts10806]

コードやエラーはマークダウンのcode機能を利用してご提示ください。
https://teratail.com/questions/238564

あと、調べたこと試したことを記載してください。

Answer 1

自動計算をjsでやりたいのであればPHP部分特にセッション絡みの部分は
すべて割愛してください。あとはinputイベントをトリガーに自動計算します

document.addEventListner('input',(e)=>{
・・・
});

逆に計算をPHPでやりたい場合は、ページ遷移するなら普通に入力したら
毎回サブミットしてください
ページ遷移しないなら、自動計算用のAPIを用意して、jsで非同期にデータを
投げて(fetch/XHR)返り値をHTMLに反映してください

Answer 2

数量フィールドに onChange で起動するものを設定すればいいと思います。