Solved

positing the suggestion box

Posted on 2008-10-12
1
1,400 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

3 Use Cases for Connected Systems

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, testing some more, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Introduction A frequently asked question goes something like this:  "I am running a long process in the background and I want to alert my client when the process finishes.  How can I send a message to the browser?"  Unfortunately, the short answer …
International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. 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.: (CODE)

932 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

19 Experts available now in Live!

Get 1:1 Help Now