2

Can anyone explain how is thymeleaf's submit button working in the following code?

 <!DOCTYPE html>   
 <html lang="en" xmlns:th="http://www.thymeleaf.org"           

  layout:decorator="master">
<head>
    <title>LoginPage</title>
</head>

<body>
 <h1>Login Page</h1>
<!-- Any content you put in the div fragment below will appear on the page-->
<div class="container">
<div class="row">
    <div class="span8">

    <P th:if="${loginError}" >Wrong User or Password</P>

        <form th:action="@{/new}" th:Object="${messageForm}"        
                    method="post">
        <label for ="User">User Name</label>
        <input type="text" th:field="*{user}"/><br/>
        <label for ="password">Password</label>
        <input type="password"  th:field="*{password}"/><br/>
        <input type="submit" value="Login" />
        </form>

        </div>
</div>
</div>
 </body>
 </html>
Improve this question
2
  • 1
    I switched tag scala with java. There's nothing on thymeleaf suggesting scala's being a prerequisite. It looks like a standard java framework to me. Commented Mar 21, 2013 at 8:31
  • 1
    Can you please provide some more context? I guess there must be one or more java classes underlying this template, from which to evaluate the custom template expressions (like ${messageForm} or @{/new}). Could you point out a tutorial or doc from which this template was taken? Commented Mar 21, 2013 at 8:37

2 Answers 2

Reset to default
1

<form> template gets rendered as a standard form with a POST call made when you submit.
What's added by the framework is that form fields are dynamically bound to an underlying object, referenced by the th:Object="${messageForm}" attribute.

Each field is computed calling a method on the messageForm object with the th:field="*{password}" syntax.

Finally, the POST call is made to the URL created by evaluating the th:action="@{/new}" attribute, probably relative to the current page.

Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

YEah this is i really want
1

Everything that follows can be found in this Getting Started page.

From a first look I'd say that the <form> template gets rendered as a standard form with a POST call made when you submit.

It's not much more than plain http/html. What's added by the framework is that form fields are dynamically bound to an underlying object, referenced by the th:Object="${messageForm}" attribute.

Each field is computed calling a method on the messageForm object with the th:field="*{password}" syntax.

Finally, the POST call is made to the URL created by evaluating the th:action="@{/new}" attribute, probably relative to the current page.

Let's make an example to clarify.
Suppose we have

  • an object messageForm of type MessageForm with attributes
  • user of type String
  • password of type String
  • the template is being rendered as a web page with url "http://my.app.com/login"

What you probably get by submitting the button, is that the messageForm object will have its attributes user and password set to the values you put in the form's corresponding fields, and than the form will call a "http://my.app.com/new" page, or similar, passing the messageForm object from which to check the credentials for login operation...

If you didn't already, I strongly recommend you to read the documentation on thymeleaf website before going on.

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.