Develop Reference

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

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.

How to select mutiple checkboxes using selenium webdriver reading data from excel?

I am using Coded UI for creating some test cases for a web application, while doing the same I have encountered an issue. The page contains 3 tables with mutiple check boxes, I am not able to click on checkboxes reading data from excel.Someone help me to find a solution
Here is my html code:
Table 1 - HTML:
<table id="ContentPlaceHolder1_ctl04_cbl_CCPEC01_01">
<tbody>
<tr>
<td>
<input
id="ContentPlaceHolder1_ctl04_cbl_CCPEC01_01_0"
type="checkbox"
name="ctl00$ContentPlaceHolder1$ctl04$cbl_CCPEC01_01$0"
value=" Ambu-bag ">
<label for="ContentPlaceHolder1_ctl04_cbl_CCPEC01_01_0"> Ambu-bag </label>
</td>
<td>
<input
id="ContentPlaceHolder1_ctl04_cbl_CCPEC01_01_1"
type="checkbox"
name="ctl00$ContentPlaceHolder1$ctl04$cbl_CCPEC01_01$1"
value=" apnea monitor ">
<label
for="ContentPlaceHolder1_ctl04_cbl_CCPEC01_01_1"> apnea monitor </label>
</td>
<td>
</tr>
</tbody>
</table>
Table 2 - HTML:
<table id="ContentPlaceHolder1_ctl04_cbl_CCPOP01_01">
//table 2
<tbody>
<tr>
<td><input id="ContentPlaceHolder1_ctl04_cbl_CCPOP01_01_0"
type="checkbox" name="ctl00$ContentPlaceHolder1$ctl04$cbl_CCPOP01_01$0"
value=" Universal ">
<label for="ContentPlaceHolder1_ctl04_cbl_CCPOP01_01_0"> Universal </label>
</td>
<td>
<input id="ContentPlaceHolder1_ctl04_cbl_CCPOP01_01_1"
type="checkbox"
name="ctl00$ContentPlaceHolder1$ctl04$cbl_CCPOP01_01$1" value=" Aspiration ">
<label for="ContentPlaceHolder1_ctl04_cbl_CCPOP01_01_1"> Aspiration </label>
</tr>
</tbody>
</table>
Here is my sample code.But not working fine.
Table 1 - Code:
String valueEquipmentChecklist = data.getEquipmentChecklist().get(rowCnt);//data reading from excel
List<WebElement> equipChecklist = driver.findElements(By.xpath("//input[#type='checkbox']"));
List<String> equipmentChecklistList = new ArrayList<String>(Arrays.asList(valueEquipmentChecklist.split(",")));
for (String equipmentChecklistCheck : equipmentChecklistList) {
for (WebElement equipmentChecklistChk : equipChecklist) {
if (equipmentChecklistChk.getAttribute("value").equalsIgnoreCase(equipmentChecklistCheck)) {
if (!equipmentChecklistChk.isSelected()) {
equipmentChecklistChk.click();
}
}
}
}
Table 2 - Code:
String valueOngoingPrecuations = data.getOngoingPrecuations().get(rowCnt);
List<WebElement> ongoingPrecuations = driver.findElements(By.xpath("//input[#type='checkbox']"));
List<String> ongoingPrecuationsList = new ArrayList<String>(Arrays.asList(valueOngoingPrecuations.split(",")));
for (String ongoingPrecuationsCheck : ongoingPrecuationsList) {
for (WebElement ongoingPrecuationsChk : ongoingPrecuations) {
if (ongoingPrecuationsChk.getAttribute("value").equalsIgnoreCase(ongoingPrecuationsCheck)) {
if (!ongoingPrecuationsChk.isSelected()) {
ongoingPrecuationsChk.click();
}
}
}
}

accoring to HTML you provided value of checkboxes contains spaces, possibly in your excel file this spaces are not exist, so you should delete spaces in value of checkbox before comparing or use "contains" instead of "equals"

Preselect Radio button jsp with hashmap input java

