How to convert HTML table to List using Thymeleaf - spring-mvc

I am creating an spring-boot MVC web application.
When I get the contents from the controller I can display them correctly on the view. The content is an object with a List. The list is displayed on a table.
<form th:action="#{/}" th:object="${homeVO}" method="post">
<div align="center">
<table width="80%" id="sectionsTable">
<thead>
<th width="10%"><label class="tableTextTitle">ORDER</label></th>
<th width="50%"><label class="tableTextTitle">TITLE</label></th>
<th width="10%"></th>
<th width="10%"><label class="tableTextTitle">HIDE</label></th>
<th width="10%"></th>
<th width="10%"></th>
</thead>
<tbody>
<tr th:each="section, stat :${homeVO.sections}">
<td>
<input type="number" th:value="${section.id}" hidden="true" id="sectionid" />
<input type="number" class="form-control" th:value="${section.position}" id="position"/>
</td>
<td>
<input type="text" class="form-control" th:value="${section.name}" disabled="true" id="name"/>
</td>
<td align="center">
<a th:href="#{./sectionprofile(id=${section.id})}" class="btn btn-default">EDIT</a>
</td>
<td>
<input type="text" class="form-control" th:value="${section.column}" id="column"/>
</td>
<td>
<select class="form-control" id="condition">
<option value="0" th:selected="(${section.condition} == 0)"/>
<option value="1" th:text="#{minor}" th:selected="(${section.condition} == 1)"/>
<option value="2" th:text='#{minorEq}' th:selected="(${section.condition} == 2)"/>
<option value="3" th:text="#{different}" th:selected="(${section.condition} == 3)"/>
<option value="4" th:text='#{equals}' th:selected="(${section.condition} == 4)"/>
<option value="5" th:text='#{biggerEq}' th:selected="(${section.condition} == 5)"/>
<option value="6" th:text='#{bigger}' th:selected="(${section.condition} == 6)"/>
</select>
</td>
<td>
<input type="text" class="form-control" th:value="${section.criteria}" id="criteria"/>
</td>
</tr>
</tbody>
</table>
</div>
<div class="col-md-12">
Add Section
<input type="submit" class="btn btn-default" value="SAVE" />
</div>
</form>
When I change some values on the table I want to save them. When I save, I get in the controller the object with an empty List.
#RequestMapping(method = RequestMethod.POST)
public String set(HomeVO homeVO, Model model) {
if (homeVO != null) {
for (SectionVO sectionVO : homeVO.getSections()) {
Section section = sectionRepository.findOne(sectionVO.getId());
section.setPosition(sectionVO.getPosition());
section.setColumn(sectionVO.getColumn());
section.setCondition(sectionVO.getCondition());
section.setCriteria(sectionVO.getCriteria());
sectionRepository.save(section);
}
}
...
return "home";
}
What shall I do to get the table elements back into a List?

To accomplish this rows bindings properly follow the Thymeleaf Spring guide specificaly Dynamic Fields section. There is a special syntax so your HTML should be similar to this:
<tr th:each="row,rowStat : *{rows}">
<td th:text="${rowStat.count}">1</td>
<td>
<select th:field="*{rows[__${rowStat.index}__].variety}">
<option th:each="var : ${allVarieties}"
th:value="${var.id}"
th:text="${var.name}">Thymus Thymi</option>
</select>
</td>
<td>
<input type="text" th:field="*{rows[__${rowStat.index}__].seedsPerCell}" />
</td>
<td>
<button type="submit" name="removeRow"
th:value="${rowStat.index}" th:text="#{seedstarter.row.remove}">Remove row</button>
</td>
</tr>

Related

How to get values of dynamically generated input fields vue.js

