【Laravel5.8】2つのFormを使ってリアルタイム計算をしたい
2つのFormを使ってリアルタイム計算をしたい。
使用するのはjQuery。
数量（quantity）と単価（bill_unit_price）が、
<td><span class="ans"></span></td>
に出てくる感じで。
<!--数量--> <td><input type="text" name="quantity[]" value="{{$val->quantity}}" class="validate quantity" id="quantity"></td> <!--単価--> <td><input type="text" name="bill_unit_price[]" value="{{ceil($val->bill_unit_price)}}" class="validate bill_unit_price" id="bill_unit_price"></td> <!--金額--> <td><span class="ans"></span></td>
$(".quantity,.bill_unit_price").on('keyup',function() { var $_t = $( this ).parent().parent(); var quantityVal = $_t.find( '.quantity' ); var num01 = isNaN(quantityVal.val()) ? 0 : quantityVal.val(); var bill_unitVal = $_t.find( '.bill_unit_price' ); var num02 = isNaN(bill_unitVal.val()) ? 0 : bill_unitVal.val(); var sum = num01 * num02; $_t.find('.ans').html(sum);
三項演算子で数字かどうかを確かめて、数字以外が入ったら0を出すようにしています。
isNaN(quantityVal.val()) ? 0 : quantityVal.val();
難しかったのは、
var $_t = $( this ).parent().parent();
あたり。その辺は、以下の説明を参考にします。
まずvar $_t = $( this ).parent();の部分ですが、ここで取得できているタグはtdタグになります。
例えばquantityを変更したときにとれるのは、input quantityを囲っているtdタグになります。
ですから、書かれているコードのbill_unitValをfindしにいっても、該当のtdタグの中には存在しないのでそもそもbill_unitValの要素を取得できません。
対策はvar $_t = $( this ).parent().parent();として、さらなる親要素を検索開始の位置にしてやることです。
ただそれだけでは、ansのクラスを持つタグの中身を書き換えるようになっているため、関係ない行の値まで書き換わってしまうようになります。
この対策は、$_tをそれぞれのレコードのルート要素として取得しているので、ansについても$_t.find(‘.ans’).html(sum);のように、起点からfindを使って影響範囲を絞ることで解決できるでしょう。
引用：
https://qa.sejuku.net/questions/1117/
