[英]How can I send an array of values from the inputs to the controller
I've got a number of inputs in a form, created dynamically, and I'm trying to send them to the controller as an array using javascript. 我有许多形式的输入,这些输入是动态创建的,并且正在尝试使用javascript将它们作为数组发送到控制器。
Originally it was only one value and it was part of the Entity I pass in the model. 最初,它只是一个值,它是我在模型中传递的实体的一部分。 Then, as it can be more than one, I added a Transient field to the entity as a List and also created another class in java with just a List.
然后,由于可能不止一个,我将一个Transient字段添加为实体作为List,并在Java中仅用List创建了另一个类。 However, I still don't know how to add these values from javascript to the th:object in the form.
但是,我仍然不知道如何从javascript中将这些值添加到表单中的th:object。
<form id="selectform" th:object="${systemIdListForm}" th:action="@{/myController}" method="get">
<div class="box-body">
<label>System Id:</label>
<div id="fields">
<div class="form-group col-md-1">
<input class="form-control" name ="systemIdInput" type="text" style="width: 90%;" maxlength="8" onkeypress="return isNumber(event)"/>
</div>
</div>
<a id="addMore" href="#"><i class="fa fa-plus"></i><span>Add</span></a>
</div>
<div class="box-footer">
<button type="submit" class="btn btn-primary">Select</button>
</div>
</form>
<script type="text/javascript">
/*<![CDATA[*/
$(document).ready(function () {
$("#addMore").click(function() {
var html = '<div class="form-group col-md-1"><input class="form-control" name="systemIdInput" type="text" style="width: 90%;" maxlength="8" onkeypress="return isNumber(event)"/></div>';
$('#fields').append(html);
});
$("#selectform").submit(function(){
var values = $(this).serialize();
});
});
/*]]>*/
</script>
At the moment I can see that the variable values have the right information but nothing is sent to the controller. 目前,我可以看到变量值具有正确的信息,但是没有任何内容发送到控制器。 I realize that the formatting of these values is probably not want I need but I'm not sure what to do.
我意识到这些值的格式可能不是我所需要的,但是我不确定该怎么做。
Any help is much appreciated 任何帮助深表感谢
What data type have you used in Model ? 您在Model中使用了什么数据类型? Make sure you have taken String [] for that field.
确保已为该字段输入了String []。 If not taken String [] then use that and let me know whether it works or not.
如果未使用String [],请使用它并让我知道它是否有效。
Also you can take help of below code.It is for your case only. 您也可以使用以下代码来帮助您。
$("#selectform").submit(function (event) {
// form redirect stop
event.preventDefault();
var status = jbf.form.validate('#selectform');
if (!status) {
return;
}
// get form data
var data = {};
data["enrollmentNumber"] = $("#enrollmentNumber").val();
data["systemIdInput"] = jQuery("#selectform input[name=systemIdInput]").val();
var url = "/yourURL";
$.ajax({
type: "POST",
url: url,
data: JSON.stringify(data),
dataType: 'json',
contentType: "application/json; charset=utf-8",
success: function (response) {
var message = response.message;
//success notification
if(response.success === true){
alert(message);
}else{
error(message);
}
},
error: function (e) {
console.log("ERROR: ", e);
error("Add failed");
}
});
});
I managed to get the list of values from all the inputs in the form using a hidden input. 我设法使用隐藏输入从表单中所有输入中获取值列表。 I added a transient field in my entity (systemIds) where I've got all the values.
我在拥有所有值的实体(systemIds)中添加了一个瞬态字段。
<form id="selectform" th:object="${myEntiry}" th:action="@{/crops/singlecroplabeloffinsp/list/1}" method="get">
<input class="form-control" id="systemIdList" th:field="*{systemIds}" type="hidden"/>
<div class="box-body">
<label>System Id:</label>
<div id="fields">
<div class="form-group col-md-1">
<input class="form-control" name ="systemIdInput" type="text" style="width: 90%;" maxlength="8" onkeypress="return isNumber(event)"/>
</div>
</div>
<a id="addMore" href="#"><i class="fa fa-plus"></i><span>Add</span></a>
</div>
<div class="box-footer">
<button type="submit" class="btn btn-primary">Select</button>
</div>
</form>
...
$("#selectform").submit(function(){
//get all the system ids
var x = document.getElementsByName("systemIdInput");
var systemIds = [];
for (i = 0; i < x.length; i++ ) {
if (x[i].type ='text') {
systemIds.push(x[i].value);
}
}
$("#systemIdList").val(systemIds);
this.submit();
});
Added to the entity with getter & setter: 使用getter和setter添加到实体中:
@Transient
private List<Integer> systemIds;
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.