Bind same attribute names of multiple dynamically created fields using DTO

Question

I have 2 dropdowns A and B.

A is a normal dropdown
B is a multiselect dropdown

A contains list of classes in a school and B contains divisions in a school

There is also a button for dynamic creation of these two dropdowns(There may be n dropdowns)

I want to save n dropdowns values simultaneously to my database but the problem is all my dynamically created field attribute names are same as the original two dropdowns, this way I am getting the value of last dropdown entered to my backend. I can dynamically change the attribute names using js, but I can't dynamically create variables in my dto.

I want my n dropdown values to bind into same DTO variables as a list or something like that, Is there any other methods to achieve this? i researched and went up with apache commons collections4 and autopopulatingList but i don't find any proper examples

My DTO class

public class TestDto {
    private Long fkcl;
    private String[] fkdiv;

    public Long getFkcl() {
        return fkcl;
    }
    public void setFkcl(Long fkcl) {
        this.fkcl = fkcl;
    }
    public String[] getFkdiv() {
        return fkdiv;
    }
    public void setFkdiv(String[] fkdiv) {
        this.fkdiv = fkdiv;
    }

ClassDes

public class ClassDes {

    public List<TestDto> list = new ArrayList<TestDto>();

    public List<TestDto> getList() {

        return list;
    }

    public void setList(List<TestDto> list) {
        this.list = list;
    }

}

Controller

@RequestMapping(value = "/testing")
    public  ModelAndView ff(Model model) {


        ClassDes testprof = new ClassDes();
        List<ClassMaster> bslist = serv.findAllclass();
        model.addAttribute("blah", bslist);
        List<StudentMaster> std = stdServ.findAll();
        model.addAttribute("std", std);

         return new ModelAndView("test" , "testprof", testprof);
    }

    @RequestMapping(value = "/save", method = RequestMethod.POST)
    public ModelAndView save(@ModelAttribute ClassDes testprof) {

        System.out.println(BasicGson.toGson(testprof));

        return new ModelAndView("redirect:/testing", "testprof", testprof);
    }

but my list returns empty {"list":[]} but in my ajax method, it shows

{"listed[].fkcl":"3","listed[].fkdiv":["1","2","3","4","5"]}

The question isn't clear, and has too much code. Do you want a JS solution to add elements to the dropdown or a data type to store in your server-side java? — PotatoManager
– PotatoManager, Commented Jul 12, 2017 at 18:17
@JoeyPinto No, i want to store all dropdown values to my two dto variables as a list or something like that because i can't get the values in my java side because it only takes first two dropdown values that matches the attribute name in my jsp — BeginnerBro
– BeginnerBro, Commented Jul 13, 2017 at 4:06
@JoeyPinto now i made some changes in the question,please check this — BeginnerBro
– BeginnerBro, Commented Jul 13, 2017 at 11:28
Why dont you consider something as simple as a nested array list? — PotatoManager
– PotatoManager, Commented Jul 13, 2017 at 11:41

arsul huk · Accepted Answer · 2017-07-15 06:29:37Z

u can change ur submitform function in js

$('#submitForm').submit(function(e) {

            var frm = $('#submitForm');
            e.preventDefault();

            var data = {};
            var dt=[];
            var newdt = {};
            var Form = this;

            $.each(this, function(i, v) {
                var input = $(v);
                if(data.hasOwnProperty("fkcl")) //mapped all dropdown values to fkcl and fkdiv inorder to use `TestDto` variables
                    {
                    if(data.hasOwnProperty("fkdiv"))
                        {
                        dt.push(data);
                        data={};
                        }
                    }
                data[input.attr("name")] = input.val();
                delete data["undefined"];
            });


            newdt['list']=dt;
            alert(JSON.stringify(newdt));

            $.ajax({
                 async : false,
                global : false, 
                contentType : 'application/json; charset=utf-8',
                type : 'post',
                url : frm.attr('action'),
                data : JSON.stringify(newdt),

                success : function(callback) {
                    window.location.reload();
                },
                error : function() {
                    $(this).html("Error!");
                } 
            });

@Controller

@RequestMapping(value = "/save", method = RequestMethod.POST)
    public void save(@RequestBody ClassDes testprof) {

       for (TestDto t : testprof.getList()) {
        serv.save(t);
    }

        return new "redirect:/testing";
    }

PotatoManager · Accepted Answer · 2017-07-13 14:21:29Z

0

When you've dynamically created an input section in your form, I think it's advisable to assemble all your inputs into a JSON object using javascript.

You can then send the JSON object as a single form parameter to the server where you can handle it the way you want. This will simplify the parameter handling process as you will have just one to work with.

answered Jul 13, 2017 at 14:21

PotatoManager

1,7751 gold badge19 silver badges36 bronze badges

3 Comments

PotatoManager Over a year ago

Comment if you need a detailed explanation of how to do this.

BeginnerBro Over a year ago

i have the json data in my ajax but i want to pass that to my dto in rest controller

PotatoManager Over a year ago

Like I said use it as a single parameter, Can you add the JSON to your question

Collectives™ on Stack Overflow

Bind same attribute names of multiple dynamically created fields using DTO

2 Answers 2

Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related