I'm trying to extract data from 3 textboxes to another line in the same page using the onblur command.
My client inputs their 5 digit zipcode and OnBlur fills the city and state from a database without refreshing.
I want to be able to extract or grab the info from the textboxes: zipcode, city, and state and place it at the top of the form at the same time when OnBlur is executed, in other words I want Onbllur to execute the auto fill in of the city and state and also do the update and show all together as follows:
example:
Client: inputs: zipcode box:95051
database fills: city box and state box
Santa Clara, CA 95051 <-- This is the result without a textbox tha I wan to achive to be located in the same form. - Tag: <input type="text" size="30" maxlength="5" name="zip" value="" id="zip" onBlur="updateCityState();">
Any help or suggestions that might point me in the right direction will be appreciated :)
Do I need to use additional tags to acomplish this? can you show me the code?
Ed
15 3961
Heya, Ed.
What is your code doing that you don't want it to do? Give an example.
What is your code *not* doing that it is supposed to? Give an example.
Hi pbmods, here's the code:
the php: - <?php
-
/**
-
* Connects to the database.
-
* Return false if connection failed.
-
* Be sure to change the $database_name. $database_username , and
-
* $database_password values to reflect your database settings.
-
*/
-
function db_connect() {
-
$database_name = 'XXX'; // Set this to your Database Name
-
$database_username = 'XXX'; // Set this to your MySQL username
-
$database_password = 'XXX'; // Set this to your MySQL password
-
$result = mysql_pconnect('localhost',$database_username, $database_password);
-
if (!$result) return false;
-
if (!mysql_select_db($database_name)) return false;
-
return $result;
-
}
-
$conn = db_connect(); // Connect to database
-
if ($conn) {
-
$zipcode = $_GET['param']; // The parameter passed to us
-
$query = "select * from zipcodes where zipcode = '$zipcode'";
-
$result = mysql_query($query,$conn);
-
$count = mysql_num_rows($result);
-
if ($count > 0) {
-
$city = mysql_result($result,0,'city');
-
$state = mysql_result($result,0,'state');
-
$areacode = mysql_result($result,0,'areacode');
-
}
-
}
-
if (isset($city) && isset($state) && isset($areacode)) {
-
$return_value = $city . "," . $state . "," . $areacode;
-
}
-
else {
-
$return_value = "not correct".",".$_GET['param']; // Include Zip for debugging purposes
-
}
-
echo $return_value; // This will become the response value for the XMLHttpRequest object
-
?>
***the html: - <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
-
<html xmlns="http://www.w3.org/1999/xhtml" >
-
<head>
-
<title>ZIP Code to City and State using XmlHttpRequest</title>
-
<script language="javascript" type="text/javascript">
-
var url = "CityState.php?param="; // The server-side script
-
function handleHttpResponse() {
-
if (http.readyState == 4) {
-
// Split the comma delimited response into an array
-
results = http.responseText.split(",");
-
document.getElementById('city').value = results[0];
-
document.getElementById('state').value = results[1];
-
document.getElementById('areacode').value = results[2];
-
}
-
}
-
function updateCityState() {
-
var zipValue = document.getElementById("zip").value;
-
http.open("GET", url + escape(zipValue), true);
-
http.onreadystatechange = handleHttpResponse;
-
http.send(null);
-
}
-
function getHTTPObject() {
-
var xmlhttp;
-
/*@cc_on
-
@if (@_jscript_version >= 5)
-
try {
-
xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
-
} catch (e) {
-
try {
-
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
-
} catch (E) {
-
xmlhttp = false;
-
}
-
}
-
@else
-
xmlhttp = false;
-
@end @*/
-
if (!xmlhttp && typeof XMLHttpRequest != 'undefined') {
-
try {
-
xmlhttp = new XMLHttpRequest();
-
} catch (e) {
-
xmlhttp = false;
-
}
-
}
-
return xmlhttp;
-
}
-
var http = getHTTPObject(); // We create the HTTP Object
-
</script>
-
<style type="text/css">
-
<!--
-
.style1 {
-
font-size: 16px;
-
font-weight: bold;
-
font-style: italic;
-
}
-
-->
-
</style>
-
</head>
-
<body>
-
<p> </p>
-
<p> </p>
-
<p class="style1"><fieldset>
-
<legend></legend>
-
<legend></legend>
-
<legend></legend>
-
<legend>
-
Computer information:
-
</legend>
-
<input type="text" name="city" id="city" /><input type="text" name="areacode" id="areacode" />
-
</fieldset></p>
-
-
<p class="style1">Schedule your services now!</p>
-
<p> </p>
-
<p> </p>
-
<p> </p>
-
<p> </p>
-
<form action="post">
-
<p>ZIP code:
-
<input type="text" size="5" name="zip" id="zip" onblur="updateCityState();" />
-
</p>
-
City:
-
<input type="text" name="city" id="city" />
-
State:
-
<input type="text" size="2" name="state" id="state" />
-
</form>
-
</body>
-
</html>
right now it shows inside an input text, I'd like to show it without the box.
Thank you in advance!
Ed
Please use CODE tags when posting source code. See the REPLY GUIDELINES on the right side of the page next time you post.
Hi pbmods here again trying to find an answer to my problem.
This is a working test page: http://www.echildcaremanagement.com/prototype/step6.html
Here you can see that it fills in the state and city as soon as you input the zipcode but the result I'd like show is as follows:
Computer information:
Santa Clara, California
95051
Thanks again for your time.
Ed
Heya, Ed.
Ah. Ok. I see what you're getting at.
Alrighty. This will be fairly easy to accomplish. First, you need to create two elements: - a DIV to hold the city/state, and
- a DIV to hold the zip code.
Something like this: -
<div id="cityState"> </div>
-
<div id="zipCode"> </div>
-
The non-breaking spaces are used so that your code will validate. But I digress.
Once you find the values that are associated with the ZIP code, you simply change the nodeValue of the #text node inside each of the DIVs: -
document.getElementById('cityState').firstChild.nodeValue = city + ', ' + state;
-
document.getElementById('zipCode').firstChild.nodeValue = zip;
-
Bingo.
Incidentally, why 'firstChild'? Welcome to DOM!
Thnaks for your quick responde pbmods!
I have a question;
document.getElementById('zipCode').firstChild.node Value = zip;
on this code line is there space or spaces between "firstChild.node" and "Value"? or is all together with out spaces?
Thanks again.
Ed
Hi pbmods, I'm still not able to include the code. Now is not showing anything at all, here is the code + I've added the your suggestion: - <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
-
<html xmlns="http://www.w3.org/1999/xhtml" >
-
<head>
-
<title>ZIP Code to City and State using XmlHttpRequest</title>
-
<script language="javascript" type="text/javascript">
-
var url = "CityState.php?param="; // The server-side script
-
function handleHttpResponse() {
-
if (http.readyState == 4) {
-
// Split the comma delimited response into an array
-
results = http.responseText.split(",");
-
document.getElementById('city').value = results[0];
-
document.getElementById('state').value = results[1];
-
document.getElementById('areacode').value = results[2];
-
document.getElementById('cityState').firstChild.node Value = city + ', ' + state + zip;
-
document.getElementById('areaCode').firstChild.node Value = areacode;
-
}
-
}
-
function updateCityState() {
-
var zipValue = document.getElementById("zip").value;
-
http.open("GET", url + escape(zipValue), true);
-
http.onreadystatechange = handleHttpResponse;
-
http.send(null);
-
}
-
function getHTTPObject() {
-
var xmlhttp;
-
/*@cc_on
-
@if (@_jscript_version >= 5)
-
try {
-
xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
-
} catch (e) {
-
try {
-
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
-
} catch (E) {
-
xmlhttp = false;
-
}
-
}
-
@else
-
xmlhttp = false;
-
@end @*/
-
if (!xmlhttp && typeof XMLHttpRequest != 'undefined') {
-
try {
-
xmlhttp = new XMLHttpRequest();
-
} catch (e) {
-
xmlhttp = false;
-
}
-
}
-
return xmlhttp;
-
}
-
var http = getHTTPObject(); // We create the HTTP Object
-
</script>
-
<style type="text/css">
-
<!--
-
.style1 {
-
font-size: 16px;
-
font-weight: bold;
-
font-style: italic;
-
}
-
-->
-
</style>
-
</head>
-
<body>
-
<p> </p>
-
<p> </p>
-
<p class="style1"><fieldset>
-
<legend>Computer information:</legend>
-
<legend>
-
<div id="cityState"> </div>
-
<div id="areaCode"> </div>
-
</legend>
-
</fieldset></p>
-
-
<p class="style1">Schedule your services now!</p>
-
<p> </p>
-
<p> </p>
-
<p> </p>
-
<p> </p>
-
<form action="post">
-
<p>ZIP code:
-
<input type="text" size="5" name="zip" id="zip" onblur="updateCityState();" />
-
</p>
-
City:
-
<input type="text" name="city" id="city" />
-
State:
-
<input type="text" size="2" name="state" id="state" />
-
</form>
-
</body>
-
</html>
The Idea is to show the Following:
Computer Information:
Santa Clara, CA 95051
Northen California District
am I missing something? or am I putting the code in the wrong place?
Thanks for your help.
Ed
pbmods sorry! disregard my last 2 replies please. Here's a good example:
Got to http://www.echildcaremanagement.com/...ype/step6.html and input any valid zipcode the onblur comand will fill in the city and state. Right above the zipcode is where I want to show the the following:
Computer Information:
Santa Clara, CA 95051
Northern District
Where do I input your code? is there spaces between node and Value?
Here is the code without any modificatins: - <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
-
<html xmlns="http://www.w3.org/1999/xhtml" >
-
<head>
-
<title>ZIP Code to City and State using XmlHttpRequest</title>
-
<script language="javascript" type="text/javascript">
-
var url = "CityState.php?param="; // The server-side script
-
function handleHttpResponse() {
-
if (http.readyState == 4) {
-
// Split the comma delimited response into an array
-
results = http.responseText.split(",");
-
document.getElementById('city').value = results[0];
-
document.getElementById('state').value = results[1];
-
document.getElementById('areacode').value = results[2];
-
}
-
}
-
function updateCityState() {
-
var zipValue = document.getElementById("zip").value;
-
http.open("GET", url + escape(zipValue), true);
-
http.onreadystatechange = handleHttpResponse;
-
http.send(null);
-
}
-
function getHTTPObject() {
-
var xmlhttp;
-
/*@cc_on
-
@if (@_jscript_version >= 5)
-
try {
-
xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
-
} catch (e) {
-
try {
-
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
-
} catch (E) {
-
xmlhttp = false;
-
}
-
}
-
@else
-
xmlhttp = false;
-
@end @*/
-
if (!xmlhttp && typeof XMLHttpRequest != 'undefined') {
-
try {
-
xmlhttp = new XMLHttpRequest();
-
} catch (e) {
-
xmlhttp = false;
-
}
-
}
-
return xmlhttp;
-
}
-
var http = getHTTPObject(); // We create the HTTP Object
-
</script>
-
<style type="text/css">
-
<!--
-
.style1 {
-
font-size: 16px;
-
font-weight: bold;
-
font-style: italic;
-
}
-
-->
-
</style>
-
</head>
-
<body>
-
<p> </p>
-
<p> </p>
-
<p class="style1"><fieldset>
-
<legend>Computer information:</legend>
-
<legend></legend>
-
<legend></legend>
-
<legend>
-
</legend>
-
</fieldset></p>
-
-
<p class="style1">Schedule your services now!</p>
-
<p> </p>
-
<p> </p>
-
<p> </p>
-
<p> </p>
-
<form action="post">
-
<p>ZIP code:
-
<input type="text" size="5" name="zip" id="zip" onblur="updateCityState();" />
-
</p>
-
City:
-
<input type="text" name="city" id="city" />
-
State:
-
<input type="text" size="2" name="state" id="state" />
-
</form>
-
</body>
-
</html>
Thanks for your help!
Ed
Also where do I find the values? are you talking about the values from the database?
"Once you find the values that are associated with the ZIP code, you simply change the nodeValue of the #text node inside each of the DIVs:"
Ed
Heya, Ed.
Precisely. The idea here is instead of setting document.getElementById('city').value, document.getElementById('state').value and so on, with the elements being INPUTs, you would make the elements DIVs, and then use document.getElementById('city').firstChild.nodeVal ue, document.getElementById('state').firstChild.nodeVa lue and so on.
Hey pbmods! it works!
Thanks a lot!
It is kind of new to me this stuff but now I love it!
Ed
Hi pbmods! here again! now it breaks the info inside the text boxes like city, state. Ideally what I'd like the code to do is to be able to fill in the city and state with onblur, and also at the same time have the information put together under computer information(DIV): city,state and zip.
Thanks again!
Ed
Heya, Ed.
Hi pbmods! here again! now it breaks the info inside the text boxes like city, state. Ideally what I'd like the code to do is to be able to fill in the city and state with onblur, and also at the same time have the information put together under computer information(DIV): city,state and zip.
That sounds reasonable.
You already know how to do this, of course, because you were originally setting the value of form inputs before.
Unlike a DIV, which contains a #text element whose value you have to set, inputs have a `value` property, which makes everything a lot simpler.
All you have to do is add to your handleHttpResponse() function: -
function handleHttpResponse()
-
{
-
.
-
.
-
.
-
document.getElementById('cityInput').value = results[0];
-
}
-
Where 'cityInput' is the ID of the INPUT that you want to modify.
For best results (and for XHTML compliance), make sure all of your elements have unique IDs.
Wonderful! Thanks for your master teaching technique!
It rocks!
Ed
Heya, Ed.
Glad to hear you got it working! Good luck with your project, and if you ever need anything, post back anytime :)
Sign in to post your reply or Sign up for a free account.
Similar topics
by: Jerry |
last post by:
In limiting textbox input to 500 characters I would like to include a
dynamic count of characters input while the user is typing into a textbox.
This would obviously be a client side control,...
|
by: Oleg Ogurok |
last post by:
Hi there,
I have a modified ASP.NET TextBox control that formats its output as the
phone number, e.g. if you enter "1234567890" it'll change the value to
"123-456-7890". This is done by a...
|
by: ian |
last post by:
Hi,
I am currently using a Javascript function to dissallow the enter key
on my ASP.NET (2.0) web page, as follows:
function fnTrapKP(){
if (document.all)
{
if (event.keyCode == 13)
{
|
by: musosdev |
last post by:
Hi
I want to have a textbox on my webpage that shows 'Type here' in gray. When
you click on the textbox, that text disappears and you can type your search,
rather than having to select it and...
|
by: ThunderMusic |
last post by:
Hi,
I have a form in which there are many <asp:textbox> tags. When I run the
form, we use tab to navigate across the textboxes, but one of our client
noticed that when we navigate to some readonly...
|
by: venu |
last post by:
Hi All
I need some help from u guys. iam working on aspx page.in this page i
have lot fields. text boxes and dropdown lists ..
First filed should be a autocomplete filed. this text has onblur...
|
by: Dabbler |
last post by:
Is there a way to mark the text in a TextBox control as selected so when the
user types a new value the existing text is replaced?
Thanks
|
by: bsm |
last post by:
I have created one User controls which contains
1. Textbox and
2. ImageButton (to display calendar)
(I tried to create my own datetime control).
I have created "onblur" event on textbox event,...
|
by: Duncan |
last post by:
Hi all,
I'm tearing my hair out on this!
I have a simple ASP.NET 2 page with a TextBox control, in the
PreRender I set ClientSide events:-
Response.Attributes.Add("onchange",...
|
by: DolphinDB |
last post by:
The formulas of 101 quantitative trading alphas used by WorldQuant were presented in the paper 101 Formulaic Alphas. However, some formulas are complex, leading to challenges in calculation.
Take...
|
by: DolphinDB |
last post by:
Tired of spending countless mintues downsampling your data? Look no further!
In this article, you’ll learn how to efficiently downsample 6.48 billion high-frequency records to 61 million...
|
by: isladogs |
last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM).
In this month's session, we are pleased to welcome back...
|
by: Vimpel783 |
last post by:
Hello!
Guys, I found this code on the Internet, but I need to modify it a little. It works well, the problem is this: Data is sent from only one cell, in this case B5, but it is necessary that data...
|
by: jfyes |
last post by:
As a hardware engineer, after seeing that CEIWEI recently released a new tool for Modbus RTU Over TCP/UDP filtering and monitoring, I actively went to its official website to take a look. It turned...
|
by: ArrayDB |
last post by:
The error message I've encountered is; ERROR:root:Error generating model response: exception: access violation writing 0x0000000000005140, which seems to be indicative of an access violation...
|
by: CloudSolutions |
last post by:
Introduction:
For many beginners and individual users, requiring a credit card and email registration may pose a barrier when starting to use cloud servers. However, some cloud server providers now...
|
by: af34tf |
last post by:
Hi Guys, I have a domain whose name is BytesLimited.com, and I want to sell it. Does anyone know about platforms that allow me to list my domain in auction for free. Thank you
|
by: Faith0G |
last post by:
I am starting a new it consulting business and it's been a while since I setup a new website. Is wordpress still the best web based software for hosting a 5 page website? The webpages will be...
| |