This is my form in jsp
<form action="submit">
<tr class="row" id="item1">
<td><input type="text" name="type" class="type" style="width: 50px"/></td>
<td><input type="text" name="color" class="color" style="width: 50px"/></td>
<td><input type="text" name="qty" class="qty" style="width: 50px"/></td>
<td><input type="text" name="unitprice" class="unitPrice" style="width: 50px"/></td>
</tr>
...
<tr class="row" id="itemN">
<td><input type="text" name="type" class="type" style="width: 50px"/></td>
<td><input type="text" name="color" class="color" style="width: 50px"/></td>
<td><input type="text" name="qty" class="qty" style="width: 50px"/></td>
<td><input type="text" name="unitprice" class="unitPrice" style="width: 50px"/></td>
</tr>
</form>
I want to fetch data which may contain 1 to N items and each item contais type color qty and unitprice. I want to store all these data in ArrayList variable.
How to do this?
What you need is Tabular Input
Related
Html code
<label class="control-label">Contact Person</label>
<input class="form-control" type="text" placeholder="Enter Contact name" data-bind="value: ContactPerson" data-validate='{"required":"true"}'><br />
<label class="control-label">ContactNo</label>
<input class="form-control" type="tel" data-bind="value: ContactNo" placeholder="ContactNo" data-validate='{"required":"true"}'><br />
<label class="control-label">E-Mail</label>
<input class="form-control" type="email" data-bind="value: Email" placeholder="Email" data-validate='{"required":"true","email":"true"}'><br />
<table class="table table-hover table-bordered" id="listTable">
<thead>
<tr>
<th>ContactPerson</th>
<th>ContactNo</th>
<th>Email</th>
<th></th>
</tr>
</thead>
<tbody data-bind="template:{name: 'Process-list',
foreach: rootViewModel.BodyContent.ProcessList }">
</tbody>
</table>
when I click on add button the data in the three text box should bind to grid ,
and when i click on delete button of row in grid it should disappear for this i need viewmodel.
Thanks
Here's a quick view model that does the requirements. I selected ContactNo as the primary key since they're supposed to be unique. You can use ids if needed instead. It would also be a good idea to run your validations before add method is called.
var viewModel = function(){
var self = this;
self.ContactPerson = ko.observable();
self.ContactNo = ko.observable();
self.Email = ko.observable();
self.ProcessList = ko.observableArray();
self.add = function(){
self.ProcessList.push({
ContactPerson: self.ContactPerson(),
ContactNo: self.ContactNo(),
Email: self.Email(),
});
self.ContactPerson('');
self.ContactNo('');
self.Email('');
};
self.delete = function(data, event){
self.ProcessList.remove(function(listObject){
return listObject.ContactNo === data.ContactNo;
});
};
};
ko.applyBindings(new viewModel());
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<label class="control-label">Contact Person</label>
<input class="form-control" type="text" placeholder="Enter Contact name" data-bind="value: ContactPerson" data-validate='{"required":"true"}'><br />
<label class="control-label">ContactNo</label>
<input class="form-control" type="tel" data-bind="value: ContactNo" placeholder="ContactNo" data-validate='{"required":"true"}'><br />
<label class="control-label">E-Mail</label>
<input class="form-control" type="email" data-bind="value: Email" placeholder="Email" data-validate='{"required":"true","email":"true"}'><br />
<button data-bind="click: add">Add Data</button>
<table class="table table-hover table-bordered" id="listTable">
<thead>
<tr>
<th>ContactPerson</th>
<th>ContactNo</th>
<th>Email</th>
<th></th>
</tr>
</thead>
<tbody data-bind="template:{name: 'Process-list',
foreach: ProcessList }">
</tbody>
</tbody>
</table>
<script type="text/html" id="Process-list">
<tr>
<td data-bind="text: ContactPerson"></td>
<td data-bind="text: ContactNo"></td>
<td data-bind="text: Email"></td>
<td><button data-bind="click: $root.delete">Delete</button></td>
</tr>
</script>
I use spring boot with thymeleaf, in a page try to display a form and it's nested object.
My object Factories has
id
name
List
When I display
<form id="factoriesForm" th:object="${factories}" >
...
...
<table id="machinesTable" class="table table-striped table-hover responsive">
<thead>
<tr>
<th th:text="#{name}">Name</th>
<th th:text="#{description}">Description</th>
<th></th>
</tr>
</thead>
<tbody>
<tr th:each="machine, stat : ${machines}">
<td>
<input type="hidden" th:id="${'machineId-'+stat.index}" th:field="*{machines[__${stat.index}__].id}" />
<input type="text" class="form-control" th:id="${'machineName-'+stat.index}" th:placeholder="#{name.placeholder}" placeholder="Name" th:field="*{machines[__${stat.index}__].name}" />
</td>
<td> <input type="text" class="form-control" th:id="${'machineDescription-'+stat.index}" th:placeholder="#{description.placeholder}" placeholder="Description" th:field="*{machines[__${stat.index}__].description}" /></td>
<td> <i class="fas fa-trash-alt"></i></td>
</tr>
</tbody>
</table>
</form>
My factories has many machines, but none is displayed
Any idea?
change
${factories}
for
*{factories}
I have inputtext filed in my gsp llike this :
<tr class="context">
<td width="5%" ><a class="addButton" href="#" style="display:none;" >+</a></td>
<td width="60%"><input type="text" name="iwd0_description" value="" id="iwd0_description" /></td>
<td width="10%"><input type="text" name="iwd0_tax" value="" id="iwd0_tax" /></td>
<td width="10%"><input type="text" name="iwd0_discount" value="" id="iwd0_discount" /></td>
<td width="10%"><input type="null" name="iwd0_total" value="0" required="" id="iwd0_total" /></td>
<td width="5%" ><a class="deleteButton" href="#" style="display:none;" >-</a></td>
</tr>
<tr class="context">
<td width="5%" ><a class="addButton" href="#" style="display:none;" >+</a></td>
<td width="60%"><input type="text" name="iwd1_description" value="" id="iwd1_description" /></td>
<td width="10%"><input type="text" name="iwd1_tax" value="" id="iwd1_tax" /></td>
<td width="10%"><input type="text" name="iwd1_discount" value="" id="iwd1_discount" /></td>
<td width="10%"><input type="null" name="iwd1_total" value="0" required="" id="iwd1_total" /></td>
<td width="5%" ><a class="deleteButton" href="#" style="display:none;" >-</a></td>
</tr>
How can I access to input value in my controller?
Form values are sent over HTTP using request parameters (for GET requests), with the input name attribute used to set the parameter "key". So your HTTP request will have the following params: ?iwd0_tax=userInput1&iwd0_discount=userInput2 etc.
Grails makes request parameters available by the params var in controllers:
def iwd0_tax = params.iwd0_tax
Grails can also populate a bean/class from the request params automatically. The bean is called a command object. See details in the Grails docs.
def i = 0
while (params."iwd${i}_tax") {
println 'tax'+"${i}" + params."iwd${i}_tax"
i++
}
Here is my demo http://jsfiddle.net/PZGQp/3/
In 'group 1' I have a radio group as a vertical controlgroup.
I am trying to put a text field to the right of each radio button - as in 'group 2' (code below).
Is it possible to do this while retaining the controlgroup behaviour of the radio buttons - failing that to have rounded rather than square corners on the radio buttons?
<fieldset data-role="controlgroup" data-theme="b">
<table width="100%">
<tr>
<td width="80%"><input type="radio" id="radio-1" value="" class="radioclass" />
<label for="radio-1">1</label></td>
<td width="10%"><input type="text" placeholder="Qty" id="qty"></td>
</tr>
<tr>
<td width="80%"><input type="radio" id="radio-2" value="" class="radioclass" />
<label for="radio-2">2</label></td>
<td width="10%"><input type="text" placeholder="Qty" id="qty"></td>
</tr>
<td width="80%"><input type="radio" id="radio-3" value="" class="radioclass" />
<label for="radio-3">3</label></td>
<td width="10%"><input type="text" placeholder="Qty" id="qty"></td>
</tr>
</table>
</fieldset>
I hope I understood you correctly.
Working jsFiddle example: http://jsfiddle.net/Gajotres/uwq8b/
HTML used:
<div class="ui-grid-a">
<div class="ui-block-a">
<fieldset data-role="controlgroup" data-theme="a">
<input type="radio" id="radio-1" name="radio-1" value="" class="radioclass" />
<label for="radio-1">1</label>
<input type="radio" id="radio-2" name="radio-1" value="" class="radioclass" />
<label for="radio-2">2</label>
<input type="radio" id="radio-3" name="radio-1" value="" class="radioclass" />
<label for="radio-3">3</label>
</fieldset>
</div>
<div class="ui-block-b">
<input type="text" placeholder="Qty" id="qty"/>
<input type="text" placeholder="Qty" id="qty"/>
<input type="text" placeholder="Qty" id="qty"/>
</div>
</div><!-- /grid-a -->
CSS used:
.ui-block-a {
width: 80% !important;
padding-top: 0.5em;
}
.ui-block-b {
width: 20% !important;
padding-top: 0.5em;
}
fieldset.ui-controlgroup {
margin: 0 !important;
}
div.ui-input-text {
margin: 0 0 0.3em 0 !important;
}
I am in the process of creating a new MVC v3 Razor web application and seem to be having issues in reading values from partial views.
I have a ViewModel (title) which is made up of three other ViewModels
public ProfileVM Profile { get; set; }
public SpecsVM Specs { get; set; }
public GeneralVM General { get; set; }
public Guid Id { get; set; }
I have a page which is strongly typed to the Title view model, on which I am using the #Html.RenderPartial syntax to render each of the other ViewModels (profile etc) to different partial view
This appears to be working correctly, but I would like only one button on the page to handle the posting of data, and want to capture the values entered by the user into the partial views.
Is this possible?
Thanks in advance
Generated HTML as requested of the form sections. I've not added the master page information
<form action="/Titles/Title/Edit/2bb75b02-9dd7-e011-971f-0003fffb8797" method="post">
<fieldset>
<h1>
Title Details</h1>
<form action="/Titles/Title/Edit/2bb75b02-9dd7-e011-971f-0003fffb8797" method="post">
<fieldset>
<p>
<input type="submit" value="Save" name="TitleGeneral"/>
</p>
<hr />
<table>
<tr>
<td class="editor-label" style="width: 150px;"><label for="TitleCode">Code</label>
</td>
<td class="editor-label">
<input class="text-box single-line" id="TitleCode" name="TitleCode" type="text" value="T00006" /> <span class="field-validation-valid" data-valmsg-for="TitleCode" data-valmsg-replace="true"></span>
</td>
<td rowspan="7"> <img src="../../../../Content/demoBF.jpg" width="150px" height="150px" /></td>
</tr>
<tr>
<td class="editor-label">
<label for="TitleName">Title</label>
</td>
<td class="editor-label">
<input class="text-box single-line" id="TitleName" name="TitleName" type="text" value="Beaches Of France" />
<span class="field-validation-valid" data-valmsg-for="TitleName" data-valmsg-replace="true"></span>
</td>
</tr>
<tr>
<td class="editor-label">
<label for="SubTitle">Sub Title</label>
</td>
<td class="editor-label"><input class="text-box single-line" id="SubTitle" name="SubTitle" type="text" value="" />
<span class="field-validation-valid" data-valmsg-for="SubTitle" data-valmsg-replace="true"></span>
</td>
</tr>
<tr>
<td class="editor-label">
<label for="SortingTitle">Sorting Title (If Different)</label>
</td>
<td class="editor-label">
<input class="text-box single-line" id="SortingTitle" name="SortingTitle" type="text" value="" />
<span class="field-validation-valid" data-valmsg-for="SortingTitle" data-valmsg-replace="true"></span>
</td>
</tr>
<tr>
<td class="editor-label"><label for="ShortTitle">Short or abbreviated title</label>
</td>
<td class="editor-label"><input class="text-box single-line" id="ShortTitle" name="ShortTitle" type="text" value="TRO1" />
<span class="field-validation-valid" data-valmsg-for="ShortTitle" data-valmsg-replace="true"></span>
</td>
</tr>
<tr>
<td class="editor-label"><label for="Comments">Comments</label>
</td>
<td class="editor-label">
<input class="text-box single-line" id="Comments" name="Comments" type="text" value="" />
<span class="field-validation-valid" data-valmsg-for="Comments" data-valmsg-replace="true"></span>
</td>
</tr>
<tr>
<td class="editor-label">
<label for="Author">Author</label>
</td>
<td class="editor-label">
<input class="text-box single-line" id="Author" name="Author" type="text" value="" />
<span class="field-validation-valid" data-valmsg-for="Author" data-valmsg-replace="true"></span>
</td>
</tr>
</table>
</fieldset>
</form> <br />
<br />
<ul class="tabs">
<li>Profile</li>
<li>Specification</li>
<li>Authors</li>
<li>Editions</li>
<li>Restrictions</li>
<li>Licences</li>
<li>Purchases</li>
<li>Restrictions</li>
</ul>
<div class="tab_container">
<div id="tab1" class="tab_content">
<!--Content-->
<form action="/Titles/Title/Edit/2bb75b02-9dd7-e011-971f-0003fffb8797" method="post">
<fieldset>
<p>
<input type="submit" value="Save" name="TitleProfile"/>
</p>
</fieldset>
</form> </div>
<div id="tab2" class="tab_content">
<!--Content-->
<form action="/Titles/Title/Edit/2bb75b02-9dd7-e011-971f-0003fffb8797" method="post">
<fieldset>
<table>
<tr>
<td class="editor-label" style="width: 150px;"><label for="Pages">Pages</label>
</td>
<td class="editor-label"><input class="text-box single-line" data-val="true" data-val-number="The field Pages must be a number." id="Pages" name="Pages" type="text" value="96" />
<span class="field-validation-valid" data-valmsg-for="Pages" data-valmsg-replace="true"></span>
</td>
</tr>
<tr>
<td class="editor-label"><label for="Plates">Plates or illustrations</label>
</td>
<td class="editor-label"><input class="text-box single-line" data-val="true" data-val-number="The field Plates or illustrations must be a number." id="Plates" name="Plates" type="text" value="64" />
<span class="field-validation-valid" data-valmsg-for="Plates" data-valmsg-replace="true"></span>
</td>
</tr>
<tr>
<td class="editor-label">
<label for="PlateType">Plate Type</label>
</td>
<td class="editor-label"><input class="text-box single-line" id="PlateType" name="PlateType" type="text" value="Full-colour photographs" />
<span class="field-validation-valid" data-valmsg-for="PlateType" data-valmsg-replace="true"></span>
</td>
</tr>
<tr>
<td class="editor-label">
<label for="Format">Format</label>
</td>
<td class="editor-label"><input class="text-box single-line" id="Format" name="Format" type="text" value="" />
<span class="field-validation-valid" data-valmsg-for="Format" data-valmsg-replace="true"></span>
</td>
</tr>
<tr>
<td class="editor-label">
<label for="OtherSpecs">Other specifications</label>
</td>
<td class="editor-label">
<input class="text-box single-line" id="OtherSpecs" name="OtherSpecs" type="text" value="" />
<span class="field-validation-valid" data-valmsg-for="OtherSpecs" data-valmsg-replace="true"></span>
</td>
</tr>
</table>
</fieldset>
</form> </div>
<div id="tab3" class="tab_content">
<!--Content-->
<form action="/Titles/Title/Edit/2bb75b02-9dd7-e011-971f-0003fffb8797" method="post">
<fieldset>
<table>
<tr>
<td class="editor-label" style="width: 150px;"><label for="Pages">Pages</label>
</td>
<td class="editor-label"><input class="text-box single-line" data-val="true" data-val-number="The field Pages must be a number." id="Pages" name="Pages" type="text" value="96" />
<span class="field-validation-valid" data-valmsg-for="Pages" data-valmsg-replace="true"></span>
</td>
</tr>
<tr>
<td class="editor-label"><label for="Plates">Plates or illustrations</label>
</td>
<td class="editor-label"><input class="text-box single-line" data-val="true" data-val-number="The field Plates or illustrations must be a number." id="Plates" name="Plates" type="text" value="64" />
<span class="field-validation-valid" data-valmsg-for="Plates" data-valmsg-replace="true"></span>
</td>
</tr>
<tr>
<td class="editor-label">
<label for="PlateType">Plate Type</label>
</td>
<td class="editor-label"><input class="text-box single-line" id="PlateType" name="PlateType" type="text" value="Full-colour photographs" />
<span class="field-validation-valid" data-valmsg-for="PlateType" data-valmsg-replace="true"></span>
</td>
</tr>
<tr>
<td class="editor-label">
<label for="Format">Format</label>
</td>
<td class="editor-label"><input class="text-box single-line" id="Format" name="Format" type="text" value="" />
<span class="field-validation-valid" data-valmsg-for="Format" data-valmsg-replace="true"></span>
</td>
</tr>
<tr>
<td class="editor-label">
<label for="OtherSpecs">Other specifications</label>
</td>
<td class="editor-label">
<input class="text-box single-line" id="OtherSpecs" name="OtherSpecs" type="text" value="" />
<span class="field-validation-valid" data-valmsg-for="OtherSpecs" data-valmsg-replace="true"></span>
</td>
</tr>
</table>
</fieldset>
</form> </div>
</div>
</fieldset>
</form><div>
Back to List
</div>
</td></tr>
</table>
The problem is that the names of the input fields are incorrect. They are missing the prefix indicating the main parent property name. That's due to trhe usage of partials instead of editor templates. Jimmy Bogard explained this perfectly in this blog post.
So instead of:
#Html.Partial("_somePartial", Model.Profile)
use:
#Html.EditorFor(x => x.Profile)
and the framework will take care of properly naming the fields.