- ベストアンサー
インラインフレームを利用した計算ができない！JavaScript初心者の困りごと
- 質問者はJavaScript初心者で、インラインフレームを利用した計算について困っている。試行錯誤しながらフォームを作成しているが、正常に動かない問題が発生している。
- 質問者は宿泊費と明細の交通費を合計して自動計算したいが、function内でforループを使用しても正常に動かない。また、合計税込金額は手入力された金額を優先して計算し表示したいという要望もある。
- ソースコードにはtest1.htmlとtest2.htmlの内容が含まれており、詳細な問題点と共に質問者の要望が記述されている。
- xiaomi
- お礼率57% (4/7)
- JavaScript
- 回答数4
- ありがとう数2
- みんなの回答 （4）
- 専門家の回答
質問者が選んだベストアンサー
すみません。＃２の回答を少し修正します。 （Operaでoverflow-xが効かないため） イベントハンドラもonkeyupに変えました。 <style type="text/css"> body { font:10pt 'ＭＳ Ｐゴシック',sans-serif; } table { font:10pt 'ＭＳ Ｐゴシック',sans-serif; border:1px #999999 solid; border-collapse:collapse; } td { border:1px #999999 solid; } #meisai{ width:100%; height:200px; overflow:auto; } #waku { width:100%; } .ryohi { width:75px; } </style> <script type="text/javascript"> meisaiCnt=30; //明細行数 function keisan(){ Goukei=0; if(document.form1.syukuhakuhi.value!="")Goukei+=eval(document.form1.syukuhakuhi.value); for (i=1;i<=meisaiCnt;i++){ if(document.form1.elements["ryohi"+i].value!="")Goukei+=eval(document.form1.elements["ryohi"+i].value); } document.form1.hontaikingaku.value=Math.ceil(Goukei/1.05); document.form1.syouhizei.value=Goukei-Math.ceil(Goukei/1.05); document.form1.zeikomigokei.value=Goukei; } function check(){//各種エラーチェックを記述 if(true){ alert("＊＊＊を入力してください！！") return false; }else{ document.form1.submit(); } } </script> <body> <form name="form1" method="POST" action="****.aspx" onsubmit="return check();"> <table> <tr> <th colspan="2">出張旅費精算</th> </tr> <tr> <td>宿泊費：</td> <td><input type="text" name="syukuhakuhi" onkeyup="keisan()" /></td> </tr> <tr> <td colspan="2"> <div id="meisai"> <table id="waku"> <script type="text/javascript"> for(i=1;i<=meisaiCnt;i++){ document.write("<tr><td>交通費 "+i+"：</td><td><input class='ryohi' type='text' name='ryohi"+i+"' onkeyup='keisan()' /></td></tr>") } </script> </table> </div> </td> </tr> <tr> <td>本体金額：</td> <td><input type="text" name="hontaikingaku" /></td> </tr> <tr> <td>消費税等：</td> <td><input type="text" name="syouhizei" /></td> </tr> <tr> <td>合計税込金額：</td> <td><input type="text" name="zeikomigokei" /></td> </tr> </table> <input type="submit" value="送信" /> </form> </body> エラー処理系は適当に自分で補足して下さい。 金額欄は数字以外の場合、エラー出した方がいいでしょうね・・ .
その他の回答 (3)
- arenani_sorenani
- ベストアンサー率73% (58/79)
こんな感じで・・ <style type="text/css"> body { font:10pt 'ＭＳ Ｐゴシック',sans-serif; } table { font:10pt 'ＭＳ Ｐゴシック',sans-serif; border:1px #999999 solid; border-collapse:collapse; } td { border:1px #999999 solid; } #meisai{ width:100%; height:200px; height: overflow-x:hidden; overflow-y:scroll; } #waku { width:100%; } .ryohi { width:75px; } </style> <script type="text/javascript"> meisaiCnt=20; //明細行数 function keisan(){ Goukei=0; if(document.form1.syukuhakuhi.value!="")Goukei+=eval(document.form1.syukuhakuhi.value); for (i=1;i<=meisaiCnt;i++){ if(document.form1.elements["ryohi"+i].value!="")Goukei+=eval(document.form1.elements["ryohi"+i].value); } document.form1.hontaikingaku.value=Math.ceil(Goukei/1.05); document.form1.syouhizei.value=Goukei-Math.ceil(Goukei/1.05); document.form1.zeikomigokei.value=Goukei; } function check(){ /*各種エラーチェック*/ document.form1.submit(); } </script> <body> <form name="form1" method="POST" action="****.aspx"> <table> <tr> <th colspan="2">出張旅費精算</th> </tr> <tr> <td>宿泊費：</td> <td><input type="text" name="syukuhakuhi" onclick="keisan()" onchange="keisan()" /></td> </tr> <tr> <td colspan="2"> <div id="meisai"> <table id="waku"> <script type="text/javascript"> for(i=1;i<=meisaiCnt;i++){ document.write("<tr><td>交通費 "+i+"：</td><td><input class='ryohi' type='text' name='ryohi"+i+"' onclick='keisan()' onchange='keisan()' /></td></tr>") } </script> </table> </div> </td> </tr> <tr> <td>本体金額：</td> <td><input type="text" name="hontaikingaku" /></td> </tr> <tr> <td>消費税等：</td> <td><input type="text" name="syouhizei" /></td> </tr> <tr> <td>合計税込金額：</td> <td><input type="text" name="zeikomigokei" /></td> </tr> </table> <input type="button" value="送信" onClick="check()"> </form> </body> .
- arenani_sorenani
- ベストアンサー率73% (58/79)
う～ん。 計算方法とかは必要ならお教えしますが その前にこの「出張旅費精算のフォーム」の使用はどういうものでしょうか？ 入力後サーバーへ送信させるんですか？ その場合、サーバー側にＣＧＩを準備する必要がありますが。 また、その場合はインラインフレームの入力情報は別フォーム上にあり 1度に送信させるには少し手間がかかります。 単純に明細行の高さを狭めてスクロールして使うということなら divタグ内でCSSを使いテーブルなんかをスクロール表示すればいいんじゃないでしょうか・・・ javascriptで作ったものはクライアントに情報がありますので 単純に保存とかはできないですから サーバー送信しないと残すことは難しいですよね。 入力後、印刷して使うとかいうのではないですよね・・
補足
arenani_sorenani様、回答をありがとうございます。 フォームの使用目的は、画面で入力させた値を、ASPでDB(oracle）にinsertさせる予定です。 insert時に、サーバー側で計算させて、結果をクライアントに返すよりも、クライアント側で、 明細等の金額を自動計算させて、エラーもクライアント側で出力して、正しい結果のみを サーバーに送信したいと考えています。 >単純に明細行の高さを狭めてスクロールして使うということなら divタグ内でCSSを使いテーブルなんかをスクロール表示 CSSでそのような事ができるのですね。勉強不足で、お教え頂いて 初めて知りました。 インラインフレームを使用しようとした目的は、ご指摘の通り画面 の明細行を狭めたかったので、CSSを勉強してみます。 明細をCSSで表示させた場合も、クライアント側で明細等の金額合計を 自動計算させたいのですが、その場合の計算は、どうすればよいの でしょうか？ ご教授の程を、宜しくお願い致します。
for (var i = 0; i < piCnt; i++){ piGokei = piGokei + MeisaiFrame.document.f2.ryohi[i].value ;} ここがおかしい気がします。 piGokei = "" for (var i = 0; i < piCnt; i++){ piGokei = piGokei + MeisaiFrame.document.f2.ryohi[i].value ;} こうしてみては如何でしょうか。 それからonkeydown="fnKeisan()"をinputに入れてみたらどうでしょうか。
お礼
dshguskdig様、回答ありがとうございます。 早速試して見ましたが、やはりエラーが出ました。onkeydownは使ったことがありませんので、調べてみます。
お礼
arenani_sorenani様、とても詳細に教えていただき、ありがとうございます。 大変参考になりました。わからなくて迷い込んでいた部分まですっきりし、 望んでいたように動くようになりましたので、今回の質問は締切りとさせていただきます。 回答を下さった皆様、本当にありがとうございました。