Develop Reference

How to send dropdown value to servlet NOT the option text

I have dropdown with options and the values. I can get the option value by the dropdown name in servlet but how can i get the dropdown "value" in servlet. In screenshot, temporarily i concatenated the with options but i want to store value in variable in servlet.
Please help:
HTML:
<input type="text" name="taxiDropdown" id= "taxiDropdown" placeholder="Search taxi...">
</div>
<div class="scrolling menu">
<%
List eList = (ArrayList) session.getAttribute("taxiInfo");
%>
<%
for (int i = 0; i < eList.size(); i++) {
%>
<div class="item" data-value="<%=((TaxiInfo) eList.get(i)).getID()%>">
<div class="ui green empty circular label"></div>
<%=((TaxiInfo) eList.get(i)).getTaxiPlate() +" "+ ((TaxiInfo) eList.get(i)).getID() %>
</div>
<%
}
%>
</div>
</div>
Servlet:
String val = request.getParameter("taxiDropdown");
(in "val", I want to store the value of the dropdown not the option text)

In JSP you should have something like that:
<form method="post">
<select name="taxiDropdown" id="taxiDropdown">
<%
List<TaxiInfo> eList = (List<TaxiInfo>) request.getAttribute("taxiInfo");
for (TaxiInfo taxiInfo : eList) {
%>
<option name="<%=taxiInfo.getTaxiPlate()%>" value="<%=taxiInfo.getID()%>"><%=taxiInfo.getTaxiPlate()%></option>
<%
}
%>
</select>
<input type="submit" />
</form>
Then in controller/servlet you will receive the id of TaxiInfo:
String val = request.getParameter("taxiDropdown");
System.out.println(val);
Or in your case you should set a hidden input with javascript with desired value.

added this code in html:
Move value of the dropdown selection to hidden textbox
<script type='text/javascript'>
$(function() {
$('#driverdp').change(function() { <-- this is my dropdown -->
var x = $(this).val();
$('#driverid').val(x); <-- this is my textbox -->
});
});
</script>
Servlet:
get the value of hidden text in servlet
String text= request.getParameter("driverId");
hope it will help someone

pass jsp parameter to another using button

so i'm trying to pass selected value from a combobox in a jsp to another jsp here is what i got myself into
<form name="ff" method="post">
<select name='mat' id='soflow'>
<% ArrayList<Matiere> listeM = MatiereListe.GetMatiere(); %>
<option></option>
<% for (Matiere d : listeM)
{ %>
<option value= <%=d.getCode_mat() %> >
<%=d.getLib_mat() %>
</option>
<% } %>
</select>
<input type=submit value=valider />
<br>
</form>
<button onclick="window.location.href='/acceuil.jsp?mat=' JSGetSelectedItemMat() " >Statistique</button>
<script>
function JSGetSelectedItemMat()
{
var e = document.getElementById("soflow");
var strSel = e.options[e.selectedIndex].value;
document.getElementById("btt").value = strSel;
}
</script>

try this code to get selected valued from select tag. As there is no need to use js, you are using post method in your html form. Also get the value in acceuil.jsp using getParameter method. that is request.getParameter("mat");
<form action="acceuil.jsp" name="ff" method="post">
<select name='mat' id='soflow'>
<% ArrayList<Matiere> listeM = MatiereListe.GetMatiere(); %>
<option></option>
<% for (Matiere d : listeM)
{ %>
<option value= <%=d.getCode_mat() %> >
<%=d.getLib_mat() %>
</option>
<% } %>
</select>
<input type=submit value=valider />
<br>
</form>

jsp fill in field on dropdown item changed

I'm trying to make it so that when an option from the combobox is selected it fills out some of the later input fields. current code (below) doesnt give anny errors just simply does not give output on item changed.
my question being how can I make it so that when selected item changes it fills in some fields.
<div>
options:<select id="optionbox" onchange="Change()">
<option value="op1">option1</option>
<option value="op2">option2</option></select><br>
<form action="KlusServlet.do" method="post"> //not relevant i think used for servlets later on
<input id="description" type="text"></input>
</form>
<script type="text/javascript">
function Change() {
var e = document.getElementById("optionbox");
var selOption = e.options[e.selectedIndex].value;
document.getElementById("description").innerHTML = "selected: " + selOption;
}
</script>
</div>

for textboxes you need to use .value not innerHTML like below
document.getElementById("description").value = "selected: " + selOption;

you can use jquery code $('#selector').val(value); for that
Working Code
<div>
options:<select id="optionbox" onchange="Change()">
<option value="op1">option1</option>
<option value="op2">option2</option></select><br>
<form action="KlusServlet.do" method="post"> //not relevant i think used for servlets later on
<input id="description" type="text"></input>
</form>
<script type="text/javascript">
function Change() {
var e = document.getElementById("optionbox");
var selOption = document.getElementById("optionbox").value;
alert(selOption);
$('#description').val(selOption);
}
</script>
</div>

How to get index of nested JSTL c:forEach from JSP to JS

