Solved

positing the suggestion box

Posted on 2008-10-12
1
1,398 Views
Last Modified: 2011-10-03
I want to display my suggestion box to display below the emp_id text box...now when i select emp id text box list is displaying near to emp name text box....

my code is below
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
 

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Down Load Future Electronics Data</title>
 

<script type="text/javascript" src="jquery-1.2.1.pack.js"></script>

<script type="text/javascript">

	function lookupName(inputString) {

		if(inputString.length == 0) {

			// Hide the suggestion box.

			$('#suggestions').hide();

		} else {

			$.post("fut_ele_ByManName.jsp", {queryString: ""+inputString+""}, function(data){

				if(data.length >0) {

					$('#suggestions').show();

					$('#autoSuggestionsList').html(data);

				}

			});

		}

	} // lookup

	

    function lookup1(inputString) {

		if(inputString.length == 0) {

			// Hide the suggestion box.

			$('#suggestions').hide();

		} else {

			$.post("fut_ele_ByRegoin.jsp", {queryString: ""+inputString+""}, function(data){

				if(data.length >0) {

					$('#suggestions').show();

					$('#autoSuggestionsList').html(data);

				}

			});

		}

	} // lookup
 

	function fillName(thisValue) {

		$('#inputString').val(thisValue);

		setTimeout("$('#suggestions').hide();", 200);

	}

    

      function fill1(thisValue) {

		$('#inputString1').val(thisValue);

		setTimeout("$('#suggestions').hide();", 200);

	}

    
 
 
 
 

</script>
 

<script type="text/javascript">

function myfunction() {
 
 

  var email = document.getElementById('inputString1').value;

   alert(email);

}

</script>
 
 

<script type="text/javascript">
 

;$(function(){

	$("form").submit(function(){

		message($("input[name='emp_name']").val());
 
 
 

		return false;

	});

	

	$("input[name='ByRegion']").click(function(){

		message1($("input[name='emp_id']").val());

		return false;

	});

});

</script>
 

<script type="text/javascript">

function message(thisValue) {

location.href='futer_excel_byManuMain.jsp?man_name='+thisValue;

}

</script>
 

<script type="text/javascript">

function message1(thisValue) {

location.href='futer_excel_byRegionMain.jsp?emp_id='+thisValue;

}

</script>
 

	<LINK REL=stylesheet HREF="ssl.css" TYPE="text/css">

		<style type="text/css">

  <!--

    body {

    margin-left: 20px;

    margin-top: 20px;

    }

  -->

</style>

<style type="text/css">

	body {

		font-family: Helvetica;

		font-size: 11px;

		color: #000;

	}

	

	h3 {

		margin: 0px;

		padding: 0px;	

	}
 

	.suggestionsBox {

		position: relative;

		left: 30px;

		margin: 10px 0px 0px 0px;

		width: 200px;

		background-color: #3574EC7;

		-moz-border-radius: 7px;

		-webkit-border-radius: 7px;

		border: 2px solid #000;	

		color: #fff;

	}

	.suggestionsBox1 {

		position: relative;

		left: 200px;

		margin: 20px 0px 0px 0px;

		width: 700px;

		background-color: #3574EC7;

		-moz-border-radius: 7px;

		-webkit-border-radius: 7px;

		border: 2px solid #000;	

		color: #fff;

	}

	

	.suggestionList {

		margin: 0px;

		padding: 0px;

	}

	

	.suggestionList li {

		

		margin: 0px 0px 3px 0px;

		padding: 3px;

		cursor: pointer;

	}

	

	.suggestionList li:hover {

		background-color: #659CD8;

	}

</style>
 

</head>
 

<body>
 
 

		<H1>

			Download Data

		</H1>

		<BR>
 
 

	<div>

            <table width="" border="0" cellpadding="1" cellspacing="0" bgcolor="#4682b4">

		<tr>

		<td>
 

		<form >
 

		<table width="100%" border="0" cellpadding="4" cellspacing="1">

							<tr class="data1">

								<td>

									Enter the Manufacturer name:

								</td>

								<td>

									:

								</td>
 

<td>
 
 

			<div>

				

				<br />

				<input type="text" size="30" value="" name="emp_name" id="inputString" onkeyup="lookupName(this.value);" onblur="fill();" />

			</div>

			

			<div class="suggestionsBox" id="suggestions" style="display: none;">

				<img src="upArrow.png" style="position: relative; top: -12px; left: 30px;" alt="upArrow" />

				<div class="suggestionList" id="autoSuggestionsList">

					&nbsp;

				</div>

			</div>

			</td>

			</tr>

			<tr class="data2">

			<td>

			Region

			</td>

			<td>

			:

			</td>

			<td>
 

<div>

				

				<br />

				<input type="text" size="30" value="" name="emp_id" id="inputString1" onkeyup="lookup1(this.value);" onblur="fill1();" />

			</div>

			

			<div class="suggestionsBox1" id="suggestions" style="display: none;">

				<img src="" style="position: relative; top: -999px; left: 30px;" alt="" />

				<div class="suggestionList" id="autoSuggestionsList">

					&nbsp;

				</div>

			</div>
 
 

</td>

							</tr>

								</table>

				</td>

			</tr>

			<tr>

				<td align="center">

					<input type="Submit" name="Submit" value="Download By ManufacturerName" >

					<input type="button" name="ByRegion" value="Download By Region" >
 

				</td>

			</tr>

		</table>
 

		</form>

	</div>
 

</body>

</html>

Open in new window

0
Comment
Question by:priyapratheep
1 Comment
 
LVL 1

Accepted Solution

