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

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

新規登録して質問してみよう
ただいま回答率
87.20%
Ruby on Rails 6

Ruby on Rails 6は、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

受付中

動的に追加される入力フォームで金額を自動計算したい

aki_aki
aki_aki

総合スコア3

Ruby on Rails 6

Ruby on Rails 6は、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0回答

0評価

1クリップ

180閲覧

投稿2022/01/08 15:26

編集2022/01/12 10:55

前提・実現したいこと

簡単な売り上げ計算機能的なやつを作成しています。そこでrailsのcocoonで動的な入力フォームを作成して、javascriptで金額入力欄に数字を打てば消費税や合計額が表示されるようにしたいです。最初の入力フォームに数字を打つと自動で計算ができるのですが、追加した入力フォームフォームでは計算されません。わかる方がいればぜひ教えていただきたいです。

発生している問題・エラーメッセージ

エラーメッセージ

該当のソースコード

javascript

window.addEventListener('load', () => { const moneyInput = document.getElementById("money-cost"); const subtotalOutput = document.getElementById("subtotal-cost"); const taxOutput = document.getElementById("tax-cost") const totalOutput = document.getElementById("total-cost"); moneyInput.addEventListener("input", () => { subtotalOutput.value = moneyInput.value; const taxValue = Math.floor(subtotalOutput.value * 0.1); taxOutput.value = taxValue; const value_result = subtotalOutput.value; const totalNumber = (Math.floor(parseInt(taxValue) + parseInt(value_result))); totalOutput.value = totalNumber; }) });

rails

new.html.erb <%= form_with model: @cost_pdf, class: 'form', local: true do |f| %> <%= render 'layouts/error_messages', model: f.object %> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>見積書</title> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous"> </head> <body class="bg-light"> <div class="container"> <div class="py-5 text-center"> <h2>見積書</h2> </div> <div class="order-md-1"> <form class="needs-validation" novalidate> <div class="row"> <div class="col-md-6 mb-3"> <label for="familyName">会社名</label> <%= f.text_field :company_name, class:"form-control", placeholder:"会社名 必須", list:"kenpo1" %> <datalist id="kenpo1"> <% CostPdf.where(user_id: current_user.id).each do |cost_pdf| %> <option><%= cost_pdf.company_name %></option> <% end %> </datalist> </div> <div class="col-md-6 mb-3"> <label for="givenName">郵便番号</label> <%= f.text_field :postal_code, class:"form-control", placeholder:"郵便番号 (例)000-0000 必須", list:"kenpo2" %> <datalist id="kenpo2"> <% CostPdf.where(user_id: current_user.id).each do |cost_pdf| %> <option><%= cost_pdf.postal_code %></option> <% end %> </datalist> </div> </div> <div class="row"> <div class="col-md-5 mb-3"> <label for="pref">住所</label> <%= f.text_field :address, class:"form-control", placeholder:"住所 必須", list:"kenpo3" %> <datalist id="kenpo3"> <% CostPdf.where(user_id: current_user.id).each do |cost_pdf| %> <option><%= cost_pdf.address %></option> <% end %> </datalist> </div> <div class="col-md-4 mb-3"> <label for="city">電話番号</label> <%= f.text_field :tell, class:"form-control", placeholder:"電話番号 (例)00000000000 必須", list:"kenpo4" %> <datalist id="kenpo4"> <% CostPdf.where(user_id: current_user.id).each do |cost_pdf| %> <option><%= cost_pdf.tell %></option> <% end %> </datalist> </div> <div class="col-md-3 mb-3"> <label for="zip">FAX</label> <%= f.text_field :fax, class:"form-control", placeholder:"FAX (例)00000000000 任意", list:"kenpo5" %> <datalist id="kenpo5"> <% CostPdf.where(user_id: current_user.id).each do |cost_pdf| %> <option><%= cost_pdf.fax %></option> <% end %> </datalist> </div> </div> <div class="row"> <div class="col-md-6 mb-3"> <label for="familyName">受渡期日</label> <%= f.date_field :delivery_date, class:"form-control", value:"", placeholder:"任意" %> <label for="familyName">納入場所</label> <%= f.text_field :delivery_location, class:"form-control", placeholder:"任意" %> </div> <div class="col-md-6 mb-3"> <label for="givenName">支払条件</label> <%= f.text_field :payment_terms, class:"form-control", placeholder:"任意" %> <label for="givenName">有効期限</label> <%= f.date_field :expiration_date, class:"form-control", placeholder:"任意" %> </div> </div> <div class="mx-auto"> <%= f.fields_for :quotations do |f| %> <%= render "quotation_fields", f: f %> <% end %> </div> <div id="detail-association-insertion-point"></div> <div class="mt-2"> <%= link_to_add_association "追加", f, :quotations, class: 'add_fields' %> </div> <div class="row"> <div class="col-md-5 mb-3"> <label for="familyName">小計</label> <%= f.text_field :subtotal, class:"form-control", id:"subtotal-cost", placeholder:"必須", readonly: true %> </div> <div class="col-md-4 mb-3"> <label for="givenName">消費税</label> <%= f.text_field :tax, class:"form-control", id:"tax-cost", placeholder:"必須", readonly: true %> </div> <div class="col-md-3 mb-3"> <label for="givenName">合計</label> <%= f.text_field :total, class:"form-control", id:"total-cost", placeholder:"必須", readonly: true %> </div> </div> <div class="row"> <div class="col-md-6 mb-3"> <label for="familyName">顧客名</label> <%= f.text_field :cliant_name, class:"form-control", placeholder:"顧客名 必須", list:"kenpo" %> <datalist id="kenpo"> <option value="">顧客</option> <% Work.where(user_id: current_user.id).each do |work| %> <option><%= work.cliant_name %></option> <% end %> </datalist> </div> <div class="col-md-6 mb-3"> <label for="address">備考</label> <%= f.text_area :memo, class:"form-control", placeholder:"任意" %> </div> </div> <hr class="mb-4"> <%= f.submit "作成", class:"btn btn-primary btn-lg btn-block" %> </form> </div> </div> </div> <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.slim.min.js" integrity="sha384-Qg00WFl9r0Xr6rUqNLv1ffTSSKEFFCDCKVyHZ+sVt8KuvG99nWw5RNvbhuKgif9z" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-fQybjgWLrvvRgtW6bFlB7jaZrFsaBXjsOMm/tB9LTS58ONXgqbR9W8oWht/amnpF" crossorigin="anonymous"></script> </body> <% end %>

