Applicative form in Yesod - haskell

Question

I have defined Wff data type:
data Wff = P Text | Ng Wff | Box Wff | Cnj [Wff] | Dsj [Wff]
deriving (Eq)
instance Show Wff where
show (P name) = unpack $ name
show (Ng f) = "-" ++ show f
show (Box f) = "[]" ++ show f
show (Cnj[]) = show " "
show (Cnj[f]) = show f
show (Cnj (f:fs)) = "(" ++ show f ++ "&" ++ show (Cnj fs) ++ ")"
show(Dsj[]) = show " "
show(Dsj[f]) = show f
show (Dsj (f:fs)) = "(" ++ show f ++ "v" ++ show (Dsj fs) ++ ")"
A function that translates a string to Wff:
foo :: String -> Wff
foo xs | elem '|' xs = Dsj (map foo (splitOn "|" xs))
foo xs | elem '&' xs = Cnj (map foo (splitOn "&" xs))
foo xs | head xs == '~' = Ng (foo . tail $ xs)
foo xs | take 2 xs == "[]" = Box (foo . tail . tail $ xs)
foo xs | otherwise = P (pack xs)
I am trying to write an app, where a user submits a string in a form and gets show of a Wff which corresponds to the string typed by the user. Here's my code:
data App = App
mkYesod "App" [parseRoutes|
/ HomeR GET
/person PersonR POST
|]
instance Yesod App
instance RenderMessage App FormMessage where
renderMessage _ _ = defaultFormMessage
instance YesodJquery App
wffAForm :: AForm Handler Wff
wffAForm = (foo. unpack) <$> areq textField "Model" Nothing
wffForm :: Html -> MForm Handler (FormResult Wff, Widget)
wffForm = renderTable wffAForm
getHomeR :: Handler Html
getHomeR = do
(widget, enctype) <- generateFormPost wffForm
defaultLayout
[whamlet|
<p> Type your formula </p>
<form method=post action=#{PersonR} enctype=#{enctype}>
^{widget}
<button>Submit
|]
postPersonR :: Handler Html
postPersonR = do
((result, widget), enctype) <- runFormPost wffForm
case result of
FormSuccess wff -> defaultLayout[whamlet| |<p>#{show wff}|]
main :: IO ()
main = warp 3000 App
The code compiles and the result is a web-page with the form, but the submit button doesn't do anything. What's wrong with it?
UPD: I looked at the terminal and it is seen that POSt requests don't even been sending for some reason when I click Submit button.

Answer 1

The submit button should be properly indented under the form element or add a form attribute to it.
...
defaultLayout
[whamlet|
<p> Type your formula </p>
<form method=post action=#{PersonR} enctype=#{enctype}>
^{widget}
<button>Submit
|]
...
or
...
defaultLayout
[whamlet|
<p> Type your formula </p>
<form #myForm method=post action=#{PersonR} enctype=#{enctype}>
^{widget}
<button type=submit form="myForm">Submit
|]
...
^{widget} should also be indented relative to the form tag.