How to show one of two options dynamically
<%@page contentType="text/html"%>
<%@page pageEncoding="UTF-8"%>
<%--
The taglib directive below imports the JSTL library.
--%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE HTML PUBLIC"-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<META http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<META http-equiv="Content-Style-Type" content="text/css">
<TITLE></TITLE>
</head>
<body bgcolor="#FFFFFF">
<form action="./ApplicationController?actionClass=SearchThesisAction" target="main" method="POST">
<table cellSpacing="0" cellPadding="0" align="center">
<tr>
<td align="center">
<table align="center" width="750" style="height:30px; background-color:#006400;">
<tr>
<td>
<select name="item" style="width:200px;">
<option>Books</option>
<option>Thesis</option>
</select>
</td>
<td>
<select name="book_search" style="width:200px;">
<option>Author</option>
<option>Title</option>
<option>Subject</option>
<option>Keywords</option>
<option>Accession Number</option>
<option>Call Number</option>
</select>
</td>
<td>
<select name="thesis_search" style="width:200px;">
<option>Student Roll Number</option>
<option>Student Name</option>
<option>Title</option>
<option>Guide</option>
<option>ID Number</option>
</select>
</td>
<td >
<input type="text" name="search_string" />
</td>
<td><input type="submit" value="Search" border="0" style="width: 85px" ></td>
</tr>
</table>
<table align="center" width="1300" style="height:10px; background-color:#9ACD32;">
<td></td>
</table>
</td>
</tr>
</table>
</form>
</body>
</html>
In the code I have 3 drop down lists- item, book_search and thesis_search
The item drop down list contains two options: "Book" and "Thesis".
At the moment the code is showing all three drop down list.
My requirement is that on selecting any item (Book or Thesis) the relative dropdown list (book_search or thesis_search) should only be shown and not the both.
# 1
Use javascript : onchange() in first combo box and submit the form.
then use request.getParameter("item");
to get the selected item.
for example if seleted item is book search then
use javascriptlets if and else to display the booksearch
ok
Message was edited by:
kamal_shan
# 2
Dear Kamal
Thanks for your response.
The thing is that on submit the control will go to a servlet "/ApplicationController" and not in the same page.
I have added "onchange" command in first combo box and than written a javascript that is displaying the selected item as soon as I am changing the selection. But I am still unable to show only one of the comobox (either "book_search or thesis_search").
Please tell me how to put check for it.
Thanks
# 3
u r using servlets and html right?
# 4
Yes Kamal
I am usingh servlet and jsp
I am posting the modified code.
Please help me
<%@page contentType="text/html"%>
<%@page pageEncoding="UTF-8"%>
<%--
The taglib directive below imports the JSTL library.
--%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%--
function selectValue() {
var selectedItem = document.header1.item;
}
--%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<script type="text/javascript">
function favBrowser()
{
var mylist=document.getElementById("myList")
document.getElementById('selectedItem').value=mylist.options[mylist.selectedIndex].text
document.getElementById('book_search').style.display = 'none'
}
</script>
<META http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<META http-equiv="Content-Style-Type" content="text/css">
<TITLE></TITLE>
</head>
<body bgcolor="#FFFFFF">
<form action="./ApplicationController" target="main" method="POST">
<table cellSpacing="0" cellPadding="0" align="center">
<tr>
<td align="center">
<table align="center" width="750" style="height:30px; background-color:#006400;">
<tr>
<td>
<select id="myList" onchange="favBrowser()">
<option>Books</option>
<option>Thesis</option>
</select>
<input type="text" id="selectedItem" size="20">
<%-- if(selectedItem=="Books") --%>
<td>
<select name="book_search"style="width:200px;">
<option>Author</option>
<option>Title</option>
<option>Subject</option>
<option>Keywords</option>
<option>Accession Number</option>
<option>Call Number</option>
</select>
</td>
<%-- } else { --%>
<td>
<select name="thesis_search" style="width:200px;">
<option>Student Roll Number</option>
<option>Student Name</option>
<option>Title</option>
<option>Guide</option>
<option>ID Number</option>
</select>
</td>
<%-- } --%}
<%-- } --%>
</td>
<td >
<input type="text" name="search_string" />
</td>
<td><input type="submit" value="Search" border="0" style="width: 85px" ></td>
<td >
</td>
</tr>
</table>
<table align="center" width="1300" style="height:10px; background-color:#9ACD32;">
<td></td>
</table>
</td>
</tr>
</table>
</form>
</body>
</html>
# 5
If there are only two static items in the first dropdown box, it is best done with static javascript:
Note to make it work on IE, I had to provide "value" attributes with your options. ie <option value="Books">Books</option>
<html>
<head>
<META http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<META http-equiv="Content-Style-Type" content="text/css">
<TITLE></TITLE>
<style>
</style>
<script language="javascript">
<!--
function toggleDropDowns(dropdown, selectedValue){
var theForm = dropdown.form;
if (selectedValue == "Books"){
theForm.book_search.style.display='';
theForm.thesis_search.style.display='none';
}
if (selectedValue == "Thesis"){
theForm.book_search.style.display='none';
theForm.thesis_search.style.display='';
}
}
//-->
</script>
</head>
<body bgcolor="#FFFFFF">
<form action="./ApplicationController?actionClass=SearchThesisAction" target="main" method="POST">
<table cellSpacing="0" cellPadding="0" align="center">
<tr>
<td align="center">
<table align="center" width="750" style="height:30px; background-color:#006400;">
<tr>
<td>
<select name="item" style="width:200px;" onchange="toggleDropDowns(this, this.value);">
<option value="Books">Books</option>
<option value="Thesis">Thesis</option>
</select>
</td>
<td>
<select name="book_search" style="width:200px;">
<option>Author</option>
<option>Title</option>
<option>Subject</option>
<option>Keywords</option>
<option>Accession Number</option>
<option>Call Number</option>
</select>
<select name="thesis_search" style="width:200px;display:none">
<option>Student Roll Number</option>
<option>Student Name</option>
<option>Title</option>
<option>Guide</option>
<option>ID Number</option>
</select>
</td>
<td >
<input type="text" name="search_string" />
</td>
<td><input type="submit" value="Search" border="0" style="width: 85px" ></td>
</tr>
</table>
<table align="center" width="1300" style="height:10px; background-color:#9ACD32;">
<td></td>
</table>
</td>
</tr>
</table>
</form>
</body>
</html>
# 6
Sorry 4 late reply.....Its working...Thanks alot 4 ur help....
