「activehashのデータ属性」と「ファームに入力した値」をかけた値をデータ保存したい

前提・実現したいこと

① 現状、私が考えてるもの(※下の概要にございます)どのように進めて行けば良いか
② もう一つ候補として別のやり方も考えております。そちらの方が良いのか、もしくは他に別の実装の仕方等あればご指摘いただきたいです。

(別のやり方で考えているのは１つ目のプルタブ選択の段階で２つ目のプルタブを変化させ、２つ目のAcitvhash内にPFCの情報を直接持たせると言うものです。具体的には１つ目のプルタブにで”鶏むね”選択、２つ目"100g"選択したパターンと、1つ目"牛バラ"→２つ目"100g"とした時でPFCの表示をかえる)
こちらは一番下の「参考にしたもの」欄にURL載せております

【作成しているものの概要】
現在,栄養表示を簡単に見られるようなレシピ投稿サイト制作中です。

その一つのポイントと考えているのは、「レシピ投稿の際に、入力されたメイン食材１〜４つ」からタンパク質/脂質/炭水化物を計算してそれらを合算したものを円グラフにするというものです

☆メイン食材入力フォームはこのような感じです
https://gyazo.com/ec69c919326c7e8809c6ae7eba860a97

具体的な、レシピ投稿の際の流れとしましては
① メイン食材を選択する（activehaseのプルタブ）
② その食材の分量をフォームに入力(現状、form_withです。ただしこちらは計算に使うのみで保存はしません)
③ (①②)を選択/記入すると自動計算され、横の「タンパク質/脂質/炭水化物」に表示される
(こちらもデータベース保存しません)
④　他にも使用したメイン食材があれば同様に【魚】【野菜・豆】【乳製品】登録。(なければ登録しなくてもOK)
⑤ 最後に登録した食材のPFCを合算して表示（画像一番下の欄です）
⑥ レシピ投稿の際にこの⑤で算出された「合計:タンパク質/脂質/炭水化物」をデータベース保存

☆選択した食材/分量、各カテゴリーごとのPFCは保存しません。
最後の⑥で算出された総合値のみデータベース保存で考えております

該当のソースコード

1つ目のプルタブのコードです(idとnameの値のみ表示させ、"multiple"の値と２つ目で入力された”分量”でPFC計算する予定でした)

ruby
1class Meet < ActiveHash::Base
2  self.data = [
3      { id: 1, name: '--' },
4      { id: 2, name: '鶏ムネ(皮あり)', multiple_p:0.19, multiple_f:0.1, multiple_c: 0 },
5      { id: 3, name: '鶏ムネ(皮なし)', multiple_p:0.22, multiple_f:0.02, multiple_c: 0 },
6      { id: 4, name: 'ささみ', multiple_p:0.23, multiple_f:0, multiple_c: 0 },
7      { id: 5, name: '鶏もも', multiple_p:0.16, multiple_f:0.14, multiple_c: 0 },
8      { id: 6, name: '牛モモ', multiple_p:0.2, multiple_f:0.04, multiple_c: 0  },
9      { id: 7, name: '牛バラ', multiple_p:0.14, multiple_f:0.32, multiple_c: 0  },
10   ]
11
12      include ActiveHash::Associations
13      has_many :menus
14
15end

こちらはほぼ同じフォームが４つ続いております

