Clojure (Hiccup): How do I know which submit button is clicked on a form?
I have a form using the hiccup framework. It looks like this:
(form-to {:enctype "multipart/form-data"}
[:post "/add-data"]
...
(submit-button {:class "btn"} "Save")
(submit-button {:class "btn} "Clone"))
How do I know which submit button has been clicked without using jQuery / javascript?
I have looked at the Hiccup documentation for request
. But the item request
doesn't contain much documentation.
source to share
A complete example looks like this:
(ns myapp.routes.home
(:use [hiccup core form])
(:require [compojure.core :refer :all]))
(defn quick-form [& [name message error]]
(html
(form-to {:enctype "multipart/form-data"}
[:post "/form-out"]
(text-field "Hello")
(submit-button {:class "btn" :name "submit"} "Save")
(submit-button {:class "btn" :name "submit"} "Clone"))))
Note that using the same name for both submit buttons allows you to do a simple search for the submit key in the result card.
(defroutes home-routes
(GET "/form-in" [] (quick-form))
(POST "/form-out" [:as request] (str (request :multipart-params))))
When you open the next page:
http://localhost:3000/form-in
And filling out the form, the result from the POST route:
{"submit" "Save", "Hello" "hello2"}
BTW, I found an old helpful post on how the request structure is structured in Compojure, so it makes it easier to destruct this in Clojure code.
source to share
submit-button
generate HTML element <input type="text" ...>
. You can add "name" and "value" attributes to them:
(submit-button {:name "button" :value "save" :class "btn"} "Save")
(submit-button {:name "button" :value "clone" :class "btn"} "Clone")
and recognize it in your server side code. In your case lib-noir is used. But the latest version of lib-noir no longer provides utilities for pull requests and encourages people to use other libraries like Compojure or bare Ring.
Basically you need to: - make sure your server side application uses wrap-params
Ring middleware - if the Save button is clicked, your server side handler [:post "/add-data"]
should get a hashmap like this:
{:http-method :post
:uri "/add-data"
:form-params {"button" "save"
;; other form data as key/value pairs
;; where: key is input element "name" attribute and value is input element "value" attribute
...
}
...}
Hopefully you can figure out how to find the value you want on a map like this.
More detailed reading:
source to share