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.
Related
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"
I have a table that stores the product in the cart of a user. Each row has a button that enables the user to remove a single product from the cart of a user. Here is the code snippet of my html.
<form action="${pageContext.request.contextPath}/customer/removeProduct" method="post">
<input type="hidden" name="page" value="${page}">
<table class="table">
<thead>
<tr>
<th>Name</th>
<th>Quantity</th>
<th>Amount</th>
</tr>
</thead>
<tbody>
<c:forEach items="${productsInCart}" var="product"
varStatus="status">
<input type="hidden" class="form-control" name="upc"
value="${product.getUpc()}">
<tr class="warning">
<td>${product.getName()}</td>
<td>${product.getQuantity()}</td>
<td style="color: green;">₱ ${product.getTotal()}</td>
<td><input type="submit" class="btn btn-warning btn-xs"
value="Remove from cart"></td>
</tr>
</c:forEach>
</tbody>
</table>
</form>
Here is the output.
Product in cart table
The value I want to get is the UPC of a product which is stored in a hidden input type field. However, when the 'remove from cart' button is clicked, it returns all the UPC of the product that is in the cart. Here is the code snippet of the controller.
#RequestMapping(value="/customer/removeProduct", method=RequestMethod.POST)
public String removeProduct(#RequestParam(value = "upc") String upc, HttpServletRequest request){
System.out.println(upc);
// customerService.removeProductInCart(customer.getCustomer(request).getCartId(), upc);
return "customer_home";
}
You may want to create form on every iteration to get the specific upc on each row instead of wrapping your whole table.
I am newbie to jquery. In my code I dynamically generate the radio button in jquery.when user clicked on the radio button I should get the siblings value.here is my jsp code.
<div id="result">
<c:forEach var="user" items="${model.userList}">
<table>
<thead>
<tr>
<td>Name</td>
<td>Is Approver</td>
</tr>
</thead>
<tbody>
<c:forEach var="disp" items="${user.value}">
<tr>
<td><c:out
value="${disp.getTblUserDetails().getUserName()}" /></td>
<td class="phase" style="display:none"><c:out value='${user.key.getId()}'/></td>
<td class="users" style="display:none"><c:out value='${disp.getTblUserDetails().getId()}'/></td>
<td><input type="radio" name="approver" class="some" /></td>
</tr>
</c:forEach>
</tbody>
</table>
</c:forEach>
</div>
My Jquery code:
$("#result").on("click",".some",function() {
event.preventDefault();
var phaseid= $(this).siblings('.phase').val();
var userid=$(this).siblings('.users').val();
alert(userid+" "+phaseid);
});
I am getting undefined in alert box.what's wrong with my code.how to I get siblings.
Any help will be greatly appreciated!!!!
.some is the input element inside a td so the .phase and .users are not siblings of this, they are the siblings of the parent of this. So
$("#result").on("click", ".some", function (event) {
event.preventDefault();
var $td = $(this).parent();
var phaseid = $td.siblings('.phase').text();
var userid = $td.siblings('.users').text();
alert(userid + " " + phaseid);
});
Also td does not have value, you may have to use .text()
This is my jsp page that retrieve the list of items from database using for loop
<%
itemManager mgr = new itemManager();
Item[] items = mgr.getAllItems();
for(int i = 0; i < items.length; i++){
%>
<tr>
<td> <img border="0" src="<%=items[i].getItemImage() %>" width="100" height="100">
</td>
<td>
<%=items[i].getItemName()%>
<input type="text" name="itemID" value="<%=items[i].getItemID()%>">
<br/>
<%=items[i].getItemDesc()%>
<br/>
Start Bid : <%=items[i].getStartBid()%>
<br/>
Buy it now : <%=items[i].getEndBid()%>
<br/>
Bidding close on : <%=items[i].getDuration()%>
<br/>
<input type="submit" value="View">
<%
}
%></table>
This is the jsp page that link to the item you selected previously
<table border="1" align="center">
<%
itemManager mgr = new itemManager();
Item items = mgr.getItem((Integer)session.getAttribute("ITEM_DATA"));
%>
<tr>
<td> <b> <%=items.getItemName() %></b> </td>
</tr>
</table>
This is the servlet to store the session of the selected item id and forward to the correct item jsp page.
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
HttpSession session = request.getSession(true);
int id = Integer.parseInt(request.getParameter("itemID"));
session.setAttribute("ITEM_DATA",id);
RequestDispatcher rd = request.getRequestDispatcher("viewItem.jsp");
rd.forward(request, response);
}
However, after I clicked the view button. It keeps linking to the itemID = 1.
The URL dispalys "/ItemServlet?itemID=1&itemID=2" .
In fact, if I click on itemID=2 the URL should display like this:
"/ItemServlet?itemID=2"
As a result, how can I achieve this? Thanks in advance!
The problem in your code is you are using a single form and dynamically creating Input box inside the form. So all the input box will be having same name. That's why when you submit the form all the input box values are sent as request parameters. I just reduced some part in your code for better under standing. Take this as your code
<form action="item" method="get">
<table>
<%
ItemManager mgr = new ItemManager();
Item[] items = mgr.getAllItems();
for(int i = 0; i < items.length; i++){
%>
<tr>
<td>
<%=items[i].getItemName()%>
<input type="text" name="itemID" value="<%=items[i].getItemId()%>">
<input type="submit" value="View"> </td></tr>
<%
}
%></table>
</form>
When you run this code and if you check the rendered HTML code it will be look
<form action="item" method="get">
<table>
<tr><td>
aaa
<input type="text" name="itemID" value="1">
<input type="submit" value="View"> </td></tr>
<tr>
<td>
bbb
<input type="text" name="itemID" value="2">
<input type="submit" value="View"> </td></tr>
<tr><td>
ccc
<input type="text" name="itemID" value="3">
<input type="submit" value="View"> </td></tr>
</table>
</form>
Here All the Input box having same name as "itemID". As a solution you can create the form inside the for loop, so that while submitting only one Input box value will be sent as request.
Create form inside your for loop like below code.
<table>
<%
ItemManager mgr = new ItemManager();
Item[] items = mgr.getAllItems();
for(int i = 0; i < items.length; i++){
%>
<form action="item" method="get">
<tr>
<td>
<%=items[i].getItemName()%>
<input type="text" name="itemID" value="<%=items[i].getItemId()%>">
<input type="submit" value="View"> </td></tr>
</form>
<%
}
%></table>
Hope This will help you.
change the name of text field dynamically.
And use getQueryString() in servlet to find the itemId name and value. by using EL.I hope this will help you
I have written a javascript function.
function wellChecked(state) {
if (state)
{
wellDropDown.style.visibility = 'visible';
}
else
{
wellDropDown.style.visibility = 'hidden';
}
}
I have a checkbox after the Well Modification <td> as given below,
<tr>
<td>On Call</td>
<td><html:checkbox property="onCall"/></td>
<td>Well Modification</td>
<td><input type="checkbox" onclick="wellChecked(this.checked)" /></td>
</tr>
When that checkbox is clicked I want the drop down list given under the div id=wellDropDown to be displayed. Defaultly, if the check box is not clicked, the drop down should not be displayed.
<tr>
<td>Active</td>
<td><html:checkbox property="active"/></td>
<div id="wellDropDown" style="visibility:hidden;">
<td>
<html:select property="wellFormatId">
<html:option value="">(Select)</html:option>
<bean:define id="wellFormatColl" name="wellFormats" scope="request"/>
<logic:iterate id="wellFormats" name="wellFormatColl" indexId="index" type="com.astrazeneca.compis.data.WellFormatVO">
<% Long wellId = wellFormats.getWellFormatId();%>
<% String wellIdNo = wellId.toString(); %>
<html:option value="<%=wellIdNo%>">
<bean:write name="wellFormats" property="wellFormatName"/>
</html:option>
</logic:iterate>
</html:select>
</td>
</div>
</tr>
When I tried executing this code, I could see the drop down list getting displayed irrespective of the checkbox checked or not.
Where I have went wrong in this scenario? Please give ur suggestions or ways to implement my requirement.
Your HTML is invalid. You may not have a div enclose a td like this. Either make the td itself visible or invisible, or put the div inside the td, instead of putting it around the td.
Also, unless wellDropDown is a global JS variable, the code should be
document.getElementById("wellDropDown").style.visibility = 'visible';
with jquery you could do this :
<tr>
<td>On Call</td>
<td><html:checkbox property="onCall"/></td>
<td>Well Modification</td>
<td><input type="checkbox" id="myCheckBox" /></td>
</tr>
...
<script>
$('#myDropDown').click(
function () {
$("#wellDropDown").toggle();
});
);
</script>