Odtnhj

I will create table row in javascript , in table row I have some input field and now I want to access data from this fields using thymeleaf

function myCreateFunction2() 
 var table = document.getElementById("mdlTable2");
 var row = table.insertRow(1);
 var cell1 = row.insertCell(0);
 var cell2 = row.insertCell(1);
 var cell3 = row.insertCell(2);
 var cell4 = row.insertCell(3);
 var cell5 = row.insertCell(4);
 var cell6 = row.insertCell(5);
 cell1.innerHTML = "Item";
 cell2.innerHTML = '<input id="item" type="number" value="">';
 cell3.innerHTML = "UOM";
 cell4.innerHTML = '<textarea></textarea>';
 cell5.innerHTML = '<button type="submit" value="save" class="btn btn-success btn-sm" onclick="save()">Save</button></form>';
 cell6.innerHTML = '<button type="button" class="btn btn-danger btn-sm" onclick="myDeleteFunction2()">Remove</button>';

 

You need to add a name to each input and then on your controller, ask for those parameters. Let's assume you you expected url is /edit.

JS

function myCreateFunction2() 
 var table = document.getElementById("mdlTable2");
 var row = table.insertRow(1);
 var cell1 = row.insertCell(0);
 var cell2 = row.insertCell(1);
 var cell3 = row.insertCell(2);
 var cell4 = row.insertCell(3);
 var cell5 = row.insertCell(4);
 var cell6 = row.insertCell(5);
 cell1.innerHTML = "Item";
 cell2.innerHTML = '<input id="item" type="number" value="" name="id">';
 cell3.innerHTML = "UOM";
 cell4.innerHTML = '<textarea id="description" name="description"></textarea>';
 cell5.innerHTML = '<button type="submit" value="save" class="btn btn-success btn-sm" onclick="save()">Save</button></form>';
 cell6.innerHTML = '<button type="button" class="btn btn-danger btn-sm" onclick="myDeleteFunction2()">Remove</button>';
 

Controller

@RequestMapping(value = "/edit", method = RequestMethod.POST)
public String edit(@RequestParam("id") String id,
 @RequestParam("description") String description ... 

Save (JS)

Now, since you don't have a form, if you want to submit your data, you will need one. In this case, we will do it using javascript.

function save() 

 // First, let's create the form.
 var form = document.createElement("form");
 form.method = "POST";
 form.action = "/edit";

 // Now, let's add the inputs.
 var id = document.getElementById('id');
 var description = document.getElementBy('description');
 form.appendChild(id);
 form.appendChild(description);

 // Submit the form.
 document.body.appendChild(form);
 form.submit();

Another, more easy way, would be to wrap your html code in a form. Of course, you would need to duplicate your code, since you would need both the edit and the delete form.

Hope it helps.