Display costs and requirements for selected activity in select fields via Stimulus + fetch

1 files changed, 17 insertions, 0 deletions

diff --git a/app/javascript/controllers/activity_select_controller.js b/app/javascript/controllers/activity_select_controller.js
new file mode 100644
index 0000000..2acfcdd
--- /dev/null
+++ b/app/javascript/controllers/activity_select_controller.js
@@ -0,0 +1,17 @@
+import { Controller } from "stimulus";
+
+export default class extends Controller {
+  static targets = [ "select", "output" ];
+
+  connect() {
+    this.load();
+  }
+
+  load() {
+    fetch(`/activities/${this.selectTarget.value}/costs_and_requirements`)
+      .then(response => response.text())
+      .then(html => {
+        this.outputTarget.innerHTML = html;
+      });
+  }
+}