rails

_quotation_fields.html.erb <div class="nested-fields"> <td class="td-fixed-spoon"> <span class="box-spoon" id='spoon-auto' data-spoon='0'></span> </td> <td class="td-fixed-amount"> <div class="row"> <div class="col-md-6 mb-3"> <label for="familyName">品名</label> <%= f.text_field :product_name, class:"form-control", placeholder:"必須" %> <label for="familyName">数量</label> <%= f.text_field :quantity, class:"form-control", placeholder:"任意" %> <label for="givenName">単位</label> <%= f.text_field :unit, class:"form-control", placeholder:"任意" %> </div> <div class="col-md-6 mb-3"> <label for="givenName">単価</label> <%= f.text_field :unit_price, class:"form-control", placeholder:"任意" %> <label for="givenName">金額</label> <%= f.text_field :money, class:"form-control", id:"money-cost", placeholder:"必須" %> <label for="familyName">備考</label> <%= f.text_field :remarks, class:"form-control", placeholder:"任意" %> </div> </div> </td> <td class="td-fixed-unit"> <span class="box-unit" id='unit-auto' data-unit='0'></span> </td> <td class="td-fixed-delete"> <!-- 削除ボタン --> <%= link_to_remove_association "削除", f %> </td> </tr> </div>

おそらく id:"money-cost"の部分が1つしかないとみなされていると思うのでフォームが追加されたときにもidが増えていくようにしないといけないと思います。どうすればいいでしょうか?
_quotation_fields.html.erb のdivの中にtdがあるのは元々tabelを使っていてイア修正をしている途中だからです。
id:"money-cost"の部分は金額を入力したタイミングで小計、消費税、合計が表示されるようにしたいです。

補足情報(FW/ツールのバージョンなど)

ruby 2.6.5, rails 6.0.0

良い質問の評価を上げる

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

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

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

気になる質問をクリップする

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

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

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

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

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

m.ts10806

2022/01/08 23:20

>_quotation_fields.html.erb 全体構造分かりませんが、divの中にtdがあったりそもそもHTML構造おかしくなりませんか? >id:"money-cost"の部分が1つしかないとみなされていると思うので これについてはその通りで「ID」の意味が持つ通り、ページ内に重複は不可です。 どのタイミングで計算したいかによりますが、JavaScriptの発火をclassにすればidに依存しないつくりにできるのでは(「入力した」なら動的要素なのでdocumentからイベント付与する必要はありますが)

まだ回答がついていません

会員登録して回答してみよう

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

ただいまの回答率
87.20%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問

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

Ruby on Rails 6

Ruby on Rails 6は、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。