Form repeater inputs not being sent to backend
Hi, I implemented form repeater in one of my HTML pages. It works fine, I included the inputs into a <form> but when submit the form, I was expecting to receive an array with the data entered in those inputs in my Spring controller but its coming empty. Any reason why this could happen? I added a name property to the inputs and I'm expecting that param in my controller.
Replies (9)
Sean, one more question related to form repeated. I have the attached form that is being repeated, but depending on the value of the first dropdown I would like to show only a few of those inputs. The issue I'm having is that I created this Jquery script, and it works fine for the first row of the repeater, but then when I keep adding more rows to the form it does not work, it does not even call the script. I guess its related to the way the new rows are created in the DOM. My question is if there is any way to manipulate the visibility of each of the rows with JS depending on the first dropdown. Each row being independent from the others.
https://ibb.co/RHb7WgQ
$(document).ready(function () {
$("#messageType").change(function () {
var selectedValue = $(this).val();
console.log(selectedValue)
$("#sender").hide();
if (selectedValue === "TEXT") {
$("#sender").show();
}
});
});Thanks!!
Hi,
You will need to init this code for each new row you adding. You can use show/hide event of the repeater plugin as per docs:
https://github.com/DubFriend/jquery.repeater
Regards.
Yes, you are right, the thing is the frontend is including the input value into another object. Changing the controller to receive a Map<String,String> solved the issue. Thanks!
Hi 
,
Glad to hear that. All the best with your project!
Regards.
Your Support Matters!
Hi @Sean! yes, the input name is "name" and I'm expecting a param with the same name in the controller but receiving null instead. I checked the network tab and I saw this is the payload. Do you know how should I handle this?
https://ibb.co/VCGw9kV
Hi,
This issue is related to your server side code. The data is sent from the frontend code via post and you just need to properly retrieve it from your backend code.
Regards.
I understand it is.
This is my form:
<form class="form" enctype="multipart/form-data" method="POST"
th:action="@{/message/save}">
<div class="form-group">
<div data-repeater-list="kt_docs_repeater_basic">
<div data-repeater-item>
<div class="form-group row">
<div class="col-md-3">
<label class="form-label">Name:</label>
<input class="form-control mb-2 mb-md-0"
name="name"
placeholder="Enter full name" type="text"/>
</div>
</div>
</div>
</div>
</div>
<div class="form-group mt-5">
<a class="btn btn-light-primary" data-repeater-create href="javascript:;">
<i class="ki-duotone ki-plus fs-3"></i>
Add
</a>
</div>
<button class="btn btn-primary mr-2" type="submit">Guardar</button>
</form>And this is the controller:
@PostMapping("save")
public String saveChanges(@ModelAttribute("message") Message message, @RequestParam(required = false, name = "name") List<String> name) {
logger.info("METHOD: message.save -- SAVE MESSAGE");
messageService.save(message);
return "redirect:/message/list";
I would expect the List<String> called name in the controller to have the data entered in the inputs called name in the HTML. When I run it, that param comes as null.
Hi,
Please make sure that you set the name attribute for your inputs. Then you can get the POST array by value for name.
Regards.
Is your spring controller set up to receive the data correctly?
