セレクトボックスの値から料金を計算したい

質問

お世話になります。

現在、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

fujillin · ベストアンサー

ご提示のソースだと<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を追加したら動作いたしました。
計算方法についても参考にさせていただきます。

ありがとうございました。