How to send table data from HTML form submit via ajax call to Spring MVC controller - ajax

Question

Say i have a HTML table in a format similar to this
<form> <table id="a">
<thead>
<th>Name</th>
<th>Series</th>
<th>Value</th>
</thead>
<tbody id="b">
<tr><td>Enhancer</td><td>Enhancement</td><td>50</td></tr>
<tr><td>Plans</td><td>Plan</td><td>50</td></tr>
</tbody>
</table>
<input type="submit" value="Send" action="SomeControllerAction" /></form>
which has two rows under the headings "Name","Series" and "Value" .
I need to send this data via a form submit to a Spring Controller with Ajax where i can get or set the values for each row iteratively in a Model.
I am not sure how to achieve this . That is how to send the data in a table to a spring controller method and get the values .
Help with code segments!
Thanks

Answer 1

Although the previous answer is correct, I would suggest to introduce a class that contains three fields : name, series and value.
This class should have a meaningful name.
Here I named it MyObject because I don't know what you app is about.
MyObject :
public class MyObject {
private String name, series;
private Integer value;
// Getters and setters
}
Controller (the return type might be different)
#PostMapping("/series")
#ResponseBody
public List<MyObject> postSeries(#RequestBody List<MyObject> myObjects) {
myObjects.forEach(System.out::println);
// Handle myObjects
return myObjects;
}
JSP
<table id="tableMyObjects">
<thead id="a">
<tr>
<th>Name</th>
<th>Series</th>
<th>Value</th>
</tr>
</thead>
<tbody id="b">
<tr>
<td><input type="text" name="name" /></td>
<td><input type="text" name="series" /></td>
<td><input type="text" name="value" /></td>
</tr>
<tr>
<td><input type="text" name="name" /></td>
<td><input type="text" name="series" /></td>
<td><input type="text" name="value" /></td>
</tr>
</tbody>
</table>
<button id="postButton">Post myObjects</button>
jQuery
$('#postButton').click(function() {
var myObjects = [];
$('#b tr').each(function(index, item) {
var $item = $(item);
myObjects.push({
name: $item.find("td input[name='name']").val(),
series: $item.find("td input[name='series']").val(),
value: $item.find("td input[name='value']").val(),
});
});
$.ajax({
url: '/series',
method: 'POST',
contentType : 'application/json; charset=utf-8',
data: JSON.stringify(myObjects)
})
.done(function(myObjects) {
// handle success
})
.fail(function() {
// handle fail
});
});

Answer 2

Using javascript/jquery you can do that easily.
Generate a input type hidden text field while iterating the table content like below with the same name.
<tbody id="b">
<tr>
<td>
<input type="hidden" name="Name" value="Enhancer" />
Enhancer
</td>
<td>
<input type="hidden" name="Series" value="Enhancement" />
Enhancement
</td>
<td>
<input type="hidden" name="Value" value="50" />
50
</td>
</tr>
</tbody>
and then get all the hidden fields values by name like below.
$("[name='Name']").val();
$("[name='Series']").val();
$("[name='Value']").val();
and then in controller accept those parameters as an array like below.
#RequestMapping(method = RequestMethod.POST, produces = "text/html")
public String create(#RequestParam(value = "Name") String[] Name,
#RequestParam(value = "Series") String[] Series,
#RequestParam(value = "Value") String[] Value,
BindingResult bindingResult, Model uiModel, HttpServletRequest httpServletRequest){
//code goes here
}
NOTE : You have to write javascript code to set the hidden field values for multiple rows something like this Call javascript function with if JSTL