?
Solved

html form text boxes

Posted on 2011-10-12
14
Medium Priority
?
260 Views
Last Modified: 2012-05-12
I hve a form with 2 text boxes

and i have a table in mysql with 3 columns

"from" "to" "area"
10      20     new york
21      30     Vegas
31      40     Philadelphia

i want when someone is typing on the first box something like 15 on the second box to show "new york"  or when he types 33 to show Philadelphia

Any idea ?
0
Comment
Question by:rockas1982
  • 6
  • 4
  • 3
  • +1
14 Comments
 
LVL 1

Author Comment

by:rockas1982
ID: 36955756
not even close autosuggestion interact with one box i want when someone is typing on the first box to check if the number he typed is bigger the from or smaller than to and then display the city name to another box
0
 
LVL 20

Expert Comment

by:chaitu chaitu
ID: 36955836
do you want to go server side to check if number is in between the specified range?
0
Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

 
LVL 1

Author Comment

by:rockas1982
ID: 36955846
i dont care about that it could be on a array or anything it helps for fast solution the table has 200 rows if it matters

sory for my english
0
 
LVL 20

Expert Comment

by:chaitu chaitu
ID: 36955903
$(document).ready(function() {  

$("#val").keyup(function ()
{

	$.ajax({
		 type: 'GET',
		 url:  "ex.jsp?range="+$("#val").val()),
		 success: function(msg){ 		 
			 $("#state").val(msg);
		}   
	});

     }); 
	 
	


 }); 

Open in new window

0
 
LVL 20

Expert Comment

by:chaitu chaitu
ID: 36955906
<input type='text' value='12' id='val'>
<input type='text'  id='state'>
0
 
LVL 1

Author Comment

by:rockas1982
ID: 36956252
I have something like this now can you help me fix it search inside an dimensional array or mysql instead of showing the same number

<html>
<head>
<script type="text/javascript">
function changetext(){
	var userInput = document.getElementById('phone').value;
	document.getElementById('area').value = userInput;
}
</script>
<input type='text' onKeyup='changetext()' id='phone' value='' />
<br>
<input type='text' id='area' value='' />

</body>
</html> 

Open in new window

0
 
LVL 20

Expert Comment

by:chaitu chaitu
ID: 36956273
$("#phone").keyup(function ()
{

      $.ajax({
             type: 'GET',
             url:  "ex.jsp?range="+$("#val").val()),
             success: function(msg){              
                   $("#area").val(msg);
            }  
      });

     });

check this.

http://www.roseindia.net/answers/viewqa/Ajax/12186-Auto-Complete-Text-Box---JSP-Servlet.html

0
 
LVL 53

Accepted Solution

by:
COBOLdinosaur earned 2000 total points
ID: 36956516
AJAX seems like a bit of overkill, and going to the server could be slow if ther is a lot of load.

Perhaps the ols fashioned way would work better for you.  put this code in an HTML file and try it:

<html><head>
<script>
numbers = new Array ()
numbers[0] ="10,20,NewYork";
numbers[1] ="21,30,Vegas";
numbers[2] ="31,40,Philadelphia";
function showCity(x)
{
retval = ' ';
for (i=0; i<numbers.length; i++)
{
  locvar=numbers[i].split(",");
  if (locvar[0] <= x && locvar[1] >= x)
  {
    retval=locvar[2];
    break;
  }
}
document.forms.f1.e2.value = retval;
}
</script>
</head>
<body>
<form name="f1">
<input type="text" value=""; 
onKeyup="showCity(this.value)">
</input>
<input name="e2" type="text" value=" "></input>
</form>
</body>
</html>

Open in new window


If you need it for more than one set of inputs the target fields could be passed as a second parameter.
0
 
LVL 1

Author Comment

by:rockas1982
ID: 36958646
IT WORKS ... YOU ARE THE BEST

one small fix

  } else {
   retval = ' ';
    break;

one last question. i have this table in a csv or mysql how can i add them to the array with php or javascript
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 36959050
if you are generating the page using php it is easy.

just pull the values fron the DB into a PHP array and generate the
javascript with a for loop

<?php
echo '<script> numbers = new Array ();';
for ($i = 0; $i<count($yourarray); $i)
{
  echo 'numbers[' . $i . '] ="' . $yourarray[$i] .";'
}
?>

Open in new window



or something like that (my php is a little rusty)
0
 
LVL 1

Author Closing Comment

by:rockas1982
ID: 36959086
IT WORKS
0
 
LVL 1

Author Comment

by:rockas1982
ID: 36959274
Any idea what i'm doing wrong here ?

<?php
$result = mysql_query("select * from sites", $con);
$row = mysql_fetch_array($result);

echo '<script> numbers = new Array ();';
for ($i = 0; $i<count($row); $i)
{
  echo 'numbers[' . $i . '] ="' . $row[$i] .";'
}
?>

function showCity(x)
{
retval = ' ';
for (i=0; i<numbers.length; i++)
{
  locvar=numbers[i].split(",");
  if (locvar[0] <= x && locvar[1] >= x)
  {
    retval=locvar[2];
    break;
  } 
}
document.forms.boost.fsite.value = retval;
}
</script>

Open in new window

0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 36960013
what result are getting that is wrong?

I notice you are selecting all columns from the sql table.  Does it contain just the three columns you need?

If not you will have to change the select
0

Featured Post

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

Finding original email is quite difficult due to their duplicates. From this article, you will come to know why multiple duplicates of same emails appear and how to delete duplicate emails from Outlook securely and instantly while vital emails remai…
Q&A with Course Creator, Mark Lassoff, on the importance of HTML5 in the career of a modern-day developer.
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).
Suggested Courses

839 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