I am working on a jsp project where I have a dynamic selection list. The values in this list change according to the value selected in the 1st selection list.
Here's the code:
<script language="JavaScript" type="text/javascript">
function optionsChange(){
var service = document.getElementById("service").value;
if(service == 'GSM'){
document.getElementById("cdmaService").value= '';
document.getElementById("cdmaService").style.display = 'none';
document.getElementById("gsmService").style.display = 'block';
$('gsmService').attr('name', 'services');
}else if(service == 'CDMA'){
document.getElementById("gsmService").value= '';
document.getElementById("gsmService").style.display = 'none';
document.getElementById("cdmaService").style.display = 'block';
$('cdmaService').attr('name', 'services');
}
}
</script>
<select id="service" onChange="javascript:optionsChange();">
<option value="GSM">GSM</option>
<option value="CDMA">CDMA</option>
</select>
<td id="gsmService" ><select name="services" >
<option value="COMBO OFFER">COMBO OFFER</option>
<option value="CRICKET">CRICKET</option>
<option value="ASTRO">ASTRO</option>
</select>
</td>
<td id="cdmaService" style="display:none"><select name="services" >
<option value="COMBO OFFER CDMA">COMBO OFFER CDMA</option>
<option value="WIN THE DREAM">WIN THE DREAM</option>
<option value="VOICE CHAT">VOICE CHAT</option>
</select>
</td>
now when the user selects a service, lets say "GSM", and then selects a service from the second list, lets say "ASTRO". He clicks on a button which redirects him to the next page where he sees "ASTRO" printed. This works fine.
But if the user selects "CDMA" from the 1st list and then selects, let's say "VOICE CHAT" from the second list. It still prints "ASTRO" on the next page. IT should print "VOICE CHAT".
this is the method to submit form:
<script language=javascript>
function submitForm(actionStr)
{
if(actionStr=="User Details")
{
document.login.action="showUsrDetail.jsp";
document.login.submit();
}
}
this is the code for the button:
<input type="button" value="User Details" onclick="submitForm(this.value);"/>
then it redirects to the page ""showUsrDetail.jsp". And when it does the name of the service is printed on the console. For which the code is:
<%
String service = request.getParameter("services");
System.out.println("Value Added Service selected is ="+service);
%>
if i change the first selection to CDMA and then select any service from the second selection list, it still prints the Service which is under GSM.
Can somebody please help me out?
Since you are doing nothing in submitForm() function other that submitting the form that can be achieved directly by <input type="submit>" as shown in below sample.
<form action="showUsrDetail.jsp" id="login" method="post">
<!-- other fields -->
<input type="submit" value="User Details"/>
</form>
Solution 1
Use different names for all the select fields and check the values in showUsrDetail.jsp.
<form id="login" action="showUsrDetail.jsp" method="post">
<table>
<tr>
<td><select id="service" onChange="javascript:optionsChange();"
name="service">
<option value="GSM">GSM</option>
<option value="CDMA">CDMA</option>
</select></td>
<td id="gsmService"><select name="gsmService">
<option value="COMBO OFFER">COMBO OFFER</option>
<option value="CRICKET">CRICKET</option>
<option value="ASTRO">ASTRO</option>
</select></td>
<td id="cdmaService" style="display: none"><select
name="cdmaService">
<option value="COMBO OFFER CDMA">COMBO OFFER CDMA</option>
<option value="WIN THE DREAM">WIN THE DREAM</option>
<option value="VOICE CHAT">VOICE CHAT</option>
</select></td>
<td><input type="submit" value="User Details" /></td>
</tr>
</table>
</form>
showUsrDetail.jsp:
<c:if test="${param.service == 'GSM'}">
<c:out value="${param.gsmService}" />
</c:if>
<c:if test="${param.service == 'CDMA'}">
<c:out value="${param.cdmaService}" />
</c:if>
Solution 2
Add a hidden input field and update its value based on selection change in cdmaService and gsmService select item. Add change listener on both the select item.
<input type="hidden" name="serviceValue"/>
showUsrDetail.jsp:
<c:out value="${param.serviceValue}" />
Note:
I suggest you to use JavaServer Pages Standard Tag Library or Expression Language instead of Scriplet that is more easy to use and less error prone.
Related
I have a form where i have to add form field based on options selected in the select box
what i have done is created all form fields and based on selection show hide fields , But is there any simplified way to do this
<select name="child" id="child">
<option value="0" selected="selected">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
<div id="age1">
<select name="age1" id="age1">
//options
</select>
</div>
<div id="age2">
<select>
//options
</select>
</div>
<div id="age3">
<select>
//options
</select>
</div>
here is my jquery
$('#child').change(function() {
if( $(this).val() == 0 ) {
$("div#age1").hide();
$("div#age2").hide();
$("div#age3").hide();
$("div#age4").hide();
}
if( $(this).val() == 1 ) {
$("div#age1").show();
$("div#age2").hide();
$("div#age3").hide();
$("div#age4").hide();
}
if( $(this).val() == 2 ) {
$("div#age1").show();
$("div#age2").show();
$("div#age3").hide();
$("div#age4").hide();
}
if( $(this).val() == 3 ) {
$("div#age1").show();
$("div#age2").show();
$("div#age3").show();
$("div#age4").hide();
}
if( $(this).val() == 4 ) {
$("div#age1").show();
$("div#age2").show();
$("div#age3").show();
$("div#age4").show();
}
});
How to do it in simplified way and how to get post value for this
same basic approach as Prashant - but theres no need to use eq().. the divs all have ids that match the values of the select list - and note that the first select list in your current code have the same id as its parent div. This will cause an issue, but the following will fix it.
All this does is on the change of the #child select list - triggers all divs to hide (note the display none in the CSS to hide them initially) and then show the one that matches the age+value of child. I would not actually do it this way myself, but given the code you had this works. I also added options to the age select lists to give them something to show when you change the #child list.
As I said, I would not suggest doing it this way - I would suggest appending a new select list to the end of the form based on the selection -that way you dont have all select lists just sitting there and you don't have to worry about submitting the selected value from one of the hidden lists when you submit the form. Just a thought.
$('#child').change(function() {
$("div").hide();
$("#age"+$(this).val()).show();
});
div{display:none}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="child" id="child">
<option value="0" selected="selected">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
<div id="age1">
<select name="age1">
<option value="a">a</option>
<option value="b">b</option>
</select>
</div>
<div id="age2">
<select name="age2">
<option value="c">c</option>
<option value="d">d</option>
</select></div>
<div id="age3">
<select name="age2">
<option value="e">e</option>
<option value="f">f</option>
</select></div>
<div id="age4"> <select>
<option value="g">g</option>
<option value="h">h</option>
</select></div>
Try This:
<select name="child" id="child">
<option value="0" selected="selected">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
<div class="myage" id="age1">
<select name="age1" id="age_1">
//options
</select>
</div>
<div class="myage" id="age2">
<select>
//options
</select></div>
<div class="myage" id="age3"> <select>
//options
</select></div>
Your JS :
$(".myage:eq(0)").show();
$('#child').change(function() {
$(".myage").hide();
$(".myage:eq("+$(this).val()+")") .show();
});
Use Class instead of ID :)
I am new in programming and I need to make a DB insert using jsp. My probem is that I have my page with choose option (see img), and when I press "Display form to insert" button I want to have in the same page the rows (enter name and enter adresse) for this table from my DB.
the used code is:
<form action="javaservlet" method="post">
Choose Table Name :
<select name="table">
<option value="univer">univer</option>
<option value="client">client</option>
<option value="company">company</option>
<option value="departament">departament</option>
<option value="employee">employee</option>
<option value="person">person</option>
<option value="promotion">promotion</option>
<option value="service">service</option>
<option value="subsidiary">subsidiary</option>
</select>
<input type="submit" value="Display form to insert">
</font>
<script>
var ddl = document.getElementById("table");
var selectedValue = ddl.options[ddl.selectedIndex].value;
switch(selectedValue){
case univer
Enter name :<input type="text" name="name"><br><br>
Enter adresse :<input type="text" name="adresse">
break;
}
</script>
</form>
You can't use javascript like jsp. to achive this, change your java script like this:
<div id="txtbx>
</div>
case univer
var temp='Enter name :<input type="text" name="name"><br><br>';
temp+='Enter adresse :<input type="text" name="adresse">';
document.getElementById("txtbx").innerHTML=temp
break;
}
guys i am working on web application in jsp and servlets .. in myjsp.jsp i have a list
List<String> sexList = (List<String>)request.getAttribute("sexList"); %>
and put it in cumbo box in html tag like this
<td>Gender:</td>
<td><select name="sex">
<%for(String i : sexList) { %>
<option value="<%=i%>"><%=i %></option><%}%>
</select>
</td>
but now i want to select the selected item from database using JSTL and i want to know how to return or get this selected item .. any help
You need to include it in the form and post it to servlet:
selection.jsp:
<form action="display.jsp" method="GET">
<select name="sex">
<c:forEach items="${sexList}" var="sex">
<option value="${sex}">${sex}</option>
</c:forEach>
</select>
<input type="submit" value="submit"/>
</form>
display.jsp
<c:set var="sex" value="${param.sex}" scope="page" /> //Gets the selected sex
<sql:query var="person" >
select * from Person where sex = ?
<sql:param value="${sex}" />
</sql:query>
This is my dropdown list
<select name="dropdown">
<option value="NoValue"><br /></option>
<c:forEach var="route_desc" items="${routes}">
<option>
<c:if test="${not empty route_desc}">
<c:out value="${route_desc}" />
</c:if>
</option>
</c:forEach>
</select>
In my class I took a list and then added one
routes.add(routeDetailsPk);
routes.add(route_description);
Now I want to display the route_description only but when a user selects a value i want routeDetailsPk to come as a value. How to do it ? Currently it shows all the values
This is the way through which we can display the value and select the key using map and jstl
<c:forEach var="route_desc" items="${routes}">
<option value="${route_desc.key}">
<c:if test="${not empty route_desc}">
<c:out value="${route_desc.value}" />
</c:if>
</option>
</c:forEach>
I have the following query params:
http://localhost:8085/myPage?selectListId=2
I have peeled that "selectListId" param from the query string in my GET method and I want to set the selected item in my drop down list to that index value.
I'm using bootstrap so not sure if that matters. The list is populated from a viewModel that I pass in from my spring mvc3 controller.
<form class="form-horizontal" action="myController/indexSubmit" method="post">
<select name="selectList" class="form-control" placeholder=".input-medium" height>
<c:forEach items="${viewModel.getlistitems()}" var="item" varStatus="count">
<option value="${count.index}">${item }</option>
</c:forEach>
</select>
<button type="submit" class="btn btn-primary btn-medium">Submit</button>
</form>
How can I set this value (not using javascript preferably)? Thanks!
Using the id like that is a bad idea because it's not a true identifier, it's just the current index. For the answer's sake, given a controller method that handles your form submission
#RequestMapping(/* some mapping */
public String saveSelection(#RequestParam("selectList") String selectListId, Model model) {
model.addAttribute("selectListId", selectList);
return "form"; // whatever it is
}
you compare the current index to the index in the request attributes and set it selected if they match
<form class="form-horizontal" action="myController/indexSubmit" method="post">
<select name="selectList" class="form-control" placeholder=".input-medium" height>
<c:forEach items="${viewModel.getlistitems()}" var="item" varStatus="count">
<option value="${count.index}" ${not empty selectListId && selectListId == count.index ? 'selected' : ''} >${item }</option>
</c:forEach>
</select>
<button type="submit" class="btn btn-primary btn-medium">Submit</button>
</form>