Добавить дополнительные наборы новых входных данных объекта в форму - PullRequest
Новая
       7

Добавить дополнительные наборы новых входных данных объекта в форму

0 голосов
/ 09 июля 2020

У меня есть маленькая форма, в которой есть три разных объекта. Я хочу иметь возможность нажать кнопку и добавить новый набор из трех объектов. Как лучше всего это сделать? Я пробовал два разных метода, и оба не работают должным образом.

Вот метод контроллера, который загружает страницу формы html: 

    @RequestMapping(value="/masterCarriers/add")
    public String addACarrierView(Model model) {
        MasterCarrier newMasterCarrier= new MasterCarrier();
        model.addAttribute("newMasterCarrier", newMasterCarrier);

        CarrierAppointment newCarrierAppointment = new CarrierAppointment();
        model.addAttribute("newCarrierAppointment", newCarrierAppointment);

        MasterCarrierAppt newMasterCarrierAppt = new MasterCarrierAppt();
        model.addAttribute("newMasterCarrierAppt", newMasterCarrierAppt);

        return "carrierAppointments/addCarrier";
    }

вот моя форма html (я также использую Thymeleaf): 

        <form enctype="multipart/form-data" th:action="@{/add/masterCarrier}" method="post"  class="tab-content">
            <div class="row">
                    <div class="row">
                        <div class="col-xs-3 col-sm-3  text-right">
                            <label>Master Carrier Short Name </label>
                        </div>
                        <div class="col-xs-7 col-sm-7" >
                            <input type="text" class="form-control" placeholder="Master Carrier Name" th:field="${newMasterCarrier.shortName}" required="true"/>
                        </div>
                    </div>
                    <br/>
            </div>
            <br/>
            <div class="row" id="addMasterCarrierApptDets">
                <div class="row">
                    <div class="col-xs-3 col-sm-3  text-right">
                        <label>Parent Company Carrier </label>
                    </div>
                    <div class="col-xs-7 col-sm-7" >
                        <input type="text" class="form-control" placeholder="Carrier - Personal Lines" th:field="${newCarrierAppointment.parentCompanyCarrier}" required="true"/>
                    </div>
                </div>
                <br/>
                <div class="row">
                    <div class="col-xs-3 text-right">
                        <strong>Select A Line of Business:</strong>
                    </div>
                </div>
                <div class="row">
                    <div class="col-xs-3 text-right"><input type="checkbox" id="plBox" th:field="${newMasterCarrierAppt.personalLines}" style="margin-right: .5rem;"/></div>
                    <div class="col-xs-7 col-sm-7" > <label> Personal Lines  </label></div>
                </div>
                <div class="row">
                    <div class="col-xs-3 text-right"> <input type="checkbox" id="mmClBox" th:field="${newMasterCarrierAppt.midMarketCommercial}" style="margin-right: .5rem;"/></div>
                    <div class="col-xs-7 col-sm-7" > <label>   Mid-Market Commercial </label></div>
                 </div>
                <div class="row">
                    <div class="col-xs-3 text-right"> <input type="checkbox" id="smlClBox" th:field="${newMasterCarrierAppt.smallCommercial}" style="margin-right: .5rem;"/></div>
                    <div class="col-xs-7 col-sm-7" > <label>  Small Commercial </label></div>
                </div>
                <br/>
                <br/>
            </div>
            <br/>
            <div class="text-right">
                <input type="submit" value="Submit" class="btn btn-default"/>
            </div>
    </form>
        <br/>
        <div class="row text-right">
<!--   button on click, jquery append another <input> tag to <div>-->
            <a class="btn btn-default" id="addAnother">Add Another Line of Business</a>
<!--            <input type="submit" formnovalidate="formnovalidate"  name="addAnotherCarrier" id="addAnotherCarrier" class="btn btn-default" style="margin-left: 1rem; margin-bottom: 1rem;" value="Add Another Line of Business"/>-->
        </div>

Я пробовал два разных способа. Во-первых, когда вы нажимаете кнопку вне формы, он использует Jquery для добавления дополнительных полей (который добавляет входные данные с тем же полем th:, что и исходные входные данные, что заставляет контроллер загрузки Spring просто объединяться в один объект, пример: newCarrierAppt = carrier1, carrier2). Так что мне либо нужно найти способ создать разные поля для входных данных.

Во-вторых, я попытался сделать ввод данных formnovalidate submit в форме, который при нажатии при возврате к контроллеру Spring, который добавил новые объекты newObjects в html. Этот не работал должным образом и обновил страницу без первого набора значений или дополнительных входных данных.

Вот Jquery: 

             $('#addAnother').click(function() {
                $('#addMasterCarrierApptDets').append('<div class="row"> <div class="col-xs-3 col-sm-3  text-right"><label>Parent Company Carrier </label></div> <div class="col-xs-7 col-sm-7" ><input type="text" class="form-control" placeholder="Carrier - Personal Lines" th:field="${newCarrierAppointment.parentCompanyCarrier}" required="true"/> </div> </div><div class="row"><label> <input type="checkbox" id="plBox" th:field="${newMasterCarrierAppt.personalLines}" style="margin-right: .5rem;"/> Personal Lines  </label><label> <input type="checkbox" id="midBox" th:field="${newMasterCarrierAppt.midMarketCommercial}" style="margin-right: .5rem;"/> Middle Market Commercial  </label><label> <input type="checkbox" id="smlCL" th:field="${newMasterCarrierAppt.smallCommercial}" style="margin-right: .5rem;"/> Small Commercial </label></div>');

             });
Вот метод контроллера, который я использовал для этого первого метода: 

  @RequestMapping(value="/add/masterCarrier")
    public ModelAndView addMaster(@ModelAttribute(value = "newMasterCarrier")MasterCarrier newMasterCarrier, @RequestParam(value="newCarrierAppointment")CarrierAppointment newCarrierAppointment,@RequestParam(value="newMasterCarrierAppt")MasterCarrierAppt newMasterCarrierAppt){
        MasterCarrier newMaster = masterCarrierRepository.save(newMasterCarrier);

//    do stuff
        return  new ModelAndView("redirect:/masterCarriers");
    }

Вот метод контроллера, который я использовал для этого второго метода: 

@RequestMapping(value = "/add/masterCarriers", params = "addAnotherCarrier")
public String addPolicy(final MasterCarrierAppt masterCarrierAppt, Model model) {
  CarrierAppointment newCarrierAppointment = new CarrierAppointment();
  model.addAttribute("newCarrierAppointment", newCarrierAppointment);

  MasterCarrierAppt newMasterCarrierAppt = new MasterCarrierAppt();
  model.addAttribute("newMasterCarrierAppt", newMasterCarrierAppt);

  return "carrierAppointments/addCarrier";
}

Может ли кто-нибудь посоветовать, какой метод мне следует использовать и что я делаю неправильно?

...