Thiết kế website giá rẻ

Question

i went over the internet and i can’t find solution so maybe more eyes can help.

I have form for charity donation. It uses thymeleaf templating engine.
I passed needed objects to the view using Model as below:

` @GetMapping(“/donate”)
public String showDonationForm(Model model) {

    List<CategoryDTO> categoryDTOs = categoryService.findAll();
    List<InstitutionDTO> institutionDTOs = institutionService.findAll();

    log.info("{}", categoryDTOs);

    model.addAttribute("donation", new DonationDTO());;
    model.addAttribute("categories", categoryDTOs);
    model.addAttribute("institutions", institutionDTOs);

    return "form";
}`

I have DTO objects passed to the view. Both categoryDTO and InstitutionDTO have @Data annotation so getters and setters are there. See Category DTO:

`@Data
public class CategoryDTO {

private Long id;

private String name;

private List<DonationDTO> donationDTOs = new ArrayList<>();

}`

When template engine renders the view my categories are rendered correctly: like on given snippet:

`<!DOCTYPE html>

Document








  <div class="slogan container container--90">
    <div class="slogan--item">
      <h1>
        Oddaj rzeczy, których już nie chcesz<br />
        <span class="uppercase">potrzebującym</span>
      </h1>

      <div class="slogan--steps">
        <div class="slogan--steps-title">Wystarczą 4 proste kroki:</div>
        <ul class="slogan--steps-boxes">
          <li>
            <div><em>1</em><span>Wybierz rzeczy</span></div>
          </li>
          <li>
            <div><em>2</em><span>Spakuj je w worki</span></div>
          </li>
          <li>
            <div><em>3</em><span>Wybierz fundację</span></div>
          </li>
          <li>
            <div><em>4</em><span>Zamów kuriera</span></div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</header>

<section class="form--steps">
  <div class="form--steps-instructions">
    <div class="form--steps-container">
      <h3>Ważne!</h3>
      <p data-step="1" class="active">
        Uzupełnij szczegóły dotyczące Twoich rzeczy. Dzięki temu będziemy
        wiedzieć komu najlepiej je przekazać.
      </p>
      <p data-step="2">
        Uzupełnij szczegóły dotyczące Twoich rzeczy. Dzięki temu będziemy
        wiedzieć komu najlepiej je przekazać.
      </p>
      <p data-step="3">
       Wybierz jedną, do
        której trafi Twoja przesyłka.
      </p>
      <p data-step="4">Podaj adres oraz termin odbioru rzeczy.</p>
    </div>
  </div>

  <div class="form--steps-container">
    <div class="form--steps-counter">Krok <span>1</span>/4</div>

    <form th:action="@{/donations/donate}" th:method="post" th:object="${donation}">
      <!-- STEP 1: class .active is switching steps -->
      <div data-step="1" class="active">
        <h3>Zaznacz co chcesz oddać:</h3>

        <div class="form-group form-group--checkbox" th:each="category : ${categories}">
          <label>
            <input type="checkbox" name="categories" th:field="*{categoryDTOs}" th:value="${category.id}" />
            <span class="checkbox"></span>
            <span class="description" th:text="${category.name}"></span>
          </label>
        </div>

        <div class="form-group form-group--checkbox">
          <label>
            <input
                    type="checkbox"
                    name="categories"
                    value="clothes-to-use"
            />
            <span class="checkbox"></span>
            <span class="description"
            >ubrania, które nadają się do ponownego użycia</span
            >
          </label>
        </div>

        <div class="form-group form-group--checkbox">
          <label>
            <input
                    type="checkbox"
                    name="categories"
                    value="clothes-useless"
            />
            <span class="checkbox"></span>
            <span class="description">ubrania, do wyrzucenia</span>
          </label>
        </div>

        <div class="form-group form-group--checkbox">
          <label>
            <input type="checkbox" name="categories" value="toys" />
            <span class="checkbox"></span>
            <span class="description">zabawki</span>
          </label>
        </div>

        <div class="form-group form-group--checkbox">
          <label>
            <input type="checkbox" name="categories" value="books" />
            <span class="checkbox"></span>
            <span class="description">książki</span>
          </label>
        </div>

        <div class="form-group form-group--checkbox">
          <label>
            <input type="checkbox" name="categories" value="other" />
            <span class="checkbox"></span>
            <span class="description">inne</span>
          </label>
        </div>

        <div class="form-group form-group--buttons">
          <button type="button" class="btn next-step">Dalej</button>
        </div>
      </div>

      <!-- STEP 2 -->
      <div data-step="2">
        <h3>Podaj liczbę 60l worków, w które spakowałeś/aś rzeczy:</h3>

        <div class="form-group form-group--inline">
          <label>
            Liczba 60l worków:
            <input type="number" name="bags" step="1" min="1" th:field="${donation.quantity}"/>
          </label>
        </div>

        <div class="form-group form-group--buttons">
          <button type="button" class="btn prev-step">Wstecz</button>
          <button type="button" class="btn next-step">Dalej</button>
        </div>
      </div>

      <!-- STEP 4 -->
      <div data-step="3">
        <h3>Wybierz organizacje, której chcesz pomóc:</h3>

        <div class="form-group form-group--checkbox" th:each="institution : ${institutions}">
          <label>
            <input type="radio" name="organization" th:value="${institution.id}" th:field="*{institutionDTO}"/>
            <span class="checkbox radio"></span>
            <span class="description">
    <div class="title" th:text="${institution.name}"></div>
    <div class="subtitle" th:text="${institution.description}"></div>
  </span>
          </label>
        </div>

        <div class="form-group form-group--buttons">
          <button type="button" class="btn prev-step">Wstecz</button>
          <button type="button" class="btn next-step">Dalej</button>
        </div>
      </div>


      <!-- STEP 5 -->
      <div data-step="4">
        <h3>Podaj adres oraz termin odbioru rzecz przez kuriera:</h3>

        <div class="form-section form-section--columns">
          <div class="form-section--column">
            <h4>Adres odbioru</h4>
            <div class="form-group form-group--inline">
              <label> Ulica <input type="text" name="address" th:field="${donation.street}"/> </label>
            </div>

            <div class="form-group form-group--inline">
              <label> Miasto <input type="text" name="city" th:field="${donation.city}"/> </label>
            </div>

            <div class="form-group form-group--inline">
              <label>
                Kod pocztowy <input type="text" name="postcode" th:field="${donation.zipCode}"/>
              </label>
            </div>

            <div class="form-group form-group--inline">
              <label>
                Numer telefonu <input type="phone" name="phone" th:field="${donation.phoneNumber}"/>
              </label>
            </div>
          </div>

          <div class="form-section--column">
            <h4>Termin odbioru</h4>
            <div class="form-group form-group--inline">
              <label> Data <input type="date" name="data" th:field="${donation.pickUpDate}"/> </label>
            </div>

            <div class="form-group form-group--inline">
              <label> Godzina <input type="time" name="time" th:field="${donation.pickUpTime}"/> </label>
            </div>

            <div class="form-group form-group--inline">
              <label>
                Uwagi dla kuriera
                <textarea name="more_info" rows="5" th:field="${donation.pickUpComment}"></textarea>
              </label>
            </div>
          </div>
        </div>
        <div class="form-group form-group--buttons">
          <button type="button" class="btn prev-step">Wstecz</button>
          <button type="button" class="btn next-step">Dalej</button>
        </div>
      </div>

      <!-- STEP 6 -->
      <div data-step="5">
        <h3>Podsumowanie Twojej darowizny</h3>

        <div class="summary">
          <div class="form-section">
            <h4>Oddajesz:</h4>
            <ul>
              <li>
                <span class="icon icon-bag"></span>
                <span class="summary--text"
                  >4 worki ubrań w dobrym stanie dla dzieci</span
                >
              </li>

              <li>
                <span class="icon icon-hand"></span>
                <span class="summary--text"
                  >Dla fundacji "Mam marzenie" w Warszawie</span
                >
              </li>
            </ul>
          </div>

          <div class="form-section form-section--columns">
            <div class="form-section--column">
              <h4>Adres odbioru:</h4>
              <ul>
                <li>Prosta 51</li>
                <li>Warszawa</li>
                <li>99-098</li>
                <li>123 456 789</li>
              </ul>
            </div>

            <div class="form-section--column">
              <h4>Termin odbioru:</h4>
              <ul>
                <li>13/12/2018</li>
                <li>15:40</li>
                <li>Brak uwag</li>
              </ul>
            </div>
          </div>
        </div>

        <div class="form-group form-group--buttons">
          <button type="button" class="btn prev-step">Wstecz</button>
          <button type="submit" class="btn">Potwierdzam</button>
        </div>
      </div>
    </form>
  </div>
</section>

<div th:insert="~{commonviewparts/footer :: footer}">
</div>

<script th:src="@{/js/app.js}"></script>

`

In given view I have a problem with step 1. First i have thymeleaf each loop iteration over categories. Then below i have hardcoded categories for comparison. When i click on dynamically generated category it does not get checked, but when i click on hardcoded it works fine. When i submit form and i don’t click any category and when i log DonationDTO then it shows that all categories were checked. I have converters setup correctly since i don’t get any parsing exception.
Can you help me telling what might be wrong?

I was googling over the internet to find solution. I checked file in chatgpt to check if there is no typos. And still no solution.

Looked at related questions.

Thiết kế website giá rẻ

Danh mục

Thymeleaf each loop with checkbox tags not checking values