I've a JSP, where I display elements through JSTL c:forEach loop. This is a nested loop as shown below:
<c:forEach items="${auditBudgetData.auditBudgetTierOneList}" var="auditBudgetTierOne" varStatus="tierOneCount">
** Some Code **
<c:forEach items="${auditBudgetTierOne.auditBudgetTierTwoList}" var="auditBudgetTierTwo" varStatus="tierTwoCount">
** Some Code **
<c:forEach items="${auditBudgetTierTwo.auditBudgetItemList}" var="auditBudgetItem" varStatus="budgetItemCount">
<input type="hidden" name="tierOneIndex" value="${tierOneCount.count}">
<input type="hidden" name="tierTwoIndex" value="${tierTwoCount.count}">
<input type="hidden" name="budgetItemIndex" value="${budgetItemCount.count}">
**Element rows displayed here**
Now, when the user selects any of the element row in the inner most loop, I've to fetch the values in JS. As you can see I'm trying to get the count of each nested loop like this:
<input type="hidden" name="tierOneIndex" value="${tierOneCount.count}">
<input type="hidden" name="tierTwoIndex" value="${tierTwoCount.count}">
<input type="hidden" name="budgetItemIndex" value="${budgetItemCount.count}">
And trying to fetch the value of input field in JS as below:
var tierOneIndex = $('input[name="tierOneIndex"]').val();
var tierTwoIndex = $('input[name="tierTwoIndex"]').val();
var budgetItemIndex = $('input[name="budgetItemIndex"]').val();
But whatever element I select, I'm always getting:
tierOneIndex = 0
tierTwoIndex = 0
budgetItemIndex = 0
Any ideas how I can fetch the count values.

In your html you can do like this
<table>
<c:forEach items="${auditBudgetData.auditBudgetTierOneList}" var="auditBudgetTierOne" varStatus="tierOneCount">
** Some Code **
<c:forEach items="${auditBudgetTierOne.auditBudgetTierTwoList}" var="auditBudgetTierTwo" varStatus="tierTwoCount">
** Some Code **
<c:forEach items="${auditBudgetTierTwo.auditBudgetItemList}" var="auditBudgetItem" varStatus="budgetItemCount">
<input type="hidden" name="tierOneIndex" id="tierOneIndex_${budgetItemCount.index}" value="${tierOneCount.count}">
<input type="hidden" name="tierTwoIndex" id="tierTwoIndex_${budgetItemCount.index}" value="${tierTwoCount.count}">
<input type="hidden" name="budgetItemIndex" id ="budgetItemIndex_${budgetItemCount.index}" value="${budgetItemCount.count}">
<tr class="rows" id="${budgetItemCount.index}"><td>click Here</td></tr>
</table>
and in javascript you can do like this
$(document).ready(function(){
$("tr.rows").click(function() {
var rowid=this.id;
var tierOneIndex = $('#tierOneIndex_'+rowid).val();
var tierTwoIndex = $('#tierTwoIndex_'+rowid).val();
var budgetItemIndex = $('#budgetItemIndex_'+rowid).val();
console.log("tierOneIndex:"+tierOneIndex);
console.log("tierTwoIndex:"+tierTwoIndex);
console.log("budgetItemIndex:"+budgetItemIndex);
});
});
Note:
${tierOneCount.index} starts counting at 0
${tierOneCount.count} starts counting at 1
i created one sample fiddle also for you
http://jsfiddle.net/9CHEb/33/

Similar Approach
You will find an approach in this StackOverflow Q&A link.
Solution
In detail, I would go for something like this (JSP)
<%# taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%# taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %>
<script src="/*link to jQuery*/"></script>
<script>
$(document).ready(function() {
$("td").click(function(event) {
var dtoItemIdx = $(this).attr("data");
//alert("Selected idx: " + dtoItemIdx);
console.info("Selected idx: " + dtoItemIdx);
});
});
</script>
<%-- Get the size of collection --%>
<c:set var="size" scope="page" value="${fn:length(dto.items)}" />
<c:out value="There are ${size} elements in the list." />
<table>
<c:forEach items="${dto.items}" var="item" varStatus="row">
<tr><td data="${row.index}">
<%-- Get the current index in the loop --%>
<c:out value="Your content i.e [row idx: ${row.index}]." />
</td></tr>
</c:forEach>
</table>
Extensions
Instead of only one loop you can obviously nest several loops. The different index could be stored in a CSV-like structrue:
...<td data="${row.index};${product.index};${properties.index}">...
Please leave a comment if this does not solve your problem.

Fetching only selected values from CrossSelect of Jquery

In below screen shot there are 2 boxes where user will select from left box to right which ever items he want. Now which ever the column selected by the user in the right box. I need only those items..
Below is the screen shot and code.In the below screen shot
i need to get only one,two and three values from right box.So, how to get only selected items from the right box?
To Fetch the right box values is this the right menthod in JavaScript Function. Please help
function export()
{
<%if(request.getParameter("myServersID1") != null)
{
String[] ItemNames;
ItemNames = request.getParameterValues("myServersID1");
for(int i = 0; i < ItemNames.length; i++)
{
String selecteditems;
selecteditems= ItemNames[i];
System.out.println("selecteditems" +selecteditems);
}}%>
alert("selectcol");
}
when button is added
<input type="button" value="Export" class="btn-arrow-pri btn-small" style="margin-left: 300px;" onclick="export();"/>
___ ____
four | |
|> |one
five |< |two
| >> |three
|<< |
____
CODE is:
<html>
[...]
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
function moveRight(){
$(document).ready(function(){
$("#myserversID option:selected").appendTo("#myserversID1")
});
}
function moveLeft(){
$(document).ready(function(){
$("#myserversID1 option:selected").appendTo("#myserversID")
});
}
</script>
</head>
<body>
<select size="8" id="myserversID" multiple="multiple">
<option value="one">one</option>
<option value="two">two</option>
<option value="three">three</option>
<option value="four">four</option>
<option value="five">five</option>
<option value="six">six</option>
</select>
<input type="button" value="Move Right" onclick="moveRight();"/>
<input type="button" value="Move Left" onclick="moveLeft();"/>
<select size="8" id="myserversID1" multiple="multiple">
</select>
</body>
</html>