Programmatically added rows in jsp aren't sent to controller in Spring - java

I have 2 classes:
public class IndividualRate {
private String currency;
private String operation;
private double rate;
private double amount;
//controller, getters and setters
}
public class IndividualRateList {
private List<IndividualRate> individualRates = new ArrayList<>();
//controller, getters and setters
}
In JSp I have table and form tag for sending data to Spring:
<tbody id="rateBody">
<form:form method="POST" cssClass="forms" id="formRateSubmit" action="${urlRates}"
modelAttribute="individualRateList">
<tr id="row1">
<td>
<select name="individualRates[0].currency" id="listOfCurrency1">
<option selected="selected" value=""><spring:message code="label.please.select"/></option>
<c:forEach var="item" items="${currencyRates}" varStatus="loop">
<option value="${item.currency}" >${item.currency}</option>
</c:forEach>
</select>
</td>
<td>
<input type="radio" name="individualRates[0].operation" value="Buying" checked="true"/><spring:message code="label.buying.operation"/>
<input type="radio" name="individualRates[0].operation" value="Selling"/> <spring:message code="label.selling.operation"/>
</td>
<td>
<input type="text" name="individualRates[0].rate" id="txtRate1" size="10"/>
</td>
<td>
<input type="text" name="individualRates[0].amount" id="txtAmount1" size="10"/>
</td>
<td>
<a href="javascript:void(0);" id="deleteRow1" class="btn-remove"
style="color: #f00; text-decoration: none;" onclick="deleteRow('1')">X</a>
</td>
</tr>
<tr id="row2">
<td>
<select name="individualRates[1].currency" id="listOfCurrency2">
<option selected="selected" value=""><spring:message code="label.please.select"/></option>
<c:forEach var="item" items="${currencyRates}" varStatus="loop">
<option value="${item.currency}" >${item.currency}</option>
</c:forEach>
</select>
</td>
<td>
<input type="radio" name="individualRates[1].operation" value="Buying" checked="true"/><spring:message code="label.buying.operation"/>
<input type="radio" name="individualRates[1].operation" value="Selling"/> <spring:message code="label.selling.operation"/>
</td>
<td>
<input type="text" name="individualRates[1].rate" id="txtRate2" size="10"/>
</td>
<td>
<input type="text" name="individualRates[1].amount" id="txtAmount2" size="10"/>
</td>
<td>
<a href="javascript:void(0);" id="deleteRow2" class="btn-remove"
style="color: #f00; text-decoration: none;" onclick="deleteRow('2')">X</a>
</td>
</tr>
<%--</c:forEach>--%>
</form:form>
</tbody>
When I run this program both of 2 rows are sent to Spring. But the count of rows are mutable. I have button for adding new rows. If I comment second row (row2) and add this with addRow button second row isn't sent. The onClick function for addRow button:
$('#addRow').click(function () {
i = i + 1;
var row = document.getElementById("row1").cloneNode(true);
row.id = "row" + i;
var elementsInput = row.getElementsByTagName("input"); // 4 input tag
var elementSelect = row.getElementsByTagName("select"); // 1 select tag
//// Currency
elementSelect[0].id = "listOfCurrency" + i;
elementSelect[0].name = "individualRates[" + (i-1) + "].currency";
//// Operation
elementsInput[0].name = "individualRates[" + (i-1) + "].operation";
elementsInput[1].name = "individualRates[" + (i-1) + "].operation";
//// Rate
elementsInput[2].id = "txtRate" + i;
elementsInput[2].name = "individualRates[" + (i-1) + "].rate";
//// Amount
elementsInput[3].id = "txtAmount" + i;
elementsInput[3].name = "individualRates[" + (i-1) + "].amount";
document.getElementById("rateBody").appendChild(row);
});
Please, help me to solve this problem.

Related

How can I get disabled from input tag?