I have input fields that are generated dynamically when user clicks the Add button.
How can I get all the values from the inputs
Image
[1]: https://i.stack.imgur.com/keCxy.png
Here is my Code
<tr data-id="1">
<td style="width: 80px">1.</td>
<td>
<input v-model="firstNameKin" type="text " class="form-control " placeholder="Enter First name" spellcheck="false" data-ms-editor="true">
</td>
<td class="">
<input type="text " class="form-control " placeholder="Enter middle name" spellcheck="false" data-ms-editor="true">
</td>
<td class="">
<input type="text " class="form-control " placeholder="Enter middle name" spellcheck="false" data-ms-editor="true">
</td>
<td>
<select class="form-control selectpicker" data-live-search="true" title="Select Relationship">
<option value="">Father</option>
<option value="">Mother</option>
<option value="">Sister</option>
</select>
</td>
<td></td>
</tr>
<tr class="cloneCharges d-none">
<td style="width: 80px " class="categoryIndex ">#</td>
<td>
<input v-model="firstNameKin" type="text " class="form-control " placeholder="Enter First name" spellcheck="false" data-ms-editor="true">
</td>
<td class="">
<input type="text " class="form-control " placeholder="Enter middle name" spellcheck="false" data-ms-editor="true">
</td>
<td class="">
<input type="text " class="form-control " placeholder="Enter middle name" spellcheck="false" data-ms-editor="true">
</td>
<td>
<select class="form-control selectpicker" data-live-search="true" title="Select Relationship">
<option value="">Father</option>
<option value="">Mother</option>
<option value="">Sister</option>
</select>
</td>
<td class="text-right cell-change d-flex align-items-center justify-content-end">
<a class="btn btn-light btn-rounded waves-effect btn-circle btn-transparent cancel-new-category-2 " title="Cancel "><i class="bx bx-x "></i></a>
</td>
</tr>
Here is the script code that am trying to fetch the values from
data(){
return{
firstNameKin:[]
}
}

How to Save Customized Html widgets data in Drive data table

I have created HTML widgets (Calculator) to calculate per hour manpower effort, On Submit how can I save this data in Drive data table.
Using this data wants to genrate the workflow email.
<div class="gap10"></div>
<div class="container">
<table class="table table-bordered data" >
<thead>
<tr>
<th colspan="4"><h3 style="text-align: left;margin-top:0px; margin-bottom:0px;">Technology Design Services</h3></th>
</tr>
<tr class="one">
<th>Service Area</th>
<th>Per Hour Rate</th>
<th>Number Of Hours</th>
<th>Total Rate</th>
</tr>
</thead>
<tbody>
<tr>
<td>Contact Centre Expert</td>
<td><div class="form-group num">
<input name="" type="number" placeholder="" class="form-control input-md"id="PerHourRate1"type="text" value="2325" readonly>
</div></td>
<td><div class="form-group num">
<input name="" type="text" placeholder="" class="form-control input-md"value="0" id="rTpe1">
</div></td>
<td><div class="form-group num">
<input name="" type="text" placeholder="" class="form-control input-md"value="0" id="rFor1"readonly>
</div></td>
</tr>
<tr>
<td>Solution Design</td>
<td><div class="form-group num">
<input name="" type="number" placeholder="" class="form-control input-md"id="PerHourRate2"type="text" value="2762" readonly>
</div></td>
<td><div class="form-group num">
<input name="" type="text" placeholder="" class="form-control input-md"value="0"id="rTpe2">
</div></td>
<td><div class="form-group num">
<input name="" type="text" placeholder="" class="form-control input-md"value="0" id="rFor2"readonly>
</div></td>
</tr>
If you have Model with ServiceArea, PerHourRate, NumberOfHours fields then you can just drop a table on a page (table wizard allows to select which fields should be editable), add column for total rate and set binding for it to #datasource.item.PerHourRate * #datasource.item.NumberOfHours. With such setup changes made to NumberOfHours field will be automatically saved to database.
Note:
If you want to keep PerHourRate read only, be sure to implement server side validation for that in Model Events.

Why am I getting so many br tags

