# Dynamic total form field from other text fields

**URL:** <https://discuss.hotwired.dev/t/dynamic-total-form-field-from-other-text-fields/842>\
**Category:** General\
**Created:** [July 5, 2019, 7:22pm UTC](https://discuss.hotwired.dev/t/dynamic-total-form-field-from-other-text-fields/842 "2019-07-05T19:22:34Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![spacerobotTR](https://yyz1.discourse-cdn.com/flex027/user_avatar/discuss.hotwired.dev/spacerobottr/32/223_2.png) [@spacerobotTR](https://discuss.hotwired.dev/u/spacerobotTR)\
**Post date:** [July 5, 2019, 7:22pm UTC](https://discuss.hotwired.dev/t/dynamic-total-form-field-from-other-text-fields/842/1 "2019-07-05T19:22:34Z")

</div>

Say I have quantity, price, discount and total field. What I want to do is dynamically update the total field on change when any of the other fields are changed.

So the total field would be = quantity \* price - discount.

How do you do math like this in a stimulus controller?

---

<div class="post-metadata">

**Author:** ![Tim](https://yyz1.discourse-cdn.com/flex027/user_avatar/discuss.hotwired.dev/tim/32/48_2.png) [@Tim](https://discuss.hotwired.dev/u/Tim)\
**Post date:** [July 5, 2019, 8:44pm UTC](https://discuss.hotwired.dev/t/dynamic-total-form-field-from-other-text-fields/842/2 "2019-07-05T20:44:10Z")

</div>

This is _super_ quick and dirty, and I didn’t test it, but basically: You want to create targets for the quantity, price and total fields, so you can access them. Then, you want to create an action that’s called when the value changes. In the controller, when you connect you want to do the calculation straight away for whatever values already exist.

HTML:

```
<form [...] data-controller='total'>
  <input [...] data-target='quantity' data-action='recalculate'>
  <input [...] data-target='price' data-action='recalculate'>
  <input [...] data-target='total'>
</form>

```

Controller:

```
import { Controller } from "stimulus"
export default class extends Controller {
  static targets = ["quantity", "price", "total"]

  connect() {
    this.recalculate()
  }

  recalculate() {
    this.totalTarget.value = this.quantityTarget.value * this.priceTarget.value
  }
}

```

You may need to convert strings to numbers, or do error checking in case of null, but I’ll leave that as an exercise for the reader.

---

<div class="post-metadata">

**Author:** ![spacerobotTR](https://yyz1.discourse-cdn.com/flex027/user_avatar/discuss.hotwired.dev/spacerobottr/32/223_2.png) [@spacerobotTR](https://discuss.hotwired.dev/u/spacerobotTR)\
**Post date:** [July 5, 2019, 10:46pm UTC](https://discuss.hotwired.dev/t/dynamic-total-form-field-from-other-text-fields/842/3 "2019-07-05T22:46:13Z")

</div>

Thank you! I’ll play around with this. I appreciate the pointers.

---

<div class="post-metadata">

**Author:** ![spacerobotTR](https://yyz1.discourse-cdn.com/flex027/user_avatar/discuss.hotwired.dev/spacerobottr/32/223_2.png) [@spacerobotTR](https://discuss.hotwired.dev/u/spacerobotTR)\
**Post date:** [July 6, 2019, 3:41am UTC](https://discuss.hotwired.dev/t/dynamic-total-form-field-from-other-text-fields/842/4 "2019-07-06T03:41:32Z")

</div>

I was able to get it working based on your suggestions. Thanks!

One more item I am interested in. Say I dynamically add rows with items on them that all have totals. How would I then sum all of those totals together to get a master subtotal?

---

<div class="post-metadata">

**Author:** ![Tim](https://yyz1.discourse-cdn.com/flex027/user_avatar/discuss.hotwired.dev/tim/32/48_2.png) [@Tim](https://discuss.hotwired.dev/u/Tim)\
**Post date:** [July 9, 2019, 2:11pm UTC](https://discuss.hotwired.dev/t/dynamic-total-form-field-from-other-text-fields/842/5 "2019-07-09T14:11:13Z")

</div>

In this case I’d use child controllers. There are a few threads here on how to do that effectively, but [this discussion should probably help](https://discuss.hotwired.dev/t/finding-targets-within-another-target/263).