質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

87.38%

自動計算フォームを作成

受付中

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 1,413

score 13

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

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

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

<form action="#" name="form1">
<table border="1" style="background-color: #ffffff;">
<tr>
<td>商品画像</td>
<td>商品1</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;
}
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • masaru_666

    2019/07/22 09:28 編集

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

    キャンセル

  • m.ts10806

    2019/07/22 10:01

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

    キャンセル

  • masaru_666

    2019/07/22 12:27

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

    キャンセル

回答 1

+2

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

<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>商品1</td>
<td class="right">106.22</td>
<td><input type="text" name="goods1" size="2" value="0"></td>
</tr>
<tr>
<td>商品画像</td>
<td>商品1</td>
<td class="right">106.22</td>
<td><input type="text" name="goods2" size="2" value="0"></td>
</tr>
<tr>
<td>商品画像</td>
<td>商品1</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>

2合計の数値が一定以上の時(10000)Aの数値を0にする

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

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

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 87.38%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る