Applicative form in Yesod

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.