dropdown

controller/new_order.go

@@ -18,5 +18,9 @@ func (c *Controller) postNewOrder(w http.ResponseWriter, r *http.Request) {
 
 func (c *Controller) getNewOrder(w http.ResponseWriter, r *http.Request) {
 	fmt.Println("received Get request: ", r)
-	_ = c.tmpl["order/get_new"].Execute(w, nil)
+	type cake struct {
+		Name string
+		ID   int
+	}
+	_ = c.tmpl["order/get_new"].Execute(w, struct{ Cakes []cake }{Cakes: []cake{cake{"Hello", 1}, cake{"World", 2}}})
 }

public/index.html

@@ -6,6 +6,7 @@
     <title>IROON</title>
     <meta name="viewport" content="width=device-width,initial-scale=1" />
     <script src="htmx-2.04.js"></script>
+    <script src="script.js"></script>
     <script defer src="alpine-3.14.8.js"></script>
 </head>
 
@@ -16,7 +17,7 @@
     <main>
         <div id="new_order" x-data="{open:false}">
             <button x-on:click="open = !open" x-show="!open">New Order</button>
-            <form hx-get="/order/new" hx-swap="innerHTML" hx-trigger="load"></form>
+            <form hx-get="/order/new" hx-swap="outerHTML" hx-trigger="load"></form>
         </div>
     </main>
 </body>

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>