'How to send a list of objects to the spring boot controller from a dynamic table where items are added to the table by jquery through a button click

In my spring boot project there is a part where the user has to enter his bank details(select bank name, branch name , enter account number). There is also a table where after the user clicks on "Add Bank" a row will be added to a table using jquery. These table rows also have some input type hidden on them. I actually have to send the input hidden values from the table to the controller and save the values in the database. I have tried using lists to do it but to no avail. Is there some other way I can achieve this. And also how do I bind the table rows to the Controller in Jquery. Below is my jquery and controller codes

$('#Addbank').click(function() {
    alert($('#bank').children().length);
    if ($('#banktable').children().length == 0)
        $('#banktable').append("");
    $('#banktable').append("<tr><td>" + $('#Bank option:selected').text() +"<input type='hidden' value="+$('#Bank').val() +">"+ "</td><td>" + $('#Branch option:selected').text() +
        "</td><td>" + $('#accno').val() +"<input type='hidden' value="+ $('#accno').val()+ "</td><td><button type='button' class='btn' value='delete'>Delete</button></td></tr>");
})

The part of controller where I initialize a list before adding to a model

appl_banks = new BankDto();
        for (int i = 0; i <= 50; i++) {
            appl_banks.addBank(new Appl_bank());
            System.out.println(appl_banks);
        }

The table code in HTML

<table class="table table-hover" id="banktable">
            <tr>
                <th>Bank Name</th>
                <th>Branch Name</th>
                <th>Account Number</th>
            </tr>
            <tbody>
                <tr th:each='b,item:${applbank}'>
                    <td><input type='hidden'
                        th:value='*{applbank[__${item.index}__].bankcd}'></td>
                    <td><input type='hidden'
                        th:value='*{applbank[__${item.index}__].branchcd}'></td>
                    <td><input type='hidden'
                        th:value='*{applbank[__${item.index}__].acno}'></td>
                </tr>
            </tbody>
        </table>

My wrapper class

public class BankDto { private List<Appl_bank> appl_banks;

public BankDto() {
    this.appl_banks=new ArrayList<>();
    // TODO Auto-generated constructor stub
}

public BankDto(List<Appl_bank> appl_banks) {
    super();
    this.appl_banks = appl_banks;
}

public List<Appl_bank> getAppl_banks() {
    return appl_banks;
}

public void setAppl_banks(List<Appl_bank> appl_banks) {
    this.appl_banks = appl_banks;
}
public void addBank(Appl_bank appl_bank)
{
    this.appl_banks.add(appl_bank);
}

}

Bank details table The bank details table which should be submitted to the controller

The table along with the sources

javajqueryspring-bootthymeleaf


Solution 1:[1]

I had already managed to solve this by giving the hidden input fields the same name and accessing them as an array through in the Controller.

Jquery part(inserted hidden input fields with same name)

$('#banktable').append("<tr><td>" + $('#Bank option:selected').text() +
        "<input type='hidden' name='bankcd' value="
        + $('#Bank').val() + "></td><td>"
        + $('#Branch option:selected').text() +
        "<input type='hidden' name='branchcd' value="
        + $('#Branch').val() + "></td><td>"
        + $('#accno').val() +
        "<input type='hidden' value="
        + $('#accno').val() +
        " name='accno'></td><td>"
        + $('#actype option:selected').text() +
        "<input type='hidden' name='actype' value="
        + $('#actype ').val() + "></td><td><button type='button' class='btn' value='delete'>Delete</button></td></tr>");
    str = str + $('#Bank').val();
    $('#bankid').val(str);
})

How to access input fields name in Controller

@RequestParam(value = "bankcd") String bankcd[]

Hoping post helps someone who's stuck in this error :D

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1

Related Questions