dropdown

templates/order/get_new.html

@@ -1,4 +1,4 @@
-<form x-show="open" hx-post="order/new" hx-swap="outerHTML">
+<form x-show="open" hx-post="order/new" hx-swap="outerHTML" x-data="{cakes:[]}" id="new_cake_form">
     <div>
         <label for="firstname">First Name</label>
         <input type="text" id="firstname" name="firstname" required value="">
@@ -19,6 +19,31 @@
         <label for="paid">Paid</label>
         <input type="number" id="paid" name="paid" step="0.01" min="0" value="">
     </div>
+    <select id="dropdown">
+        <option value="">Select an item...</option>
+        {{range .Cakes}}
+        <option value="{{.ID}}">{{.Name}}</option>
+        {{end}}
+    </select>
     <button type="button" x-on:click="open = false">Cancel</button>
     <button type="submit">Submit</button>
+    <script>
+        const dropdown = document.getElementById("dropdown")
+        dropdown.addEventListener("change", function () {
+            const label = document.createElement('label')
+            label.innerText = this.options[this.selectedIndex].text
+            label.setAttribute("for", "cake[" + this.value + "]")
+            const input = document.createElement('input')
+            input.setAttribute("type", "number")
+            input.setAttribute("id", "cake[" + this.value + "]")
+            input.setAttribute("name", "cake[" + this.value + "]")
+            input.setAttribute("value", 1)
+            const selected = document.createElement('div')
+            selected.appendChild(label)
+            selected.appendChild(input)
+            console.log(selected)
+            const parent = document.getElementById("new_cake_form")
+            parent.appendChild(selected)
+        })
+    </script>
 </form>

templates/order/post_new.html

@@ -1,5 +1,6 @@
 <div id="order_confirmation" hx-get="new_order.html" hx-swap="outerHTML">
-    <button hx-get="new_order.html" hx-target="#order_confirmation" hx-swap="outerHTML" x-on:click="open = false">Back</button>
-    <button hx-get="new_order.html" hx-target="#order_confirmation" hx-swap="outerHTML">New Order</button>
+    <button hx-get="order/new" hx-target="#order_confirmation" hx-swap="outerHTML"
+        x-on:click="open = false">Back</button>
+    <button hx-get="order/new" hx-target="#order_confirmation" hx-swap="outerHTML">New Order</button>
     {{.Status}}
 </div>