I started writing html code and when I view it on chrome, the table is displayed after a long white space. When I inspect the element, on chrome, I get a lot of br tags but I have not given any br tags in the code
How come?
<!DOCTYPE html>
<head>
<title> Practice </title>
</head>
<body>
<table border="0.00001" align="center" bgcolor="silver">
<caption align="center"> <big><big><b> Registration Form </b><big><big> </caption><br><br>
<form name="My Form" action="" method="">
<tr>
<td> Username </td>
<td> <input type="text" name="t1" size="6"/> </td>
</tr><br><br>
<tr>
<td> Password </td>
<td> <input type="password" name="t2" size="6"/> </td>
</tr><br><br>
<tr>
<td> Name </td>
<td> <input type="text" name="t3" size="30"/> </td>
</tr><br><br>
<tr>
<td> Address </td>
<td> <input type="text" name="t4" size="30"/> </td>
</tr><br><br>
<tr>
<td> Country </td>
<td><select name="s1">
<option> Select Your Country </option>
<option> Afghanistan </option>
<option> Bangladesh </option>
<option> China </option>
<option> India </option>
<option> Russia </option>
</select></td>
</tr><br><br>
<tr>
<td> Zip Code </td>
<td> <input type="text" name="t5" size="6"/> </td>
</tr><br><br>
<tr>
<td> Email </td>
<td> <input type="text" name="t6" size="30"/> </td>
</tr><br><br>
<tr>
<td>Sex</td>
<td><input type="radio" name="r1" value="100" checked/>Male
<input type="radio" name="r1" value="102"/>Female</td>
</tr><br><br>
<tr>
<td>Language</td>
<td><input type="checkbox" name="r1" value="100" checked/>English
<input type="checkbox" name="r2" value="102"/>Non English</td>
</tr><br><br>
<tr>
<td> About </td>
<td><textarea name="a1" rows="5" cols="32"> </textarea></td>
</tr><br><br>
<tr align="centre">
<td><input type="submit" name="b2" value="submit here"/></td>
</tr><br><br>
</form>
</table>
I don't think this is <br>. Use Inspect Element to check what's causing so much gap before table. There might be some kind of margin before table.
You have a lot of unnecessary "br" tags in your code, inside your table. Remove them all and all will be fine! Cheers.
Use this code, This might solve your issues
<table border="0.00001" align="center" bgcolor="silver" cellpadding="10">
<caption align="center"><b> Registration Form </b> </caption><br><br>
<form name="My Form" action="" method="">
<tr>
<td> Username </td>
<td> <input type="text" name="t1" size="6"/> </td>
</tr>
<tr>
<td> Password </td>
<td> <input type="password" name="t2" size="6"/> </td>
</tr>
<tr>
<td> Name </td>
<td> <input type="text" name="t3" size="30"/> </td>
</tr>
<tr>
<td> Address </td>
<td> <input type="text" name="t4" size="30"/> </td>
</tr>
<tr>
<td> Country </td>
<td><select name="s1">
<option> Select Your Country </option>
<option> Afghanistan </option>
<option> Bangladesh </option>
<option> China </option>
<option> India </option>
<option> Russia </option>
</select></td>
</tr>
<tr>
<td> Zip Code </td>
<td> <input type="text" name="t5" size="6"/> </td>
</tr>
<tr>
<td> Email </td>
<td> <input type="text" name="t6" size="30"/> </td>
</tr>
<tr>
<td>Sex</td>
<td><input type="radio" name="r1" value="100" checked/>Male
<input type="radio" name="r1" value="102"/>Female</td>
</tr>
<tr>
<td>Language</td>
<td><input type="checkbox" name="r1" value="100" checked/>English
<input type="checkbox" name="r2" value="102"/>Non English</td>
</tr>
<tr>
<td> About </td>
<td><textarea name="a1" rows="5" cols="32"> </textarea></td>
</tr>
<tr align="centre">
<td><input type="submit" name="b2" value="submit here"/></td>
</tr>
</form>
</table>
Just removed some un-necessary tags, that might be causing issues. Please try
You had a lot of LF in your page. You need to check your editor
Also you had invalid tags and missed CSS
Here is a fixed version that validates
<!DOCTYPE html>
<html>
<head>
<title> Practice </title>
<style>
table {
border: 0.00001px;
background-color: silver;
margin: 0px auto;
}
caption {
text-align: center;
font-size: x-large;
}
.center {
text-align: center;
}
</style>
</head>
<body>
<form name="MyForm">
<table>
<caption>Registration Form</caption>
<tr>
<td>Username</td>
<td>
<input type="text" name="t1" size="6" /> </td>
</tr>
<tr>
<td>Password</td>
<td>
<input type="password" name="t2" size="6" /> </td>
</tr>
<tr>
<td>Name</td>
<td>
<input type="text" name="t3" size="30" /> </td>
</tr>
<tr>
<td>Address</td>
<td>
<input type="text" name="t4" size="30" /> </td>
</tr>
<tr>
<td>Country</td>
<td>
<select name="s1">
<option> Select Your Country </option>
<option> Afghanistan </option>
<option> Bangladesh </option>
<option> China </option>
<option> India </option>
<option> Russia </option>
</select>
</td>
</tr>
<tr>
<td>Zip Code</td>
<td>
<input type="text" name="t5" size="6" /> </td>
</tr>
<tr>
<td>Email</td>
<td>
<input type="text" name="t6" size="30" /> </td>
</tr>
<tr>
<td>Gender</td>
<td>
<input type="radio" name="r1" value="100" checked/>Male
<input type="radio" name="r1" value="102" />Female</td>
<input type="radio" name="r1" value="103" />Irrelevant</td>
</tr>
<tr>
<td>Language</td>
<td>
<input type="checkbox" name="r1" value="100" checked/>English
<input type="checkbox" name="r2" value="102" />Non English</td>
</tr>
<tr>
<td>About</td>
<td>
<textarea name="a1" rows="5" cols="32"> </textarea>
</td>
</tr>
<tr>
<td class="center" colspan="2">
<input type="submit" name="b2" value="submit here" />
</td>
</tr>
</table>
</form>
</body>
</html>