ruby
1<div class="menus-ingredients">
2        <div class="weight-bold-text">
3          メイン食材
4          <span class="indispensable">必須</span>
5        </div>
6        <div class="ingredients-container">
7          <div class="category_id">
8            <p>【肉類】</p>
9            <%= f.collection_select(:meet_id, Meet.all, :id, :name, {}, {class:"meet-select"}) %>
10          </div>
11          <div class="quantity">
12            <p>分量</p>
13              <div class="quantity_sum">
14                <%= f.text_field :hoge, class:"quantity-input", id:"quan-input", placeholder:"例）150" %>
15                <div>g</div>
16              </div>
17          </div>
18          <div class="protein">
19            <p>タンパク質</p>
20            <%# <span id="pro-content"></span>g %>
21            <div class="num-display">g</div>
22          </div>
23          <div class="lipid">
24            <p>脂質</p>
25            <div class="num-display">g</div>
26          </div>
27          <div class="carbo">
28            <p>炭水化物</p>
29            <div class="num-display">g</div>
30          </div>
31        </div>
32        <div class="ingredients-container">
33          <div class="category_id">
34            <p>【魚類】</p>
35            <%= f.collection_select(:hoge, Meet.all, :id, :name, {}, {class:"meet-select"}) %>
36          </div>
37          <div class="quantity">
38            <p>分量</p>
39              <div class="quantity_sum">
40                <%= f.text_field :hoge, class:"quantity-input", id:"quan-input", placeholder:"例）150" %>
41                <div>g</div>
42              </div>
43          </div>
44          <div class="protein">
45            <p>タンパク質</p>
46            <%# <span id="pro-content"></span>g %>
47            <div class="num-display">g</div>
48          </div>
49          <div class="lipid">
50            <p>脂質</p>
51            <div class="num-display">g</div>
52          </div>
53          <div class="carbo">
54            <p>炭水化物</p>
55            <div class="num-display">g</div>
56          </div>
57        </div>
58        <div class="ingredients-container">
59          <div class="category_id">
60            <p>【野菜・豆】</p>
61            <%= f.collection_select(:hoge, Meet.all, :id, :name, {}, {class:"meet-select"}) %>
62          </div>
63          <div class="quantity">
64            <p>分量</p>
65              <div class="quantity_sum">
66                <%= f.text_field :hoge, class:"quantity-input", id:"quan-input", placeholder:"例）150" %>
67                <div>g</div>
68              </div>
69          </div>
70          <div class="protein">
71            <p>タンパク質</p>
72            <%# <span id="pro-content"></span>g %>
73            <div class="num-display">g</div>
74          </div>
75          <div class="lipid">
76            <p>脂質</p>
77            <div class="num-display">g</div>
78          </div>
79          <div class="carbo">
80            <p>炭水化物</p>
81            <div class="num-display">g</div>
82          </div>
83        </div>
84        <div class="ingredients-container">
85          <div class="category_id">
86            <p>【乳製品・卵】</p>
87            <%= f.collection_select(:hoge, Meet.all, :id, :name, {}, {class:"meet-select"}) %>
88          </div>
89          <div class="quantity">
90            <p>分量</p>
91              <div class="quantity_sum">
92                <%= f.text_field :hoge, class:"quantity-input", id:"quan-input", placeholder:"例）150" %>
93                <div>g</div>
94              </div>
95          </div>
96          <div class="protein">
97            <p>タンパク質</p>
98            <%# <span id="pro-content"></span>g %>
99            <div class="num-display">g</div>
100          </div>
101          <div class="lipid">
102            <p>脂質</p>
103            <div class="num-display">g</div>
104          </div>
105          <div class="carbo">
106            <p>炭水化物</p>
107            <div class="num-display">g</div>
108          </div>
109        </div>
110        <div class="ingredients-container">
111          <div class="category_id">
112            <p></p>
113          </div>
114          <div class="quantity">
115            <p></p>
116              <div class="quantity_sum">
117              </div>
118          </div>
119          <div class="total-container">
120            <div class="protein">
121              <p>合計:タンパク質</p>
122              <%# <span id="pro-content"></span>g %>
123              <div class="num-display">g</div>
124            </div>
125            <div class="lipid">
126              <p>合計:脂質</p>
127              <div class="num-display">g</div>
128            </div>
129            <div class="carbo">
130              <p>合計:炭水化物</p>
131              <div class="num-display">g</div>
132            </div>
133          </div>
134        </div>
135

試したこと参考にさせていただいたもの

https://qiita.com/AKI3/items/97b61de4ac6bd2c0941e#%E3%83%9E%E3%82%A4%E3%82%B0%E3%83%AC%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB%E3%81%AE%E7%B7%A8%E9%9B%86

https://oshiete.goo.ne.jp/qa/8737139.html

２つ目の代替案で考えているもの
https://qiita.com/jnchito/items/59a5f6bea3d7be84b839

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

ここにより詳細な情報を記載してください。

行動規範の内容に同意します

回答1件

自己解決

なんとかactivehash内のデータ取り出せそうです！解決しました

ruby
1const selectMeet = document.getElementById("meet");
2    selectMeet.addEventListener('change', function (){
3      var meetSelectBox = document.getElementById("meet");
4      var dataNumP = meetSelectBox.options[ meetSelectBox.selectedIndex].getAttribute("data-protein");
5      var dataNumF = meetSelectBox.options[ meetSelectBox.selectedIndex].getAttribute("data-fat");
6      var dataNumC = meetSelectBox.options[ meetSelectBox.selectedIndex].getAttribute("data-carbo");
7      console.log(dataNumP);
8      console.log(dataNumF);
9      console.log(dataNumC);
10})

ruby
1class Meet < ActiveHash::Base
2  self.data = [
3      { id: 1, name: '--' },
4      { id: 2, name: '鶏ムネ(皮あり)', protein: 0.19, fat: 0.1, carbo: 0 },
5      { id: 3, name: '鶏ムネ(皮なし)', protein: 0.22, fat: 0.02, carbo: 0 },
6      { id: 4, name: 'ささみ', protein: 0.23, fat: 0, carbo: 0 },
7      { id: 5, name: '鶏もも', protein: 0.16, fat: 0.14, carbo: 0 },
8      { id: 6, name: '牛モモ', protein: 0.2, fat: 0.04, carbo: 0  },
9      { id: 7, name: '牛バラ', protein: 0.14, fat: 0.32, carbo: 0  },
10   ]
11
12      include ActiveHash::Associations
13      has_many :menus
14
15end