I created a dynamic table after receiving with hashmap. Previously I used json as input and javascript and I was able to pre-select radio buttons based on json input. However below code is not working neither for pre-selecting and when selecting the radio button only of all the radio buttons is being selected.
Please help, I am new to jsp and hashmap so pardon any syntax errors.
<tr align="left">
<td align="left"> <%out.println( tempsysDetails1.getCategory().get(i)); %> </td>
<td align="left"> <input type="radio" name="inlineRadioOptions_' + i + '[]" value="0" id="inlineRadio0"' +
(tempsysDetails1.getSystemStatus().get(i)) = 0 ? ' checked="checked"' : '' ) + '><font color="black">Grey  </font><label class="radio-inline">
<input type="radio" name="inlineRadioOptions_' + i + '[]" value="1" id="inlineRadio1"' + tempsysDetails1.getSystemStatus().get(i)) = 1 ? ' checked="checked"' : '') +
'><font color="green">Green  </font><label class="radio-inline"><input type="radio" name="inlineRadioOptions_' + i + '[]" + id="inlineRadio2" value="2"' +
(tempsysDetails1.getSystemStatus().get(i)) = 2 ? ' checked="checked"' : '' ) + '><font color="yellow">Yellow  </font></label><label class="radio-inline">
<input type="radio" name="inlineRadioOptions_' + i + '[]" id="inlineRadio3" value="3"' +
(tempsysDetails1.getSystemStatus().get(i)) = 3 ? ' checked="checked"' : '') + '> <font color="red">Red</font></label></td>
<td align="left"><input type="text" id= "comments[i]" class="form-control name_list" placeholder="<%out.println( tempsysDetails1.getComments().get(i)); %> "> </td>
</tr>
Attaching screenshot for reference:

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 to show a value in a new table depending on which radio button is clicked?

Below is my table in the jsp page which is getting generated dynamically -
<Table id="firstTable">
<c:forEach var="i" begin="0" end="${reportData.getHash().size() - 1}">
<TR>
<TD>
<input type="radio" name="test" id="radioButton">
</TD>
<TD>
<span id="importantColumnData">${Data.getGenId().get(i)}</span>
</TD>
<TD>
${Data.getValue1().get(i)}
</TD>
</TR>
</c:forEach>
</Table>
Here first column in the first row is radio button, and second column in the first row is GenId. Similarly, first column in the second row is radio button, and second column in the second row is different GenId. And similarly for other rows and column...
Problem Statement:-
Now what I am suppose to do is - As soon as I click on each radio button in a particular row, I would like to show value of GeId in a new table just below the firstTable.
So suppose if I click first row radio button and value of GenId was 10 in first row, then I would show 10 value in a new table just below the firstTable.
And now if I click second row radio button and value of GenId is 20 in second row, then it should show 20 value only in the new table just below firstTable...
So I got the below jquery code which works fine for only first row radio button, meaning if I click first row radio button then it is making a new table properly with the GenId value, but it doesn't work for second row radio button... And if I keep on clicking first row radio button, then it keeps on generating a new table always.. I just need to have one table which should show value basis on whether I am clicking first radio button or second radio button.
$(document).ready(function() {
$('#radioButton').click(function() {
alert($('#importantColumnData').html());
var tableText = '<table id="newTable">';
tableText += '<tr>';
tableText += '<td>';
tableText += $('#importantColumnData').html();
tableText += '</td>';
tableText += '</tr>';
tableText += '</table>';
$('#firstTable').after(tableText);
});
});
I guess as the id of radio button is always same for each table row, may be that's why it is not working?
What wrong I am doing in my above code? Can anyone provide a simple jsfiddle example which can help me to understand?
UPDATE:-
This is my firstTable rendered html -
<TABLE id="firstTable" name="FirstTable">
<TR style="color:#ffffff;background-color:#787878;">
<TH>Select</TH>
<TH>GenId</TH>
</TR>
<TR>
<TD>
<input type="radio" name="radioValue" value="some value" id="radioButton">
</TD>
<TD>
<span id="importantColumnData" name="colDat">16192153</span>
</TD>
</TR>
<TR>
<TD>
<input type="radio" name="radioValue" value="some value" id="radioButton">
</TD>
<TD>
<span id="importantColumnData" name="colDat">19745383</span>
</TD>
</TR>
</TABLE>
As soon as I am clicking first row radio button, it should show 16192153 value in the new table just below firsTable and if I am clicking second row radio button, then it should show 19745383 value in the same new table only just below firstTable..
ANOTHER UPDATE:-
I am able to make that work with the suggestions you guys have suggested..
Now I am seeing one more issue.. After getting importantColumnData value, I am passing it to connection.jsp page which will use this value to make a query against a database using ajax and then it return backs the response in the data value.. And now I am using this data value to iterate and grab all the values from it and put it in a newTable as shown below -
<script>
$(document).ready(function () {
$('.radioButton').click(function () {
alert($(this).closest("tr").find(".importantColumnData").text());
var importantColumnData = $(this).closest("tr").find(".importantColumnData").text();
$.getJSON("connection.jsp", {'name': importantColumnData}, function (data) {
// added as per suggestion
if($("#newTable").length == 0) {
var tableText = '<table id="newTable" BORDER="1" CELLPADDING="0" CELLSPACING="1" style="text-align:center;">';
tableText +='<br/><br/>';
tableText +='<tr style="color:#ffffff;background-color:#787878;">'
tableText += '<th>Category Name</th>';
tableText +='<th>Attributes</th>';
tableText +='<th>Libraries</th>';
tableText +='<th>Developer</th>';
tableText += '<th>Sources</th>';
tableText +='</tr>';
var tbl_body = "";
$.each(data, function () {
var tbl_row = "";
$.each(this, function (k, v) {
tbl_row += "<td>" + v + "</td>";
})
tbl_body += "<tr>" + tbl_row + "</tr>";
})
tableText += "<tbody>" + tbl_body + "</tbody>";
$('#firstTable').after(tableText);
} else {
// added as per suggestion
$("#newTable tr td").text(importantColumnData);
}
});
});
});
</script>
So for the first time, when I click first row radio button, it shows me the correct value in new table but if I again click the same radio button, then it is showing me only importantColumnData across all the columns in that row which is wrong.. Instead of that it should show the same column values which was shown when I click for the first time..
As I can see in the else block I am just putting only importantColumnData value.. How do I modify this to start showing the original column values which was shown for the first time when I clicked the first row radio button?