by:
mysticamusic earned 500 total points
ID: 22700579
Your HTML code is not correct . I have modified your HTML code..
Please try my file...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

 

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Down Load Future Electronics Data</title>

 

<script type="text/javascript" src="jquery-1.2.1.pack.js"></script>

<script type="text/javascript">

	function lookupName(inputString) {

		if(inputString.length == 0) {

			// Hide the suggestion box.

			$('#suggestions').hide();

		} else {

			$.post("fut_ele_ByManName.jsp", {queryString: ""+inputString+""}, function(data){

				if(data.length >0) {

					$('#suggestions').show();

					$('#autoSuggestionsList').html(data);

				}

			});

		}

	} // lookup

	

    function lookup1(inputString) {

		if(inputString.length == 0) {

			// Hide the suggestion box.

			$('#suggestions').hide();

		} else {

			$.post("fut_ele_ByRegoin.jsp", {queryString: ""+inputString+""}, function(data){

				if(data.length >0) {

					$('#suggestions').show();

					$('#autoSuggestionsList').html(data);

				}

			});

		}

	} // lookup

 

	function fillName(thisValue) {

		$('#inputString').val(thisValue);

		setTimeout("$('#suggestions').hide();", 200);

	}

    

      function fill1(thisValue) {

		$('#inputString1').val(thisValue);

		setTimeout("$('#suggestions').hide();", 200);

	}

    

 

 

 

 

</script>

 

<script type="text/javascript">

function myfunction() {

 

 

  var email = document.getElementById('inputString1').value;

   alert(email);

}

</script>

 

 

<script type="text/javascript">

 

;$(function(){

	$("form").submit(function(){

		message($("input[name='emp_name']").val());

 

 

 

		return false;

	});

	

	$("input[name='ByRegion']").click(function(){

		message1($("input[name='emp_id']").val());

		return false;

	});

});

</script>

 

<script type="text/javascript">

function message(thisValue) {

location.href='futer_excel_byManuMain.jsp?man_name='+thisValue;

}

</script>

 

<script type="text/javascript">

function message1(thisValue) {

location.href='futer_excel_byRegionMain.jsp?emp_id='+thisValue;

}

</script>
 
 

<LINK REL=stylesheet HREF="ssl.css" TYPE="text/css">
 

<style type="text/css">

	body {

		font-family: Helvetica;

		font-size: 11px;

		color: #000;

	}

	

	h3 {

		margin: 0px;

		padding: 0px;	

	}

 

	.suggestionsBox {

		position: relative;

		left: 30px;

		margin: 10px 0px 0px 0px;

		width: 200px;

		background-color: #3574EC7;

		-moz-border-radius: 7px;

		-webkit-border-radius: 7px;

		border: 2px solid #000;	

		color: #fff;

	}

	.suggestionsBox1 {

		position: relative;

		left: 200px;

		margin: 20px 0px 0px 0px;

		width: 700px;

		background-color: #3574EC7;

		-moz-border-radius: 7px;

		-webkit-border-radius: 7px;

		border: 2px solid #000;	

		color: #fff;

	}

	

	.suggestionList {

		margin: 0px;

		padding: 0px;

	}

	

	.suggestionList li {

		

		margin: 0px 0px 3px 0px;

		padding: 3px;

		cursor: pointer;

	}

	

	.suggestionList li:hover {

		background-color: #659CD8;

	}

</style>

 

</head>

 

<body>

	<h1>Download Data</h1>

	

	<div>

	<form>

		<table width="" border="0" cellpadding="1" cellspacing="0" bgcolor="#4682b4">

			

			<table width="100%" border="0" cellpadding="4" cellspacing="1">

				

				<tr class="data1">

				<td>Enter the Manufacturer name:</td>

				<td>:</td>

				<td>

				<input type="text" size="30" value="" name="emp_name" id="inputString" onkeyup="lookupName(this.value);" onblur="fill();" />

				<div class="suggestionsBox" id="suggestions" style="display: none;">

					<img src="upArrow.png" style="position: relative; top: -12px; left: 30px;" alt="upArrow" />

					<div class="suggestionList" id="autoSuggestionsList">

						&nbsp;

					</div>

				</div>

				

				</td>

				</tr>

				

				<tr class="data2">

				<td>Region</td>

				<td>:</td>

				<td>

				<input type="text" size="30" value="" name="emp_id" id="inputString1" onkeyup="lookup1(this.value);" onblur="fill1();" />

				<div class="suggestionsBox1" id="suggestions" style="display: none;">

					<img src="" style="position: relative; top: -999px; left: 30px;" alt="" />

					<div class="suggestionList" id="autoSuggestionsList">

						&nbsp;

					</div>

				</div>

				

				</td>

				

				</tr>

				

				</table>

				

			<tr>

				<td align="center">

				<input type="Submit" name="Submit" value="Download By ManufacturerName" >

				<input type="button" name="ByRegion" value="Download By Region" >

				</td>

			</tr>

				

		</table>

	</form>

	

	</div>
 

</body>

</html>

Open in new window

0

Featured Post

Top 6 Sources for Identifying Threat Actor TTPs

Understanding your enemy is essential. These six sources will help you identify the most popular threat actor tactics, techniques, and procedures (TTPs).

Join & Write a Comment

What is a Lightbox? A Lightbox is the effect you see when you click, for example, an image and the screen fades out and up pops the same image but in its full size dimensions. There are lots of Lightbox effects for jQuery. Problem is they are a…
PROBLEM: The other day I was working on adding an ajax request to a webpage that already had a dialog box on the page.  The dialog box was using relative positioning to be positioned next to a form field I had on the page.  Everything was working…
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

708 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

17 Experts available now in Live!

Get 1:1 Help Now