I need to get disabled from <input> tag.
HTML snippet is like:
<tr>
<td><input type="radio" name="orderChoice" value="1" checked></td>
<td>Audi A4, Auto, A/C, $50.00/day</td>
<td>user</td>
<td>Иванов Иван Иванович 1983-10-03 АВ954326 Святошинським РУ ГУ МВС України у м. Києві 2001-06-05</td>
<td>2021-07-10 18:00:00.0</td>
<td>2021-07-20 14:00:00.0</td>
<td>500.00</td>
<td> <input type="checkbox" name="processed" disabled> </td>
<td> <input type="checkbox" name="rejected" disabled> </td>
<td></td>
<td> <input type="checkbox" name="picked" disabled> </td>
<td> <input type="checkbox" name="returned" disabled> </td>
<td> <input type="checkbox" name="damaged" disabled> </td>
<td></td>
<td></td>
<td> <input type="checkbox" name="paid" disabled> </td>
</tr>
I have the loop which looks like:
for (Element tableRow : tableRows) { // iterate over all the table rows (tr elements)
Element row = tableRows.get(tableRow.elementSiblingIndex());
String vehicle = row.select("tr > td").get(1).text();
Element td = row.select("tr > td").get(10); // <td> <input type="checkbox" name="picked" disabled> </td>
Elements checkbox = td.select("td > input[type=checkbox]"); // <input type="checkbox" name="picked" disabled>
String picked = checkbox.attr("name"); // picked
tableList.add(new Table(picked, vehicle));
}
and I need to get disabled from input tag.
Can someone suggest me, please, the way how can I get it without specifying the value explicitly, since checkbox can be changed dynamically?
Thanks to #PeterMmmm and #dan1st suggestions, I've solved using attributes().hasKey("disabled") and first() methods like:
for (Element tableRow : tableRows) { //iterate over all the table rows (tr elements)
Element row = tableRows.get(tableRow.elementSiblingIndex());
String vehicle = row.select("tr > td").get(1).text();
Element td = row.select("tr > td").get(10);
Element input = td.select("td > input[type=checkbox]").first();
Elements checkbox = td.select("td > input[type=checkbox]");
String picked = checkbox.attr("name");
if (input.attributes().hasKey("disabled")) {
//...
} else {
//...
}
}

Displaying List elements in JSTL <c:/forEach> with counter variable

I have a scriptlet for-loop that displays movie schedules from a List<Schedule>.
<%
#SuppressWarnings("unchecked")
List<Schedule> scheduleList =
(ArrayList<Schedule>) session.getAttribute("scheduleList");
for (int ctr = 0; ctr < scheduleList.size(); ctr++) {
%>
<tr>
<td class="center">
<input type="radio" name="selection" value="<%=ctr%>" required title="Please select a schedule." />
</td>
<td><%=scheduleList.get(ctr).getMallId()%></td>
<td class="center"><%=scheduleList.get(ctr).getScheduleCinema()%></td>
<td>PHP <%=scheduleList.get(ctr).getSchedulePrice()%></td>
<td><%=scheduleList.get(ctr).getScheduleDate()%></td>
<td><%=scheduleList.get(ctr).getScheduleTime()%></td>
<td class="center"><%=scheduleList.get(ctr).getScheduleSeats()%></td>
</tr>
<%
}
%>
Here is the Schedule bean object for reference:
public class Schedule {
private int scheduleId;
private int movieId;
private String mallId;
private int scheduleCinema;
private BigDecimal schedulePrice;
private Date scheduleDate;
private Time scheduleTime;
private int scheduleSeats;
// getters and setters
}
I have managed to convert it to JSTL with my desired number of iterations (related thread).
<c:forEach var="ctr" begin="0" end="${scheduleList.size()-1}">
<tr>
<td class="center">
<input type="radio" name="selection" value="${ctr}" required title="Please select a schedule." />
</td>
<td>${schedule.mallId}</td>
<td>${schedule.scheduleCinema}</td>
<td>${schedule.schedulePrice}</td>
<td>${schedule.scheduleDate}</td>
<td>${schedule.scheduleTime}</td>
<td>${schedule.scheduleSeats}</td>
</tr>
</c:forEach>
Output:
Firefox Inspector:
<tr>
<td class="center">
<input type="radio" title="Please select a schedule." required="" value="0" name="selection"></input>
</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td class="center">
<input type="radio" title="Please select a schedule." required="" value="1" name="selection"></input>
</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
Unfortunately, the schedule details are not displaying.
How do I display the data of each Schedule element from the List<Schedule> in JSTL?
(The ctr is important by the way, its value will be needed in the next action.)
Instead of
<c:forEach var="ctr" begin="0" end="${scheduleList.size()-1}">
Use:
<c:forEach var="schedule" items="${scheduleList}" varStatus="ctr">
<tr>
<td class="center">
<input type="radio" name="selection" value="${ctr.index}" required title="Please select a schedule." />
</td>
For ctr you could maintain separate counter variable and increment within your forEach.
You can use varStatus as well as var variable in c:forEach
varStatus="loop"
and use it as ${loop.index}
e.g. see the example

