First:I know, that there is an example on the formvalidation.io-website with a table with 5 rows and they are validated at one time with the submit-button - but that's not what I want.
My goal is:I have an table with unknown number of rows. Each row has two input fields "Name" and "Description". With focusout-event I want to validate only the fields in the row which formerly had the focus. I have no idea how to realise that. But I'm sure that I'm not the first who want's to do that.
Thank you for your answers!
HTML
<form id="Formular0">
<table id="Formular0Table0">
<thead>
<tr>
<th name="Name">Name</th>
<th name="Desc">Description</th>
<th></th>
</tr>
</thead>
<tbody id="Formular0Table0Tbody">
<tr data-groupid="1">
<td><input type="text" name="Name" value="Group1"></td>
<td><input type="text" name="Deschription" value="Deschription3"></td>
<td><button type="button" name="btnSave">save</button></td>
</tr>
<tr data-groupid="2">
<td><input type="text" name="Name" value="Group2"></td>
<td><input type="text" name="Deschription" value="Deschription3"></td>
<td><button type="button" name="btnSave">save</button></td>
</tr>
<tr data-groupid="3">
<td><input type="text" name="Name" value="Group3"></td>
<td><input type="text" name="Deschription" value="Deschription3"></td>
<td><button type="button" name="btnSave">save</button></td>
</tr>
</tbody>
</table>
Related
I am new to spring boot and I created a form using thymeleaf. There I have a float value field and that is always displaying 0.0 like a placeholder. I don't want to display a value for that. How can I solve this issue?
<form action="#" th:action="#{/save}" th:object="${product}" method="post">
<table border="0" cellpadding="10">
<tr>
<td>Product Name:</td>
<td><input type="text" id="name" th:field="*{name}"/></td>
<td class="error" th:errors="*{name}"></td>
</tr>
<tr>
<td>Brand:</td>
<td><input type="text" th:field="*{brand}"/></td>
<td class="error" th:errors="*{brand}"></td>
</tr>
<tr>
<td>Made In:</td>
<td><input type="text" th:field="*{madein}"/></td>
<td class="error" th:errors="*{madein}"></td>
</tr>
<tr>
<td>Price:</td>
<td><input type="text" th:field="*{price}" th:placeholder="price"/></td>
<td class="error" th:errors="*{price}"></td>
</tr>
<tr>
<td colspan="2">
<button type="submit">Save</button>
</td>
</tr>
</table>
</form>
Here last field price having the issue.
click here for the image
You should use a capital F Float for your property rather than a float. It has 2 states:
A null default won't display anything in the form fields.
After the form has been submitted, the field will have the correct value (and will display as a number).
I have searched everywhere but cannot find an answer for this particular question that I have.
I'm making a pizza ordering website and instead of having a simple drop-down option for the time of pick-up or delivery field, we are required to have a text field so that the customer can manually enter the time themselves. I then need to validate the value of time by using DATE object to make sure it is between 6am and 11pm. Time must include am or pm.
Here is what I have so far:
<html>
<head>
<title>
Pizza Form
</title>
</head>
<body>
<script>
//Creating the function to extract the time
function getTime() {
var d = new Date();
d.setHours();
document.getElementById("pickTime").innerHTML = d;
}
}
</script>
<h1>Pizza Order Form</h1>
<form>
<fieldset><Legend>Is this for delivery or carryout?</legend>
<table >
<tr>
<td><input type="radio" name="DoC" id="forDelivery">Delivery <font color="red" size="1.px">extra 30% of total</font></input></td>
<td><input type="radio"name="DoC" id="forCarry">Carryout</td>
</tr>
<tr>
<td>Delivery/Pickup Time</td>
<td><input type="text" id="pickTime" value= "" onkeypress="return getTime()"> <font color="red" size="1.px" >Time should be between 6am and 11pm</font></td>
</tr>
</table>
</fieldset>
<fieldset><legend>Customer Info</legend>
<table >
<tr>
<td>First and Last Name</td>
<td><input type="text" id="flname"></td>
</tr>
<tr>
<td align="left">Address<br/ ><font color="red" size="1.px" id="address">Not required if takeout</font></td>
<td><textarea rows="4" cols="50" id="address"></textarea></td>
</tr>
<tr>
<td>Phone Number</td>
<td><input type="text" id="phonenumber"></td>
</tr>
<tr>
<td>Email Address</td>
<td><input type="text" id="email"></td>
</tr>
</table>
</fieldset>
<fieldset><legend>Choose Size and Crust</legend>
<table style="width:100%" >
<tr>
<th align="left">Hand Tossed</th>
<th align="left">Handmade Pan</th>
<th align="left">Crunchy Thin crust</th>
<th align="left">Brooklyn Style</th>
</tr>
<tr>
<td><input type="radio"name="type" id="SHT" value="8">Small (10"-$8)</td>
<td><input type="radio"name="type" id="MHP" value"10">Medium (12"-$10)</td>
<td><input type="radio"name="type" id="MCTC" value="10">Medium (12"-$10)</td>
<td><input type="radio"name="type" id="LBS" value="13">Large (14"-13$)</td>
</tr>
<tr>
<td><input type="radio"name="type" id="MHT" value="9">Medium (12"-$9)</td>
<td></td>
<td><input type="radio"name="type" id="LCTC" value="12">Large (14"-$12)</td>
<td><input type="radio"name="type" id="XLBS" value="15">X-Large (16"-$15)</td>
</tr>
<tr>
<td><input type="radio"name="type" id="LHT" value="10">Large (14"-$10)</td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td><input type="radio"name="type" id="XLHT" value="11">X-Large (16"-$11)</td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</fieldset>
<fieldset><legend> Choose Cheese & Sauce</legend>
<table >
<tr>
<td width="58%">Cheese?</td>
<td>Sauce?</td>
</tr>
<tr>
<td>
<select size="6">
<option id="nocheese" value="0">No Cheese</option>
<option id="lightcheese" value="1">Light - $1.00</option>
<option id="normalcheese" value="1.25">Normal - $1.25</option>
<option id="extracheese" value="1.5">Extra - $1.50</option>
<option id="dblcheese" value="1.75">Double - $1.75</option>
<option id="tplcheese" value="2">Triple - $2.00</option>
</select>
</td>
<td valign="top">
<select size="4">
<option id="nosauce" value="0">No Sauce</option>
<option id="lightsauce" value="0.5">Light - $0.50</option>
<option id="normalsauce" value="1">Normal - $1.00</option>
<option id="extrasauce" value="1.5">Extra - $1.50</option>
</select>
</td>
</tr>
</table>
</fieldset>
<fieldset><legend> Toppings (You can choose more than one - $2 each)</legend>
<table >
<tr>
<td width="50%"
><input type="checkbox" id="pepporoni" value="2">Pepporoni</td>
<td><input type="checkbox" id="blackolive" value="2">Black Olives</td>
</tr>
<tr>
<td><input type="checkbox" id="mushroom" value="2">Mushrooms</td>
<td><input type="checkbox" id="greenpepper" value="2">Green Peppers</td>
</tr>
<tr>
<td><input type="checkbox" id="onions" value="2">Onions</td>
<td><input type="checkbox">Pineapple</td>
</tr>
<tr>
<td><input type="checkbox" id="sausage" value="2">Sausage</td>
<td><input type="checkbox" id="spinach" value="2">Spinach</td>
</tr>
<tr>
<td><input type="checkbox" id="bacon" value="2">Bacon</td>
</table>
</fieldset>
<button type="submit" value="Submit">Submit</button>
<button type="reset" value="Reset">Reset</button>
</form>
</body>
</html>
Here's what the website looks like so far
If you are using HTML5 you can use a time input, like this:
<INPUT id="MyId" name="MyName" type="time">
More information on HTML5 input types.
If you are not using HTML5, you'll have to write a bit of script, or use one of many jquery time picker plugins available freely.
On the List.js site, they show how to use tables and even provide an example at http://www.listjs.com/examples/table.
<tr>
<td class="name">Jonny Stromberg</td>
<td class="born">1986</td>
</tr>
However, I want to use input values instead.
<tr>
<input class="name" value="Jonny Stromberg">
<input class="born" value="1986">
</tr>
The outcome is unexpected, with the input values rendering as empty. However, the ultimate goal is to give the input values names and save the columns/rows in a session. Has anyone been in the same boat?
Try wrapping the <input> in a <td></td> tag. You have set the value of the <inputs> tags correctly and so they should populate correctly.
Something like so worked fine for me:
<table>
<!-- IMPORTANT, class="list" have to be at tbody -->
<tbody class="list">
<tr>
<td><input class="name" value="Jonny Stromberg"></td>
<td><input class="born" value="1986"></td>
</tr>
<tr>
<td><input class="name" value="Jonas Arnklint"></td>
<td><input class="born" value="1985"></td>
</tr>
<tr>
<td><input class="name" value="Martina Elm"></td>
<td><input class="born" value="1986"></td>
</tr>
<tr>
<td><input class="name" value="Gustaf Lindqvist"></td>
<td><input class="born" value="1983"></td>
</tr>
</tbody>
</table>
JSFiddle - https://jsfiddle.net/oLbey91h/1/
I was able to achieve the desired result using an input field and filling the value attribute. Here's a Pastebin: http://pastebin.com/dEfjdNCi.
Notice that in "options" the class name points to the attribute "value."
<div id="users">
<table>
<!-- IMPORTANT, class="list" have to be at tbody -->
<tbody class="list">
<tr>
<td style="display:none;"><input class="id" type="hidden"></td>
<td><input class="name"></td>
<td><input class="born"></td>
</tr>
</tbody>
</table>
</div>
<script>
$(document).ready(function () {
var options = {
valueNames: [
{attr: 'value', name: 'id'},
{attr: 'value', name: 'name'},
{attr: 'value', name: 'born'},
]
};
</script>
I'm having a pb with jqgrid used with knockoutjs.
I have an HTML table witch contains checkboxes binded using konckoutjs that works fine,
but when i fired the tableToGrid function of JQGRID, my checkboxes lose their binding.
Thanks
JS
var listuserProfile = [];
var viewModel = {
userProfile: ko.observableArray(listuserProfile)
};
$(document).ready(function () {
//Fire knockoutjs
ko.applyBindings(viewModel);
//Init the user profiles list
viewModel.userProfile(#Html.Raw(Json.Encode(Model.UserProfiles)));
tableToGrid("#userProfiles");
});
HTML
<table id="userProfiles">
<thead>
<tr>
<th>User</th>
<th>Admin</th>
<th>Manager</th>
<th>ADV</th>
<th>HR</th>
<th>DG</th>
</tr>
</thead>
<tbody data-bind="foreach: userProfile">
<tr>
<td><span data-bind="text: User"></span></td>
<td><input disabled="disabled" type="checkbox" data-bind="checked: Admin" /></td>
<td><input disabled="disabled" type="checkbox" data-bind="checked: Manager" /></td>
<td><input disabled="disabled" type="checkbox" data-bind="checked: ADV" /></td>
<td><input disabled="disabled" type="checkbox" data-bind="checked: HR" /></td>
<td><input disabled="disabled" type="checkbox" data-bind="checked: DG" /></td>
</tr>
</tbody>
</table>
without the call of the tabletogrid it works fine!!!
I am using spring 3 JSP tab lib to generate HTML. I have a select box with following code -
<form:select path="categoryList" multiple="false">
<form:option value="" label="--" selected="selected"/>
<form:options items="${categoryList}" itemValue="catId" itemLabel="catName"/>
</form:select>
HTML getting generated is -
<select id="categoryList" name="categoryList">
<option selected="selected" value="">--</option>
<option value="1" selected="selected">S</option>
<option value="2" selected="selected">Ster</option>
<option value="3" selected="selected">ice</option>
<option value="4" selected="selected">Cees</option>
</select>
Issue is all options getting generated has selected="selected" which makes "Cees" selected on page rather then "--". Can someone please let me know ohw to fix this?
complete page -
<form:form modelAttribute="productManagerVO" name="productManager" id="productManager">
<jsp:directive.include file="../common/header.jsp" />
<div class="MainDiv">
<div class="ManagerHeadline">Product Manager</div>
<table cellspacing="2px" cellpadding="0" width="100%">
<tr>
<td width="100%">
<fieldset>
<legend class="checkoutlegend">Category Information</legend>
<table align="left" id="addCategoryTable">
<tr><td><input type="button" id="addCat" value="Add New Category" /></td></tr>
</table>
<c:if test="${not empty productManagerVO.categoryList}">
<table cellspacing="2px" cellpadding="0" class="timeTable" id="categoryTable">
<th>Name</th>
<th>Order</th>
<th>Active</th>
<th> </th>
<c:forEach var="categoryListVO" items="${productManagerVO.categoryList}" varStatus="item">
<tr>
<td><c:out value="${categoryListVO.catName}" /></td>
<td><c:out value="${categoryListVO.catOrder}" /></td>
<td><c:if test="${categoryListVO.categoryActive}">Yes</c:if>
<c:if test="${!categoryListVO.categoryActive}">No</c:if>
</td>
<td>edit</td>
</tr>
</c:forEach>
</table>
</c:if>
</fieldset>
</td>
</tr>
<tr>
<td width="100%">
<fieldset>
<legend class="checkoutlegend">Product Information</legend>
<table align="left" id="addProductTable">
<tr>
<td><input type="button" id="addPro" value="Add New Product"/></td>
</tr>
</table>
<table cellspacing="2px" cellpadding="0" class="timeTable" id="productTable">
<col width="10%" />
<col width="7%" />
<col width="40%" />
<col width="10%" />
<col width="5%" />
<col width="6%" />
<col width="7%" />
<col width="10%" />
<col width="5%" />
<tr>
<th>Name</th>
<th>Subname</th>
<th>Description</th>
<th>Veg</th>
<th>Spicy</th>
<th>Is Active</th>
<th>Price</th>
<th>Category</th>
<th> </th>
</tr>
<c:if test="${not empty productManagerVO.productList}">
<c:forEach var="productListVO" items="${productManagerVO.productList}" varStatus="item">
<tr>
<td><c:out value="${productListVO.fName}" /></td>
<td><c:out value="${productListVO.fSubname}" /></td>
<td><c:out value="${productListVO.fDesc}" /></td>
<td><c:if test="${productListVO.fVeg}">Yes</c:if>
<c:if test="${!productListVO.fVeg}">No</c:if></td>
<td><c:if test="${productListVO.fSpicy}">Yes</c:if>
<c:if test="${!productListVO.fSpicy}">No</c:if></td>
<td><c:if test="${productListVO.fActive}">Yes</c:if>
<c:if test="${!productListVO.fActive}">No</c:if></td>
<td><c:out value="${productListVO.fPrice}" /></td>
<td><c:out value="${productListVO.categoryName}" /></td>
<td><a id="product" href="#editProduct" onclick="editProductData('${productListVO.fId}')">edit</a></td>
</tr>
</c:forEach>
</c:if>
</table>
</fieldset>
</td>
</tr>
</table>
</div>
<div style="display:none">
<div id="addCategory">
<table cellspacing="2px" cellpadding="0" class="adminTable" style="border:1px solid #dadada;">
<tr>
<td style="font-weight:bold;">Category Name</td>
<td><input type="text" id="caddName" /></td>
</tr>
<tr>
<td style="font-weight:bold;">Category Description</td>
<td><input type="text" id="caddDesc" /></td>
</tr>
<tr>
<td style="font-weight:bold;">Category Order</td>
<td><input type="text" id="caddOrder" /></td>
</tr>
<tr>
<td style="font-weight:bold;">Is Active</td>
<td>Yes <input type="radio" value="y" name="catActive"/> No <input type="radio" value="n" name="catActive"/></td>
</tr>
<tr>
<td colspan="2"><input type="button" id="cSave" name="catSave" value="Submit" onclick="addNewCategory();"/></td>
</tr>
</table>
</div>
<div id="editCategory">
<table cellspacing="2px" cellpadding="0" class="adminTable" style="border:1px solid #dadada;">
<tr>
<td style="font-weight:bold;">Category Name</td>
<td><input type="text" id="ceName" name="ceName"/></td>
</tr>
<tr>
<td style="font-weight:bold;">Category Description</td>
<td><input type="text" id="ceDesc" name="ceDesc"/></td>
</tr>
<tr>
<td style="font-weight:bold;">Category Order</td>
<td><input type="text" id="ceOrder" /></td>
</tr>
<tr>
<td style="font-weight:bold;">Is Active</td>
<td><input type="radio" id="ceActiveY" name="cateActive" value="y"/> Yes
<input type="radio" id="ceActiveN" name="cateActive" value="n"/> No</td>
</tr>
<tr><td colspan="2"><input type="button" id="cSave" name="catSave" value="Submit" onClick="editSaveCategory();"/></td>
<td><input type="hidden" id="ceId"/></td>
</tr>
</table>
</div>
<div id="addProduct">
<table cellspacing="2px" cellpadding="0" class="adminTable" style="border:1px solid #dadada;">
<tr>
<td style="font-weight:bold;">Product Name</td>
<td><input type="text" id="paName" /></td>
</tr>
<tr>
<td style="font-weight:bold;">Product SubName</td>
<td><input type="text" id="paSubName" /></td>
</tr>
<tr>
<td style="font-weight:bold;"> Product Description</td>
<td><input type="text" id="paDesc" /></td>
</tr>
<tr>
<td style="font-weight:bold;">Price</td>
<td><input type="text" id="paPrice" /></td>
</tr>
<tr>
<td style="font-weight:bold;">Is Vegetarian</td>
<td>Yes <input type="radio" id="paVeg" name="proVeg" value="y"/> No <input type="radio" id="paVeg" name="proVeg" value="n"/></td>
</tr>
<tr>
<td style="font-weight:bold;">Is Spicy</td>
<td>Yes <input type="radio" id="paSpicy" name="proSpicy" value="y"/> No <input type="radio" id="paSpicy" name="proCpicy" value="n"/></td>
</tr>
<tr>
<td style="font-weight:bold;">Is Active</td>
<td>Yes <input type="radio" id="paActive" name="proActive" value="y"/> No <input type="radio" id="paActive" name="proActive" value="n"/></td>
</tr>
<tr>
<td style="font-weight:bold;">Category</td>
<td>
<form:select path="categoryList" multiple="single">
<form:option value="" label="--"/>
<form:options items="${productManagerVO.categoryList}" itemValue="catId" itemLabel="catName"/>
</form:select>
</td>
</tr>
<tr>
<td colspan="2"><input type="button" id="caSave" name="cataSave" value="Submit"/></td>
</tr>
</table>
</div>
<div id="editProduct">
<table cellspacing="2px" cellpadding="0" class="adminTable" style="border:1px solid #dadada;">
<tr>
<td style="font-weight:bold;">Product Name</td>
<td><input type="text" id="peName" /></td>
</tr>
<tr>
<td style="font-weight:bold;">Product SubName</td>
<td><input type="text" id="peSubName" /></td>
</tr>
<tr>
<td style="font-weight:bold;"> Product Description</td>
<td><input type="text" id="peDesc" /></td>
</tr>
<tr>
<td style="font-weight:bold;">Price</td>
<td><input type="text" id="pePrice" /></td>
</tr>
<tr>
<td style="font-weight:bold;">Is Vegetarian</td>
<td>Yes <input type="radio" id="peVegY" name="proeVeg" value="y"/> No <input type="radio" id="peVegN" name="proeVeg" value="n"/></td>
</tr>
<tr>
<td style="font-weight:bold;">Is Spicy</td>
<td>Yes <input type="radio" id="peSpicyY" name="proeSpicy" value="y"/> No <input type="radio" id="peSpicyN" name="proeSpicy" value="n"/></td>
</tr>
<tr>
<td style="font-weight:bold;">Is Active</td>
<td>Yes <input type="radio" id="peActiveY" name="proeActive" value="y"/> No <input type="radio" id="peActiveN" name="proeActive" value="n"/></td>
</tr>
<tr>
<td style="font-weight:bold;">Category</td>
<td>
<form:select path="categoryList" multiple="single" id="peCat">
<form:option value="" label="--"/>
<form:options items="${productManagerVO.categoryList}" itemValue="catId" itemLabel="catName"/>
</form:select>
</td>
</tr>
<tr><td>
<td colspan="2"><input type="button" id="peSave" name="proeSave" value="Submit" onClick="editSaveProduct();"/></td>
<input type="text" id="peId"/></td>
</tr>
</table>
</div>
</div>
</form:form>
Try removing the selected=selected on your first item. I don't think its necessary as the list will display in the order you specified - unless you want -- to be the default selection if the form is submitted without this select being touched?
Try this:
<form:select path="categoryList" multiple="single">
<form:option value="" label="--"/>
<form:options items="${categoryList}" itemValue="catId" itemLabel="catName"/>
</form:select>
I've only changed the multiple attribute and removed the selected attribute from the option. This works for me...and i think, must also work for you.
edit:
It seems to be okay, only your last <tr> is wrong...you have two <td> in a row, without </td>
<tr>
<td>
<td colspan="2">
<input type="button" id="peSave" name="proeSave" value="Submit" onClick="editSaveProduct();"/>
</td>
<input type="text" id="peId"/>
</td>
</tr>
must be something like
<tr>
<td>
<input type="button" id="peSave" name="proeSave" value="Submit" onClick="editSaveProduct();"/>
</td>
<td colspan="2">
<input type="text" id="peId"/>
</td>
</tr>
Second, why are you using c:out? You can replace <td><c:out value="${categoryListVO.catName}" /></td> with <td>${categoryListVO.catName}</td>...
Third - this construction
<td><c:if test="${productListVO.fActive}">Yes</c:if>
<c:if test="${!productListVO.fActive}">No</c:if></td>
can you replace with
<c:choose>
<c:when test="${productListVO.fActive}">
Yes
</c:when>
<c:otherwise>
No
</c:otherwise>
</c:choose>
I find this way better...the rest seems to be okay, i can't find anything, what can cause the problem. Search for other not properly closed tags. Is there any warnings/messages from the jsp editor?
I had this problem, and after a lot of digging around in Spring I found what was causing it for me. It was something very specific in my case but there is a general point, which is this.
Spring goes to a great deal of trouble to try to work out what the selected option should be. I started digging around in the OptionWriter and then moved down into the SelectedValueComparator. This tries all manner of comparisons to work out if the current option value should be selected. In the end it falls back to the Propertyeditors and Converters (which is where my mistake was).
So I wonder if your CategoryList class had a badly implemented equals method or a converter that doesn't convert properly (mine always converted into the same object)?