自動計算フォームを作成

Question

JavaScript初心者ですが自動計算フォームを作成しようと考えています。

自分なりに調べて見ましたがどうしてもわからないことがたくさんあり実現方法をご教授いただけると助かります。
１ラジオボタンの数値を合計からマイナスする
２合計の数値が一定以上の時（仮で１００００以上）送料の数値を-１００から０にする
３合計金額の特定の条件の時priceの値を変える方法
４合計した時の数値の小数点の切り捨て

調べても自動計算までしか出て来ずに困っております。

<form action="#" name="form1">
<table border="1" style="background-color: #ffffff;">
<tr>
<td>商品画像</td>
<td>商品１</td>
<td align="right">106.22</td>
<td><input type="text" name="goods1" onChange="keisan()" size="2"></td>
<input type="hidden" name="field1" size="8" value="0">
</tr>
<tr>
<td>商品画像</td>
<td>商品2</td>
<td align="right">106.22</td>
<td><input type="text" name="goods2" onChange="keisan()" size="2"></td>
<input type="hidden" name="field2" size="8" value="0">
</tr>
<tr>
<td>商品画像</td>
<td>商品3</td>
<td align="right">106.22</td>
<td><input type="text" name="goods3" onChange="keisan()" size="2"></td>
<input type="hidden" name="field3" size="8" value="0">
</tr>
<tr>
<td>
<input name="" type="radio" value=""> 送料(100)
<input name="" type="radio" value=""> 速達(500)
</td>
</tr>
<tr>
<td align="right" colspan="3">合計</td>
<td><input type="text" name="field_total1" size="8" value="0"> 円</td>
</tr>
</table>

</form>

function keisan(){
var price1 = document.form1.goods1.value * 106.22;
document.form1.field1.value = price1;
var price2 = document.form1.goods2.value * 106.22;
document.form1.field2.value = price2;
var price3 = document.form1.goods3.value * 106.22;
document.form1.field3.value = price3;
var total1 = price1 + price2 + price3;
document.form1.field_total1.value = total1;
}

Comments

[m.ts10806]

>java初心者
細かいのですが、JavaとJavaScriptは全く別物なので、表記・表現にはお気を付けください。

[m.ts10806]

あと、今回はPHPは関係ないのでは？タグを外しておいてください。
また、コードはインデントをきちんとつけておいてください（Web上のサービスもありますができれば構文チェックやフォーマット機能の付いたエディタをお使いください）

[mather]

質問の冒頭に「java初心者ですが」とありますが、質問の内容はJavaScriptですので誤解を招かないようにJavaScriptに修正してください。
JavaとJavaScriptは全くの別物です。JavaScriptを略してJavaにすることはありません。

[mather]

具体的な計算例を記載してください。
すべて「商品1」となっていますが、上から順番にどのような入力値になったときに結果としてはどのような値を表示したいのか例を示してください。

ところで条件の中に「合計の数値が一定以上の時（１００００）Aの数値を０にする」とありますが、Aの値とは、もしかして送料無料とかの意味でしょうか？
どんなことをしようとしているのか隠さずにイメージを共有したほうが的確な回答が得られやすいですよ。

[masaru_666]

すみませんでした。以後気をつけます。

[mather]

「１０００までの時は」とは何が1000なのですか？
「price1の数値を１０４.２２」とはどういうことでしょうか？
おそらく「商品価格が1000円未満の場合は（何らかの手数料）が104.22円として計算する」などの意図なのでしょうが…。諸々説明が足りていないので不明なことが多いのです…。

[masaru_666]

文章を少し変えました。
カートに入れて計算した時の合計金額が５０００円までは商品の単価が一つ初期の１０４.２２で計算されて、合計金額が５０００以上は商品単価が１０６.２２で、更に合計金額が２００００以上になると商品単価を１１２.22に数値を任意の値に変化させるといった考えなのですが、説明が下手で申しわせありません・・・

[mather]

さっきから基準となる数字までごちゃごちゃに変わってますが、なぜそんなことになるんでしょうか…。
新しい単語が出てきましたね。「カートに入れて計算した時の合計金額」はこの画面に表示されている「合計」とは異なるものでしょうか？
これが同じ場合、「まず104.22で計算したら5000円以上になったので106.22で計算し直す」というわけのわからない状態が生まれます。

[masaru_666]

再度調べたところ自分が実現したいことと近いものを見つけたものの原理がわからずで困っております。
以下のサイトの計算フォームのようなものを作りたいのですが、どうしたら良いでしょうか？

[m.ts10806]

まず「自分が実現したいこと」をしっかりかためられるよう強くすすめます。

[masaru_666]

そうですよね。
もう一度実現したいことを明確にできるように考え直します。

Answer 1

エスパー的な拡大解釈をしてもここまで

<script>
window.addEventListener('DOMContentLoaded', function(e){
  [].forEach.call(document.querySelectorAll('#form1 input'),function(x){
    x.addEventListener('input',function(e){
      var rate=106.22;
      var v1 = parseFloat(document.querySelector('#form1 [name=goods1]').value );
      var v2 = parseFloat(document.querySelector('#form1 [name=goods2]').value );
      var v3 = parseFloat(document.querySelector('#form1 [name=goods3]').value );
      var v4 = parseFloat(document.querySelector('#form1 [name=r1]:checked').value);
      var total1 = (v1 + v2 + v3)*rate - v4;
      var total2 = Math.floor(total1);
      document.querySelector('#form1 [name=field_total1]').value=total2;
    });
  })
//document.form1.field_total1.value = total1;
});

</script>
<form id="form1">
<table border="1">
<tr>
<td>商品画像</td>
<td>商品１</td>
<td class="right">106.22</td>
<td><input type="text" name="goods1" size="2" value="0"></td>
</tr>
<tr>
<td>商品画像</td>
<td>商品１</td>
<td class="right">106.22</td>
<td><input type="text" name="goods2" size="2" value="0"></td>
</tr>
<tr>
<td>商品画像</td>
<td>商品１</td>
<td class="right">106.22</td>
<td><input type="text" name="goods3" size="2" value="0"></td>
</tr>
<tr>
<td>
<label><input name="r1" type="radio" value="0" checked> --</label>
<label><input name="r1" type="radio" value="100"> A(100)</label>
<label><input name="r1" type="radio" value="500"> B(500)</label>
</td>
</tr>
<tr>
<td class="right" colspan="3">合計</td>
<td><input type="text" name="field_total1" size="8" value="0" value="0"> 円</td>
</tr>
</table>
</form>

２合計の数値が一定以上の時（１００００）Aの数値を０にする

「Aの数値」の意味不明→未選択にすればいい？

合計の数値が(中略)変化させる方法

「合計の数値」とは入力した3つの数値？
100と150と200以外のときはどうするの？