How to make label for radio button

I have some radio buttons. But I also want to the text clickable. So that the ratio button is selected. So not only if you click on the radio button that the ratio buttion is selected, but also if you click on the text, that the ratio button is selected.
I have this:
<td>
<input id="upload" name="folder" type="radio" value="#item" />
<label>#Html.Label(item)</label>
</td>
Thank you
I try it like this:
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<table>
#foreach (var item in Model.Directories)
{
<tr>
<td>
<input id="upload" name="folder" type="radio" value="#item" />
<label for="upload">#Html.Label(item)</label>
</td>
</tr>
}
</table>
</div>
</div>
I have it now like this:
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<table>
#foreach (var item in Model.Directories)
{
<tr>
<td>
<label>
<input type="radio" name="folder" value="#item" id="upload">
<label for="folder">#Html.Label(item)</label>
</label>
</td>
</tr>
}
</table>
</div>
</div>
but the radio buttons are in a foreach loop, so the id is different of every radio button
I try it like this:
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<table>
#foreach (var item in Model.Directories)
{
#for(var i=0; i < item.Count; i++){
<tr>
<td>
<fieldset>
<input type="radio" name="folder" value="#item" id="folder">
<label for="folder">#Html.Label(item)</label>
</fieldset>
</td>
</tr>
}
}
</table>
</div>
</div>
You can use for attribute with the value of the input's id attribute:
<input id="upload" name="folder" type="radio" value="#item" />
<label for="upload">#Html.Label(item)</label>
the simple way
<td>
<label>
<input id="upload" name="folder" type="radio" value="#item" />
#Html.Label(item)</label>
</td>
use label for
<td>
<input id="upload" name="folder" type="radio" value="#item" />
<label for="upload">#Html.Label(item)</label>
</td>
Using for attribute:
<label for="folder">#Html.Label(item)</label>
You need to enclose the radio within a label tag, To display some text add a tag inside the label:
<label for="upload">
<span>#Html.Label(item)</span>
</label>
<input type="radio" name="folder" value="#item" id="upload" >

html align column right

I have this Html code :
<tr>
<td>
<a type="text"
name="color" >#client.Login</a>
</td>
<td>
<a type="text"
name="color" >#client.Mail</a>
</td>
<td>
<a type="text"
name="color" >#client.Password</a>
</td>
<td>
<a type="text"
name="color" >#client.Name</a>
</td>
<td width=10px align="left">
#if (i == 0)
{
<input type="radio"
name="color" checked >
}
else
{<input type="radio" name="color" >
}
</td>
</tr>
My problem is in the radio button : it is so far to the other elements. the attribute align is obsolete in HTML5 .
the dimensions :
So how can modify this snippet to got a good result?
Use CSS text-align instead of align:
<td width=10px style="text-align: right;">
#if (i == 0)
{
<input type="radio" name="color" checked >
} else{
<input type="radio" name="color" >
}
</td>

Resources