Working with Java beans and Servlet values dynamically

I have a table that sends a form post of 5 input text with values to servlet. In servlet I get the values and set them into bean class, and the sum that I set it too to bean class as sum.Then I get the values and the sum on the jsp table.The problem, is that now Im creating a button that when I click, I insert a row after the last row, and I want to keep the values too with the sum, How can I do it?
This is my jsp that send the form to Servlet: Test.jsp
<jsp:useBean id="helloBean" scope="request" class="user.HelloBean" />
<form method="post" action="Servlet">
<table id= "sum_table">
<tr>
<td>Test</td>
<td>Total</td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td><input type="text" value="Test1" maxlength=25></td>
<td><input type="text" value="${helloBean.sum}" maxlength=3 readonly="readonly"></td>
<c:forEach items="${helloBean.values}" var="item">
<td><input type="text" id="val" name="values" value="${item}" maxlength=2/></td>
</c:forEach>
</tr>
</table>
<p><input type="submit"/></p>
<input type="button" id="btnAdd" value="+"/>
</form>
Now I got the values on servlet, calculate the sum and send them to java bean: Servlet.java
HelloBean hello = new HelloBean();
String[] values = request.getParameterValues("values");
if (values == null) {
values = new String[5];
for(int i = 0; i < 5; i++) {
values[i]= "0";
}
}
Integer sum = 0;
for (int i = 0; i < values.length; i++) {
hello.setSum(sum = sum + Integer.valueOf(values[i]));
hello.setValues(values);
}
request.setAttribute("helloBean", hello);
request.getRequestDispatcher("/Test.jsp").forward(request, response);
And this is my Bean Class: HelloBean.java
public class HelloBean {
String[] values;
Integer sum;
public Integer getSuma() {return sum;}
public void setSum(Integer integer) {this.sum = integer;}
public String[] getValues() {return values;}
public void setValues(String[] val) {this.values = val;}
}
This is how I add a new row:
$("#btnAdd").click(function () {
var row = $("#sum_table tbody > tr:last"),
newRow = row.clone(true);
newRow.find("input").each(function () {
var num = +(this.id.match(/\d+$/) || [0])[0] + 1;
this.id = this.id.replace(/\d+$/, "") + num;
this.name = this.id;
});
newRow.insertAfter(row);
return false;
});
Thank You in Advance!
Simply put a check on the value of sum in JSP page and based on its value add new row.
pseudo code:
if sum is not null then
add a new row in JSP
When page is loaded first time the value of the sum will be null and when redirected by servlet the value is populated and the sum will not be null and a new row is automatically created in the JSP page.
It should be like this and keep in mind the integer overflow problem.
int sum=0;
for (int i = 0; i < values.length; i++) {
sum = sum + Integer.valueOf(values[i]);
}
hello.setValues(values);
hello.setSum(sum);
It should look like in JSP:
<%# taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<tr>
<td><input type="text" value="Test1" maxlength="25"/></td>
<c:forEach items="${helloBean.values}" var="item">
<td><input type="text" name="values" value="${item}" maxlength="2"/></td>
</c:forEach>
</tr>
<c:if test="${helloBean.sum != null}">
<tr>
<td><input type="text" value="${helloBean.sum}" maxlength="3" readonly="readonly"/></td>
</tr>
</c:if>
Some points:
ID must be unique in the whole page. Multiple input components are created with the same id val in the loop.
Use double quotes around the attribute values of the each tag. Is it typo?
property sum is not readable on type user.HelloBean because there is no getSum() method in class.
Don't need the Bean class
You can add keyup event for input
<form method="post" action="Servlet">
<table id= "sum_table">
<tr>
<td>Test</td>
<td>Total</td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td class="test"><input type="text" name="test" value="Test1" maxlength=25></td>
<td class="sum"><input type="text" name="sum" value="" maxlength=3 readonly="readonly"></td>
<td><input type="text" name="mark1" value="" maxlength=2 ></td>
<td><input type="text" name="mark2" value="" maxlength=2 ></td>
<td><input type="text" name="mark3" value="" maxlength=2 ></td>
<td><input type="text" name="mark4" value="" maxlength=2 ></td>
<td><input type="text" name="mark5" value="" maxlength=2 ></td>
</tr>
</table>
<p><input type="button" id="btnSubmit" value="Submit"/></p>
<input type="button" id="btnAdd" value="+"/>
<script>
$("#btnAdd").click(function () {
var row = $("#sum_table tbody > tr:last"),
newRow = row.clone(true);
newRow.find("input").each(function () {
var num = +(this.id.match(/\d+$/) || [0])[0] + 1;
this.id = this.id.replace(/\d+$/, "") + num;
this.name = this.id;
});
newRow.insertAfter(row);
return false;
});
$("#btnSubmit").click(function () {
$("#sum_table tbody tr").each(function() {
var row_total = 0;
$("td:not('.test'), td:not('.sum') input:text",this).each(function() {
var val =$.trim($(this).val());
//console.log('val='+val);
if(val!="" && !isNaN(val))
row_total += Number(val);
});
console.log('row_total='+row_total);
$(".sum :input:text",this).val(row_total);
});
});
</script>
-------------------SERVLET--------------
String[] test = request.getParameterValues("test");
String[] sum = request.getParameterValues("sum");
You can do it this way without using javascript for adding new row, if it helps you.
1) - Add name to the add button
<input type="button" id="btnAdd" ***name="addrow"*** value="+"/>
2) - At Servlet side check if add button is clicked
if (request.getParameter("addrow") != null){
request.setAttribute("addRow","yes");
}
3) - At Jsp side add below your for loop
<c:if test="${not empty request.addRow}">
<td><input type="text" id="val" name="values" value="" maxlength=2/></td>
</c:if>
This will add new emty text field whenever you click on the button.
NOTE: I did not test this code.
Just Replace with your input code I added "values[]" instead of "values"
You can use it as array and also set keys into it
<input type="text" id="val" name="values[]" value="${item}" maxlength=2/>

