I am currently working on sending dynamic form data to a spring controller through AJAX in order to save a list of objects to the database later. Although everything seems to be properly configured, I am encountering difficulties in dealing with dynamic form data within the AJAX process. Specifically, the challenge lies in creating JavaScript objects for each row of a table and then posting these objects as JSON data.
HTML
<html>
<head>
<title>Add Students</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
</head>
<body>
<div class="container">
<div class="form-group">
<form id="student_detail" name="student_detail">
<table class="table table-bordered" id="student_dynamic_table">
<tr>
<td><input type="text" name="name[]" id="name" placeholder="Enter Name" class="form-control name_list" /></td>
<td><input type="text" name="age[]" id="age" placeholder="Enter Age" class="form-control age_list" /></td>
<td><button type="button" name="add" id="add" class="btn btn-success">+</button></td>
<tr>
</table>
<input type="button" class="btn btn-info" id="submit" name="submit" value="Submit" />
</form>
</div>
</div>
</body> </html>
JS
$(document).ready(function(){
var i=0;
$('#add').click(function(){
i++;
$('#student_dynamic_table').append('<tr id="row'+i+'"> <td><input type="text" name="name[]" id="name'+i+'" placeholder="Enter Name" class="form-control name_list" /></td><td><input type="text" name="age[]" id="age'+i+'" placeholder="Enter Age" class="form-control age_list" /></td><td><button type="button" name="remove" id="'+i+'" class="btn btn-danger btn_remove">x</button></td><tr>');
});
$(document).on('click','.btn_remove', function(){
var button_id=$(this).attr("id");
//id of the clicked button
$('#row'+button_id+'').remove();
});
$('#submit').click(function(){
var url= "${pageContext.request.contextPath}";
var student = ({
name : $('#name').val(),
age : $('#age').val()
});
$.ajax({
type : "POST",
url : url + '/submitDynamicForm',
data:JSON.stringify( student),
dataType : 'json',
contentType : 'application/json',
success : function(response)
{
}
}); }); });
Controller
@Autowired
private StudentDao studentDao;
@RequestMapping(value = "/dynamic", method = RequestMethod.GET)
public ModelAndView getDynamicForm() {
ModelAndView form = new ModelAndView("dynamicform");
return form;
}
@RequestMapping(value = "/submitDynamicForm", method = RequestMethod.POST)
public void saveUser(@RequestBody List<Student> student) {
studentDao.insertListOfStudents(student);
} }
Model
@Entity
public class Student {
@Id
@GeneratedValue
private Long id;
@Column(name = "name")
private String name;
@Column(name = "age")
private int age;
// getters setters
}
Hibernate code to insert list of students
@Transactional
public void insertListOfStudents(List<Student> student) {
Session session = sessionFactory.getCurrentSession();
for(Student std : student) {
session.save(std);
}
Your assistance is greatly appreciated