Try this.
$(document).ready(function() {
$(document).on('click', 'input[type="radio"]', function() {
if( $(this).prop('checked') ){
var text = $(this).parent().next(".importantColumnData").text(),
tableText = '<table id="newTable"><tr><td>'+ text +'</td></tr></table>';
$('#newTable').remove();
$('body').append(tableText);
}
});
});
Fiddle Demo

Change your table like below (just changed id to class and apply rel for value)-
<Table id="firstTable">
<c:forEach var="i" begin="0" end="${reportData.getHash().size() - 1}">
<TR>
<TD>
<input type="radio" name="test" class="radioButton" rel="${Data.getValue1().get(i)}">
</TD>
<TD>
<span id="importantColumnData">${Data.getGenId().get(i)}</span>
</TD>
<TD>
${Data.getValue1().get(i)}
</TD>
</TR>
</c:forEach>
</Table>
jQuery should be like below -
$(document).ready(function() {
$('.radioButton').click(function() {
var genId = $(this).attr('rel');
$('#newTable tr:last').after('<tr><td>'+genId+'</td></tr>');
});
});

$(document).ready(function() {
$('#radioButton').click(function() {
alert($('#importantColumnData').html());
var tableText="";
if($("#newTable").length == 0)
tableText += '<table id="newTable">';
tableText += '<tr>';
tableText += '<td>';
tableText += $('#importantColumnData').html();
tableText += '</td>';
tableText += '</tr>';
if($("#newTable").length == 0)
{
tableText += '</table>';
$('#firstTable').after(tableText);
}
else
$('#newTable').html(tableText);
});
});

Wrong is that you are using id instead of classes. #importantColumnData and #radioButton should be unique. Change your HTML and JS accordingly:
<TR>
<TD>
<input type="radio" name="test" name="radioButton" class="radioButton">
</TD>
<TD>
<span class="importantColumnData">${Data.getGenId().get(i)}</span>
</TD>
<TD>${Data.getValue1().get(i)}</TD>
</TR>
and js:
$('.radioButton').click(function() {
alert($('.importantColumnData', $(this).closest('tr')).html());
});
Demo: http://jsfiddle.net/77mPc/

Remove Id and add classes to Radio button and SPAN element
See the Demo
<table id="firstTable">
<tr>
<td><input type="radio" name="radio" class="radioButton"></td>
<td><span class="importantColumnData">10</span></td>
</tr>
<tr>
<td><input type="radio" name="radio" class="radioButton"></td>
<td><span class="importantColumnData">20</span></td>
</tr>
<tr>
<td><input type="radio" name="radio" class="radioButton"></td>
<td><span class="importantColumnData">30</span></td>
</tr>
</table>
$(document).ready(function() {
$('.radioButton').click(function() {
var importantColumnData = $(this).closest("tr").find(".importantColumnData").text();
if($("#newTable").length == 0)
{
console.log(importantColumnData);
var tableText = '<table id="newTable">';
tableText += '<tr>';
tableText += '<td>';
tableText += importantColumnData;
tableText += '</td>';
tableText += '</tr>';
tableText += '</table>';
$('#firstTable').after(tableText);
}
else{
$("#newTable tr td").text(importantColumnData);
}
});
});

$(document).ready(function(){
$('#firstTable tr td').on('click',function(){
var nextTdText = $(this).next().children('span').text();
if($('#newTable').length == 0){
var newTable="<table id="newTable"><tr><td id="clickedVal"></td></tr></table>";
$('#firstTable').after(newTable);
}
$('#clickedVal').text(nextTdText);
});
});