how do I dynamically print out a page that is loaded into text boxes?

I have a blur function that writes to the data base
$(".thoughts_box").blur(function(){
var box_id= $(this).attr("id").split("_")[$(this).attr("id").split("_").length-1];
writeListValue(1,box_id,$(this).val());
});
Here is my table
<td><input class="printArea_1 thoughts_box" name="activities_thoughts_1" id="activities_thoughts_1" type="text" style="width:345px;" placeholder="Type or click list button >" /></td>
<td><input type="button" id="thoughts_1" class="list_btn ext_thoughts" value="List >" name="_1" /></td>
</tr>
here is how I am printing it out
function print_list() {
$('input[id=printLoad_1]').val($('input[class=printArea_1]').val());
$('input[id=printLoad_2]').val($('input[class=printArea_2]').val());
$('input[id=printLoad_3]').val($('input[class=printArea_3]').val());
$('input[id=printLoad_4]').val($('input[class=printArea_4]').val());
$('input[id=printLoad_5]').val($('input[class=printArea_5]').val());
for( var i=1; i<=5; i++ ) {
if( document.getElementById('printLoad_'+i).value === '' ) {
document.getElementById('num_'+i).style.display = 'none';
}
}
$(".printing_list").printElement(
{
overrideElementCSS:[
'/css/print_fixer.css',
{ href:'/css/print_fixer.css',media:'print'}],
//leaveOpen:true,
//printMode:'popup',
});
}
here is the page that prints out I need to find a way to dynamically print out what the user puts into the text fields. can anybody please help me.
<div class="printing_list" id="printList" >
<img id="print_logo" src="/images/print_header_med.png">
<div align="left" id="printHead_text"></div>
<br />
<div align="left" class="listPrint_info" style="width:700px;"></div>
<br /><br />
<table width="100%" style="line-height:0px; margin-left:20px;" >
<tr id="num_1">
<td><input id="printLoad_1" type="text" style="width:700px;" />
</td>
</tr>
<tr id="num_2">
<td><input id="printLoad_2" type="text" style="width:700px;" />
</td>
</tr>
<tr id="num_3">
<td><input id="printLoad_3" type="text" style="width:700px;" />
</td>
</tr>
<tr id="num_4">
<td><input id="printLoad_4" type="text" style="width:700px;" />
</td>
</tr>
<tr id="num_5">
<td><input id="printLoad_5" type="text" style="width:700px;" />
</td>
</table>
</div>
elclanrs has the right idea. The code you wrote isn't maintainable. Try something like this:
// My print_list function assumes that I have some textboxes that are class
// textboxClass
function print_list() {
Array.filter( document.getElementsByClassName('textboxClass'), function(elem){
$(".printing_list").printElement( elem );
});
}
If you assign class textboxClass to all of your text boxes, this will loop through each of them, and you can do whatever you want.

