Динамические поля Thymeleaf, Spring boot

Question

Я хочу динамически создать список объектов (часть).В основном, данные должны быть введены в поля, затем нажата кнопка, чтобы добавить их в список, и, в конце концов, отправить вместе со всей формой.Я пытался создать HTML с помощью jquery, но он не был представлен.Невозможно отправить форму только для обновленного списка, так как остальная часть формы будет удалена.Если только я не смогу создать форму в модале для этой цели.Есть ли какой-нибудь способ в чистом тимелифе?Приносим свои извинения за форматирование кода.Надеюсь, я объяснил свою проблему достаточно хорошо.

РЕДАКТИРОВАТЬ:

Я добился определенного прогресса в том, что я хочу достичь.Поэтому объяснение теперь должно быть проще.В Job Controller у меня есть Get Request jobView (), который создает список из трех новых пустых объектов и связывается с формой.Чего я хотел бы добиться, так это динамически добавлять эти объекты в список вместо фиксированного числа.Допустим, есть ремонт автомобиля, и пользователь может динамически добавлять детали в зависимости от того, сколько их было использовано.

КОНТРОЛЛЕР РАБОТЫ:

    @Controller
public class JobController {
  @Autowired
  JobRepository jobRepository;
  @Autowired
  PartRepository partRepository;

  @GetMapping("/job/new")
  public String jobView(Model model) {
    Job job = new Job();
    for (int i = 0; i < 3; i++) {
      job.addPart(new Part());
    }
    model.addAttribute("job", job);
    return "newJob";
  }

  @GetMapping("/job/manage")
  public String jobManageView(Model model) {
    //model.addAttribute("job", new Job());
    model.addAttribute("jobs", jobRepository.findAll());
    //System.out.println("hello" + Arrays.asList(new CarService().getAllCars().get(1)));
    return "manageJobs";
  }

  @PostMapping("/job/new/add")
  public String jobAdd(@ModelAttribute Job job, RedirectAttributes redirectAttributes) {
    try {
      System.out.println(job.getParts());
      partRepository.saveAll(job.getParts());
      jobRepository.save(job);
      redirectAttributes.addFlashAttribute("message", "Success. Record updated");
      redirectAttributes.addFlashAttribute("alertClass", "alert-success");
      return "redirect:/job/new";
    } catch (Exception e) {
      e.printStackTrace();
      redirectAttributes.addFlashAttribute("message", "Failed. Please check the data");
      redirectAttributes.addFlashAttribute("alertClass", "alert-danger");
      return "redirect:/job/new";
    }

  }

HTML:

                <form action="#" class="form-control form-control-sm" th:action="'new/add'" th:object="${job}"
                                  method="post">
                                <!-- Custom Form Start -->
                                <div class="row">
                                    <div class="col-sm-6">
                                        <div class="card">
                                            <div class="card-header bg-secondary text-white">
                                                <a data-toggle="collapse" href="#collapse-example" aria-expanded="true"
                                                   aria-controls="collapse-example" id="heading-example" class="d-block">
                                                    <i class="fa fa-chevron-down pull-right"></i>
                                                    Job Info
                                                </a>
                                            </div>
                                            <div id="collapse-example" class="collapse show"
                                                 aria-labelledby="heading-example">
                                                <div class="card-body">
                                                    <div class="form-group row">
                                                        <label for="description" class="col-2 col-form-label">Description</label>
                                                        <div class="col-10">
                                                        <textarea th:field="*{description}" class="form-control" type="text"
                                                                  id="description"></textarea>
                                                        </div>
                                                    </div>

