【发布时间】：2021-07-12 12:45:02
【问题描述】：
我正在尝试使用动态创建的表单将多个数据立即发送到数据库，当我点击添加按钮时，该表单会添加新字段。我已经完成了大部分项目，但是要将数据发送到控制器，我需要动态地增加我无法做到的 name 属性。我是春季广告 Jquery 的新手。目前我只能发送索引为 0 和 1 的两个数组对象。
这是我的html表单
<script>
$(document).ready(function(){
//group add limit
var maxGroup = 10;
//add more fields group
$(".addMore").click(function(){
if($('body').find('.fieldGroup').length < maxGroup){
var fieldHTML = '<div class="form-group fieldGroup">'+$(".fieldGroupCopy").html()+'</div>';
$('body').find('.fieldGroup:last').after(fieldHTML);
}else{
alert('Maximum '+maxGroup+' groups are allowed.');
}
});
//remove fields group
$("body").on("click",".remove",function(){
$(this).parents(".fieldGroup").remove();
});
});
</script>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-secondary">
<a class="navbar-brand" th:href="@{/}" href="#">
<img src="" class="logo" th:src="@{/image/logo.png}" alt="logo">
Assam Power Distribution Company Limited</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
</div>
</nav>
<form method="post" th:action="@{/addfeeder}" th:object="${feeder}">
<div class="form-group fieldGroup" >
<div class="input-group mt-1 p-1 bg-light">
<input type="text" name="feeder[0].feeder_name" class="form-control" placeholder="Enter Feeder name" />
<select name="feeder[0].feeder_type" class="custom-select" id="inputGroupSelect01">
<option selected>Choose Capacity</option>
<option value="11">11</option>
<option value="33">33</option>
</select>
<input type="text" name="feeder[0].no_of_consumer_in_the_feeder" class="form-control" placeholder="Total Consumers"/>
<div class="input-group-addon">
<a href="javascript:void(0)" class="btn btn-success addMore"><span class="glyphicon glyphicon glyphicon-plus" aria-hidden="true"></span> Add</a>
</div>
</div>
</div>
<input type="submit" name="submit" class="btn btn-primary" value="SUBMIT"/>
</form>
<!-- copy of input fields group -->
<div class="form-group fieldGroupCopy" style="display: none;">
<div class="input-group mt-1 p-1 bg-light">
<input type="text" name="feeder[1].feeder_name" class="form-control" placeholder="Enter Feeder name"/>
<select name="feeder[1].feeder_type" class="custom-select" id="inputGroupSelect01">
<option selected>Choose Capacity</option>
<option value="11">11</option>
<option value="33">33</option>
</select>
<input type="text" name="feeder[1].no_of_consumer_in_the_feeder" class="form-control" placeholder="Enter Consumers"/>
<div class="input-group-addon">
<a href="javascript:void(0)" class="btn btn-danger remove"><span class="glyphicon glyphicon glyphicon-remove" aria-hidden="true"></span> Remove</a>
</div>
</div>
</div>
这是我的控制器
//adding feeder details
@PostMapping("/addfeeder")
public String addFeeder(@ModelAttribute FeederList feederlist)
{
System.out.println("Data"+feederlist);
System.out.println(feederlist.getFeeder().size());
for(Feeder c:feederlist.getFeeder())
System.out.println(c);
return "feeder";
}
public class FeederList {
private List<Feeder> feeder=new ArrayList<>();
public List<Feeder> getFeeder() {
return feeder;
}
public void setFeeder(List<Feeder> feeder) {
this.feeder = feeder;
}
}
【问题讨论】：
标签： javascript html jquery spring-boot spring-mvc