Java Get ALL elements from a multiselect Box

I have a multi-select Box and I'm doing some javascript to sort the order of the elements in the box. I want to submit the whole array after sorting back to the Java and not just the select items. How can I achieve this?
JSP:
<script type="text/javascript">
$(document).ready(function(){
$("#mup")[0].attachEvent("onclick", moveUpItem);
$("#mdown")[0].attachEvent("onclick", moveDownItem);
});
function moveUpItem(){
$('#list option:selected').each(function(){
$(this).insertBefore($(this).prev());
});
}
function moveDownItem(){
$('#list option:selected').each(function(){
$(this).insertAfter($(this).next());
});
}
</script>
<table width="100%">
<tr>
<td width="50%" align="center">
<h1>DET Column Maintenance</h1>
</td>
</tr>
</table>
<form action="process.det_column_order" method="post" name="detColumnSortorder" >
<table class="data_table">
<tr align="center">
<td>
<select id="list" name="fieldNames" size="35" multiple="multiple" style="width: 250px;">
<c:forEach var="field" items="${detFields}">
<option value="${field.fieldName}">${field.displayName}</option>
</c:forEach>
</select>
</td>
<tr>
<td style="text-align: center;">
<button id="mup">Move Up</button>
<button id="mdown">Move Down</button>
</td>
</tr>
<tr>
<td style="text-align: center;">
<input name="action" type="submit" value="Submit"/>
</td>
</tr>
</table>
</form>
FORM:
private String[] fieldNames;
public String[] getFieldNames() { return this.fieldNames; }
public void setFieldNames(String[] val) { this.fieldNames = val; }
Since forms only submit the selected values, you'll need a little more JS and another form field.
Introduce a hidden form field that will hold the values you care about:
<input type="hidden" name="fieldNamesOrder" id="fieldNamesOrder"/>
And after every click of Move Up/Move Down:
var order = [], sel = document.getElementById("list");
for(var i = 0, len = sel.options.length; i < len; i++) {
order.push(sel.options(i).value);
}
document.getElementById("fieldNamesOrder").value = order.join(",");
Then, on the server side, you can read your ordered field names out of that posted field.
You either need to create a hidden text field in your HTML form that stores the values from each of your options... or you need to programatically select all of the options before the form is submitted.

Categories

Resources