🙏 Help: Thymeleaf with KoliBri + Spring Boot - Submit Forms #6700

deleonio · 2024-08-05T08:39:58Z

deleonio
Aug 5, 2024
Maintainer

Summary

I'm working in a project with Thymeleaf with KoliBri + Spring Boot, and I follow the steps to submit form and try to get the value of submit, but don't have, when you can, give me information how I can handle with value during submit please.

I'm using kol-form, kol-inputs and kol-button, get the form and do assignment in kol-form._on property to execute the callback. Thanks in advance for your help.

Additional information

No response

Example

No response

deleonio · 2024-08-05T08:45:14Z

deleonio
Aug 5, 2024
Maintainer Author

Thank you for your interesting question.

Unfortunately, we have not yet had a Thymeleaf scenario with KoliBri. But I believe that here, as with PHP or JSF, the HTML is rendered from the server and sent to the browser. Is that correct?

If so, then it is probably a static scenario. Here we recommend activating the experimental mode first. This manages the value handling in forms.

If possible, could you provide a reproduction example?

The form structure should look schematically as follows:

<html>
  <head>
    <meta name="kolibri" content="experimental-mode=true" />
  </head>
  <body>
    <form method="post" action="...">
      <kol-input-text _label="firstname"></kol-input-text>
      <kol-button _label="Submit" _type="submit"></kol-button>
    </form>
  </body>
</html>

FYI - @sdvg: Do you have any additions here?

0 replies

sdvg · 2024-08-05T08:54:04Z

sdvg
Aug 5, 2024
Collaborator

To me it's unclear whether this is about static form submission (i.e. handling the form data on the server) or using a client side callback function (as mentioned with the "kol-form._on property"). Could we clarify the scenario and maybe see some sample code?

0 replies

michaelodeus · 2024-08-05T10:43:02Z

michaelodeus
Aug 5, 2024

Hi, thanks for the help.
This is my first contact with KoliBri, so I did some tests with both scenarios kol-form._on and form but didn't work after I added <meta name="kolibri" content="experimental-mode=true" /> tag, it's worked.

<form id="loginForm" th:action="@{/login}" method="post">
      <kol-input-text _id="username" _type="text" _label="Username" _name="username"></kol-input-text>

      <kol-input-password _id="password" _label="Passwort" _name="password" ></kol-input-password>

      <kol-button  class="w-100" _type="submit" _label="Login" _variant="primary"></kol-button>
</form>

<script>
        const loginForm = document.querySelector("#loginForm");
        loginForm.addEventListener("submit", (event) => {
            console.log(event, "submit");
        });
</script>

1 reply

michaelodeus Aug 5, 2024

After adding this tag worked, but I received this message in the browser console.

What are the risks of using experimental mode in the real application?

deleonio · 2024-08-06T14:07:15Z

deleonio
Aug 6, 2024
Maintainer Author

Hi, please be patient. We had a sprint change today and haven't had time to respond yet.

Please check if you have duplicate fields in the DOM. Could you provide us with an excerpt from the browser's HTML?

We will then check if the duplicate rendering of IDs is caused by KoliBri.

2 replies

deleonio Aug 6, 2024
Maintainer Author

We analyze the redundant ID and will optimize that: #6706

michaelodeus Aug 7, 2024

Hi, thanks for the answer and help.
In the DOM I can see two inputs with the same IDs, I attached an excerpt of kol-input-text generation for username input.

deleonio · 2024-08-06T14:51:36Z

deleonio
Aug 6, 2024
Maintainer Author

@michaelodeus: I think the feature associated form fields is ready and we will discuss in the team to make this feature productive.

@sdvg: Let's complete the feature for the next sprint.

1 reply

michaelodeus Aug 7, 2024

Okay, thanks for all your hard work.

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

🙏 Help: Thymeleaf with KoliBri + Spring Boot - Submit Forms #6700

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Replies: 5 comments 4 replies

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

Select a reply

🙏 Help: Thymeleaf with KoliBri + Spring Boot - Submit Forms #6700

deleonio Aug 5, 2024 Maintainer

Summary

Additional information

Example

Replies: 5 comments · 4 replies

deleonio Aug 5, 2024 Maintainer Author

sdvg Aug 5, 2024 Collaborator

michaelodeus Aug 5, 2024

michaelodeus Aug 5, 2024

deleonio Aug 6, 2024 Maintainer Author

deleonio Aug 6, 2024 Maintainer Author

michaelodeus Aug 7, 2024

deleonio Aug 6, 2024 Maintainer Author

michaelodeus Aug 7, 2024

deleonio
Aug 5, 2024
Maintainer

Replies: 5 comments 4 replies

deleonio
Aug 5, 2024
Maintainer Author

sdvg
Aug 5, 2024
Collaborator

michaelodeus
Aug 5, 2024

deleonio
Aug 6, 2024
Maintainer Author

deleonio Aug 6, 2024
Maintainer Author

deleonio
Aug 6, 2024
Maintainer Author