                                                    <div class="form-group row">
                                                        <label for="dateInput" class="col-2 col-form-label">Date</label>
                                                        <div class="col-10">
                                                            <input th:field="*{date}" class="form-control" type="date"
                                                                   id="dateInput">
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-sm-6">
                                        <div class="card">
                                            <div class="card-header bg-secondary text-white">
                                                Labour
                                            </div>
                                            <div class="card-body">
                                                <div class="form-group row">
                                                    <label for="repairTime" class="col-2 col-form-label">Time</label>
                                                    <div class="col-10">
                                                        <input class="form-control" id="repairTime" th:field="*{repairTime}"
                                                               type="number"
                                                               value="">
                                                    </div>
                                                </div>
                                                <div class="form-group row">
                                                    <label for="rate" class="col-2 col-form-label">Rate</label>
                                                    <div class="col-10">
                                                        <input th:field="*{rate}" class="form-control" type="text" value=""
                                                               id="rate">
                                                    </div>
                                                </div>
                                                <div class="form-group row">
                                                    <label for="total" class="col-2 col-form-label">Total</label>
                                                    <div class="col-10">
                                                        <input class="form-control" id="total" th:field="*{total}" type="text"
                                                               value="">
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-sm-6">
                                        <div class="card">
                                            <div class="card-header bg-secondary text-white">
                                                Car Info
                                            </div>
                                            <div class="card-body">
                                                <div class="form-group row">
                                                    <label for="reg" class="col-2 col-form-label">Reg</label>
                                                    <div class="col-10">
                                                        <input class="form-control" id="reg" th:field="*{car.reg}" type="text"
                                                               value="">
                                                    </div>
                                                </div>
                                                <div class="form-group row">
                                                    <label for="make" class="col-2 col-form-label">Make</label>
                                                    <div class="col-10">
                                                        <input class="form-control" id="make" th:field="*{car.make}" type="text"
                                                               value="">
                                                    </div>
                                                </div>
                                                <div class="form-group row">
                                                    <label for="model" class="col-2 col-form-label">Model</label>
                                                    <div class="col-10">
                                                        <input class="form-control" id="model" th:field="*{car.model}" type="text"
                                                               value="">
                                                    </div>
                                                </div>
                                                <div class="form-group row">
                                                    <label for="year" class="col-2 col-form-label">Year</label>
                                                    <div class="col-10">
                                                        <input class="form-control" id="year" th:field="*{car.year}" type="text"
                                                               value="">
                                                    </div>
                                                </div>
                                                <div class="form-group row">
                                                    <label for="mileage" class="col-2 col-form-label">Mileage</label>
                                                    <div class="col-10">
                                                        <input class="form-control" id="mileage" th:field="*{car.mileage}"
                                                               type="text"
                                                               value="">
                                                    </div>
                                                </div>
                                                <div class="form-group row">
                                                    <label for="color" class="col-2 col-form-label">Color</label>
                                                    <div class="col-10">
                                                        <input class="form-control" id="color" th:field="*{car.color}" type="text"
                                                               value="">
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-sm-6">
                                        <div class="card">
                                            <div class="card-header bg-secondary text-white">
                                                Parts
                                                <input type="radio" class="radio-gr">
                                            </div>
                                            <div class="card-body">
                                                <div class="form-group row ">
                                                    <label for="partName" class="col-2 col-form-label">Name</label>
                                                    <div class="col-10">
                                                        <input class="form-control"
                                                               id="partName"
                                                               type="text"
                                                               value="">
                                                    </div>
                                                </div>

                                                <div class="form-group row">
                                                    <label for="quantity" class="col-2 col-form-label">Quantity</label>
                                                    <div class="col-10">
                                                        <input class="form-control" type="number" value="" id="quantity">
                                                    </div>
                                                </div>
                                                <div class="form-group row">
                                                    <label for="invoiceNumber" class="col-2 col-form-label">Invoice Number</label>
                                                    <div class="col-10">
                                                        <input class="form-control" type="text" value="" id="invoiceNumber">
                                                    </div>
                                                </div>
                                                <div class="form-group row">

                                                    <label for="price" class="col-2 col-form-label">Price</label>
                                                    <div class="col-10">
                                                        <input class="form-control" type="text" value="" id="price">
                                                    </div>
                                                </div>
                                                <div class="form-group row">
                                                    <label for="supplier" class="col-2 col-form-label">Supplier</label>
                                                    <div class="col-10">
                                                        <input class="form-control" type="text" value="" id="supplier">
                                                    </div>
                                                </div>
                                                <div class="form-group row">
                                                    <label for="brand" class="col-2 col-form-label">Brand</label>
                                                    <div class="col-10">
                                                        <input class="form-control" type="text" value="" id="brand">
                                                    </div>
                                                </div>

                                            </div>
                                            <div class="btn-group ">

                                                <button type="button" class="btn-warning" data-toggle="collapse"
                                                        data-target="#collapse1">
                                                    Parts list
                                                    <i class="nav-icon fa fa-arrow-circle-down"></i>
                                                </button>
                                                <button class="btn-success" th:onclick="'javascript:addToPartsList();'"
                                                        type="button">
                                                    Add to list
                                                    <i class="nav-icon fa fa-plus-circle"></i>
                                                </button>
                                            </div>
                                            <div id="collapse1" class="panel-collapse collapse">
                                                <p>hello</p>
                                                <div class="form-group row " id="partsListContainer">
                                                    <div class="card-body" th:each="part, itemStat :*{parts}">
                                                        <input class="form-control"
                                                               th:field="*{parts[__${itemStat.index}__].name}"
                                                               type="text" value=""/>
                                                        <input class="form-control"
                                                               th:field="*{parts[__${itemStat.index}__].quantity}"
                                                               type="text" value=""/>
                                                        <input class="form-control"
                                                               th:field="*{parts[__${itemStat.index}__].invoiceNumber}"
                                                               type="text" value=""/>
                                                        <input class="form-control"
                                                               th:field="*{parts[__${itemStat.index}__].price}"
                                                               type="text" value=""/>
                                                        <input class="form-control"
                                                               th:field="*{parts[__${itemStat.index}__].supplier}"
                                                               type="text" value=""/>
                                                        <input class="form-control"
                                                               th:field="*{parts[__${itemStat.index}__].brand}"
                                                               type="text" value=""/>
                                                    </div>
                                                </div>

                                            </div>

