お世話になります。
現在、HTML中に下記のソースを記述しセレクトボックスの数量が選択されたときに自動計算をしようとしています。
-------------------------------------------------------------------
<table summary="ご購入内容">
<tr>
<th><p>カレンダー</p></th>
<td class="price">1,000円(税込)</td>
<td class="select">
<input type="hidden" name="field16_name" value="カレンダー" />
<input type="hidden" name="field16_req" value="no" />
<select type="select" id="item1" name="field16_text" accesskey="a" tabindex="1" onchange="keisan();">
<option value="0"> 0部</option>
<option value="1"> 1部</option>
<option value="2"> 2部</option>
<option value="3"> 3部</option>
<option value="4"> 4部</option>
<option value="5"> 5部</option>
</select></td>
</tr>
</table>
<table summary="小計金額">
<tr>
<th><p>小計金額</p></th>
<td><input type="text" id="sender-shoukei1" name="field21_text" value="0" accesskey="k" tabindex="6" />
円(税込)</td>
</tr>
<tr>
<th><p>送料</p></th>
<td>
<input type="text" id="sender-postage1" name="field22_text" value="0" accesskey="k" tabindex="7" />
円(税込)</td>
</tr>
</table>
<table summary="合計金額" class="inner-02 m20">
<tr class="gokei">
<th>合計金額</th>
<td>
<input type="text" id="sender-goukei" name="field29_text" value="0" accesskey="k" tabindex="14" />
円(税込)</td>
</tr>
</table>
-------------------------------------------------------------------
<script type="text/javascript">
/* <![CDATA[ */
function keisan(){
/* 商品 */
var price1 = document.form.field16_text.options[document.form.field16_text.selectedIndex].value;
var field21_text= parseInt(price1)*1470 ;
/* 小計 */
document.form.field21_text.value = addFigure(field21_text);
/*送料 */
var price1p = 0;
if ( price1 < 2 ) {
price1p = price1 * 290;
} else {
price1p = 0;
}
var field22_text = parseInt(price1p);
if ( field21_text > 5000 ) {
field22_text = 0;
}
document.form.field22_text.value = addFigure(field22_text);
/* 合計 */
var field29_text = parseInt(field21_text);
document.form.field29_text.value = addFigure(field29_text);
function addFigure(str) {
var num = new String(str).replace(/,/g, "");
while(num != (num = num.replace(/^(-?\d+)(\d{3})/, "$1,$2")));
return num;
}
}
/* ]]> */
</script>
-------------------------------------------------------------------
しかし、「'document.form.field16_text'はNullまたはオブジェクトではありません」とエラーが出てしまいます。
アンダーバーは利用できないのでしょうか?どこに問題があるのかお教えください。
どうぞ宜しくお願いいたします。
No.1ベストアンサー
- 回答日時:
ご提示のソースだと<form>が見当たりませんが、単純な転記ミスでしょうか?
タグを設置しても、document.formでは取得できないでしょうから多分エラーになります。
document.forms[0] などを使用するか、idを振っておいて
document.getElementById( id ) で取得すればよろしいかと。
でも、ご提示のソースにはinputにそれぞれidがあるので、そちらで直接取得してしまったほうが簡単ですね。
あと、計算方法が不明ですが、なんだかおかしな結果になるようです。
多分、1部のときのみ送料(\290)がかかり、2部以上は無料なんだろうと想像しますが、なんで単価がHTML表示では\1,000なのに計算では\1,470なんだろうとかいう突っ込みは別にしても、現状では合計が合計にはなっていないみたい。
ソースはそのままにして、とりあえずこんな感じでどうでしょうか。
<script type="text/javascript">
/* <![CDATA[ */
function keisan(){
/* 商品 */
var price1 = document.getElementById('item1').value;
var field21_text = parseInt(price1)*1470;
/* 小計 */
document.getElementById('sender-shoukei1').value = addFigure(field21_text);
/*送料 */
var price1p = price1<2?(price1*290):0; //←置き換えました
// ↓現状のロジックなら不要(price1p>5000にならない)
//var field22_text = parseInt(price1p);
//if ( field21_text > 5000 ) {
//field22_text = 0;
//}
document.getElementById('sender-postage1').value = addFigure(price1p);
/* 合計 */
document.getElementById('sender-goukei').value = addFigure(field21_text + price1p);
function addFigure(str) {
var num = new String(str).replace(/,/g, "");
while(num != (num = num.replace(/^(-?\d+)(\d{3})/, "$1,$2")));
return num;
}
}
/* ]]> */
</script>
fujillinさん ありがとうございます。
初歩的なミスをおかしていました。
<form>タグは入れていたのですが、
「name=form」がありませんでした。
formを追加したら動作いたしました。
計算方法についても参考にさせていただきます。
ありがとうございました。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- JavaScript 以前の質問だと、どの条件でも配列が表示されてしまいます。 1 2022/07/09 11:40
- JavaScript EasyUIのSubGrid(jquery)におけるObjectに入れた連想配列について 1 2022/05/02 11:21
- JavaScript sessionStorageを調べています。 1 2023/06/20 12:41
- JavaScript セレクトボックスを2つ選択してメッセージなどを表示するには。~運賃検索プログラムを完成させたい~ 1 2022/07/22 11:10
- JavaScript セレクトボックスで配列を呼び出したい。 1 2022/07/08 20:14
- JavaScript switch文のswitch(n)の部分を複数の値にするか、if文に変えてほしいです。 1 2022/07/27 17:18
- AJAX JavascriptからPHPへのAjax通信でnullが返ってくる 3 2022/08/03 22:00
- JavaScript セレクトボックスを2つ設けて選択して初めてメッセを表示 1 2022/07/27 12:15
- JavaScript javascript作成してます。ラジオボタンで判定するコードを書いてます。 1 2023/07/18 11:03
- JavaScript javascriptのちょっとした動作不良(原因は突き止めたのですが) 1 2023/06/15 19:58
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
プルダウン 項目が多いので先頭...
-
html selectの内容を初期値に戻す
-
JavaScriptで特定csvファイルを...
-
Selectボックスの幅を自動で広...
-
プルダウン選択の連動
-
プルダウンとテキストの連動
-
javascriptでの2つのプルダウン...
-
CSVファイルを読みこみ、プルダ...
-
jQuery セレクトボックスで選択...
-
JQuery selectが反映されない
-
<textarea>にプルダウンを表示...
-
現在時刻を取得してフォームのs...
-
【javascript・PHP】プルダウン...
-
セレクトの値を取得できない
-
正規表現で複数マッチ条件で悩...
-
マウスをブラウザの外に出した...
-
<JavaScript>tableタグを入力不...
-
return trueとreturn falseの用...
-
hiddenのvalueの値を変えたい
-
【jsp/Java】チェックボックス...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
プルダウン 項目が多いので先頭...
-
Selectボックスの幅を自動で広...
-
jQuery セレクトボックスで選択...
-
Selectの中身をfor文で入れる
-
html selectの内容を初期値に戻す
-
CSVファイルを読みこみ、プルダ...
-
JQuery selectが反映されない
-
セレクトの値を取得できない
-
セレクトを全て選択されていな...
-
セレクトメニューで選択された...
-
ブラウザの戻るボタンを押した...
-
javascriptでselectボックスの<...
-
リストボックスの項目の順番を...
-
現在時刻を取得してフォームのs...
-
onFocusOutが複数回呼ばれる!
-
セレクトボックスで現在選択さ...
-
【javascript・PHP】プルダウン...
-
document.form で nullまたは...
-
プルダウンで現在の年月日を取...
-
onchange等のイベントハンドラ...
おすすめ情報