                                        </div>
                                    </div>
                                </div>

                                <div class="col-sm-6">
                                    <div class="card">
                                        <div class="card-header bg-secondary text-white">
                                            Customer
                                        </div>
                                        <div class="card-body">
                                            <div class="form-group row">
                                                <label for="customerName" class="col-2 col-form-label">Name</label>
                                                <div class="col-10">
                                                    <input class="form-control" id="customerName" th:field="*{customer.name}"
                                                           type="text"
                                                           value="">
                                                </div>
                                            </div>
                                            <div class="form-group row">
                                                <label for="customerSurname" class="col-2 col-form-label">Surname</label>
                                                <div class="col-10">
                                                    <input class="form-control" id="customerSurname" th:field="*{customer.surname}"
                                                           type="text"
                                                           value="">
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div>
                                    <button type="reset" value="Reset" class="btn btn-danger">Reset form
                                    </button>
                                    <button type="submit" value="Submit" class="btn btn-success">Add new job</button>
                                </div>
                            </form>

РАБОТА:

    @Entity
@Table(name = "job")
@SecondaryTables({
                         @SecondaryTable(name = "labour")
                 })
public class Job {
  @Id
  @Column
  @GeneratedValue(strategy = GenerationType.AUTO)
  private Integer id;

  @Column
  private String description;

  @Column
  private String date;

  @OneToMany
  @JoinColumn(name = "JOBID", referencedColumnName = "ID")
  private List<Part> parts;

  @ManyToOne(cascade = CascadeType.ALL)
  @JoinColumn(name = "CARID", referencedColumnName = "ID")
  private Car car;

  @ManyToOne(cascade = CascadeType.ALL)
  @JoinColumn(name = "CUSTOMERID", referencedColumnName = "ID")
  private Customer customer;

  @Column(name = "repairTime", table = "labour")
  private int repairTime;

  @Column(name = "rate", table = "labour")
  private double rate;

  @Column(name = "total", table = "labour")
  private double total;

  public Job() {
    this.parts = new ArrayList<>();
  }


  public Integer getId() {
    return id;
  }

  public void setId(Integer id) {
    this.id = id;
  }

  public String getDescription() {
    return description;
  }

  public void setDescription(String description) {
    this.description = description;
  }

  public String getDate() {
    return date;
  }

  public void setDate(String date) {
    this.date = date;
  }


  public int getRepairTime() {
    return repairTime;
  }

  public void setRepairTime(int repairTime) {
    this.repairTime = repairTime;
  }

  public double getRate() {
    return rate;
  }

  public void setRate(double rate) {
    this.rate = rate;
  }

  public double getTotal() {
    return total;
  }

  public void setTotal(double total) {
    this.total = total;
  }

  public Car getCar() {
    return car;
  }

  public void setCar(Car car) {
    this.car = car;
  }

  public Customer getCustomer() {
    return customer;
  }

  public void setCustomer(Customer customer) {
    this.customer = customer;
  }

  public List<Part> getParts() {
    return parts;
  }

  public void addPart(Part part) {
    this.parts.add(part);
  }

  public String getPartsName() {
    String name = "";
    for (Part p : parts
    ) {
      name += "|| Invoice: " + p.getInvoiceNumber() + ", " + "name: " + p.getName() + " ";
    }
    return name;
  }

  public void setParts(List<Part> parts) {
    this.parts = parts;
  }
}

Answer 1

Проблема решена.После исследования HTML его поля ввода преобразуются в <input class="form-control" value="" id="parts0.name" name="parts[0].name" type="text"> Так что для динамического создания входных данных в JQuery мне пришлось следовать этому шаблону.Окончательный код будет выглядеть так:

   var index = 1;

function addToPartsList() {
    var name = $("#partName").val();
    var quantity = $("#quantity").val();
    var invoice = $("#invoiceNumber").val();
    var price = $("#price").val();
    var supplier = $("#supplier").val();
    var brand = $("#brand").val();

    $(
        '<div class="col-10" >' +
        ' <input class="form-control" id="parts' + index + '.name" name="parts[' + index + '].name" type="text" value="' + name + '"> ' +
        '<input class="form-control" id="parts' + index + '.quantity" name="parts[' + index + '].quantity" type="text" value="' + quantity + '"> ' +
        '<input class="form-control" id="parts' + index + '.invoiceNumber" name="parts[' + index + '].invoiceNumber" type="text" value="' + invoice + '"> ' +
        '<input class="form-control" id="parts' + index + '.price" name="parts[' + index + '].price" type="text" value="' + price + '"> ' +
        '<input class="form-control" id="parts' + index + '.supplier" name="parts[' + index + '].supplier" type="text" value="' + supplier + '"> ' +
        '<input class="form-control" id="parts' + index + '.brand" name="parts[' + index + '].brand" type="text"' +
        ' value="' + brand + '"> ' +
        '</div>'
    ).appendTo('#collapse1');
    index++;
}

Список успешно зарегистрирован и репозиторий сохранен.