473,320 Members | 1,979 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,320 software developers and data experts.

Extract info from a textbox using Onblur

31
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.

Expand|Select|Wrap|Line Numbers
  1. 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
Jul 21 '07 #1
15 3961
pbmods
5,821 Expert 4TB
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.
Jul 21 '07 #2
edwire
31
Hi pbmods, here's the code:

the php:

Expand|Select|Wrap|Line Numbers
  1. <?php
  2. /**
  3.  * Connects to the database.
  4.  * Return false if connection failed.
  5.  * Be sure to change the $database_name. $database_username , and 
  6.  * $database_password values  to reflect your database settings.
  7.  */
  8. function db_connect() {
  9.   $database_name = 'XXX'; // Set this to your Database Name
  10.   $database_username = 'XXX'; // Set this to your MySQL username
  11.   $database_password = 'XXX'; // Set this to your MySQL password
  12.   $result = mysql_pconnect('localhost',$database_username, $database_password); 
  13.   if (!$result) return false;
  14.   if (!mysql_select_db($database_name)) return false;
  15.   return $result;
  16. }
  17. $conn = db_connect(); // Connect to database
  18. if ($conn) {
  19.   $zipcode = $_GET['param']; // The parameter passed to us
  20.   $query = "select * from zipcodes where zipcode = '$zipcode'";
  21.   $result = mysql_query($query,$conn);
  22.   $count = mysql_num_rows($result);
  23.   if ($count > 0) {
  24.     $city = mysql_result($result,0,'city');
  25.     $state = mysql_result($result,0,'state');
  26.     $areacode = mysql_result($result,0,'areacode');
  27.   }
  28. }
  29. if (isset($city) && isset($state) && isset($areacode)) { 
  30.   $return_value = $city . "," . $state . "," . $areacode; 
  31. }
  32. else {  
  33.   $return_value = "not correct".",".$_GET['param']; // Include Zip for debugging purposes
  34. }
  35. echo $return_value; // This will become the response value for the XMLHttpRequest object
  36. ?>

***the html:

Expand|Select|Wrap|Line Numbers
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" >
  3. <head>
  4. <title>ZIP Code to City and State using XmlHttpRequest</title>
  5. <script language="javascript"  type="text/javascript">
  6. var url = "CityState.php?param="; // The server-side script
  7. function handleHttpResponse() {
  8.   if (http.readyState == 4) {
  9.     // Split the comma delimited response into an array
  10.     results = http.responseText.split(",");
  11.     document.getElementById('city').value = results[0];
  12.        document.getElementById('state').value = results[1];
  13.       document.getElementById('areacode').value = results[2];
  14.   }
  15. }
  16. function updateCityState() {
  17.   var zipValue = document.getElementById("zip").value;
  18.   http.open("GET", url + escape(zipValue), true);
  19.   http.onreadystatechange = handleHttpResponse;
  20.   http.send(null);
  21. }
  22. function getHTTPObject() {
  23.   var xmlhttp;
  24.   /*@cc_on
  25.   @if (@_jscript_version >= 5)
  26.     try {
  27.       xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
  28.     } catch (e) {
  29.       try {
  30.         xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
  31.       } catch (E) {
  32.         xmlhttp = false;
  33.       }
  34.     }
  35.   @else
  36.   xmlhttp = false;
  37.   @end @*/
  38.   if (!xmlhttp && typeof XMLHttpRequest != 'undefined') {
  39.     try {
  40.       xmlhttp = new XMLHttpRequest();
  41.     } catch (e) {
  42.       xmlhttp = false;
  43.     }
  44.   }
  45.   return xmlhttp;
  46. }
  47. var http = getHTTPObject(); // We create the HTTP Object
  48. </script>
  49. <style type="text/css">
  50. <!--
  51. .style1 {
  52.     font-size: 16px;
  53.     font-weight: bold;
  54.     font-style: italic;
  55. }
  56. -->
  57. </style>
  58. </head>
  59. <body>
  60. <p>&nbsp;</p>
  61. <p>&nbsp;</p>
  62. <p class="style1"><fieldset>
  63. <legend></legend>
  64. <legend></legend>
  65. <legend></legend>
  66. <legend>
  67. Computer information:
  68. </legend>
  69. <input type="text" name="city" id="city" /><input type="text" name="areacode" id="areacode" />
  70. </fieldset></p>
  71.  
  72. <p class="style1">Schedule your services now!</p>
  73. <p>&nbsp;</p>
  74. <p>&nbsp;</p>
  75. <p>&nbsp;</p>
  76. <p>&nbsp; </p>
  77. <form action="post">
  78.   <p>ZIP code:
  79.     <input type="text" size="5" name="zip" id="zip" onblur="updateCityState();" />
  80.   </p>
  81.   City:
  82.   <input type="text" name="city" id="city" />
  83.   State:
  84.   <input type="text" size="2" name="state" id="state" />
  85. </form>
  86. </body>
  87. </html>
right now it shows inside an input text, I'd like to show it without the box.

Thank you in advance!

Ed
Jul 21 '07 #3
pbmods
5,821 Expert 4TB
Please use CODE tags when posting source code. See the REPLY GUIDELINES on the right side of the page next time you post.
Jul 21 '07 #4
edwire
31
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
Jul 21 '07 #5
pbmods
5,821 Expert 4TB
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:
Expand|Select|Wrap|Line Numbers
  1. <div id="cityState">&nbsp;</div>
  2. <div id="zipCode">&nbsp;</div>
  3.  
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:
Expand|Select|Wrap|Line Numbers
  1. document.getElementById('cityState').firstChild.nodeValue = city + ', ' + state;
  2. document.getElementById('zipCode').firstChild.nodeValue = zip;
  3.  
Bingo.

Incidentally, why 'firstChild'? Welcome to DOM!
Jul 22 '07 #6
edwire
31
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
Jul 22 '07 #7
edwire
31
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:

Expand|Select|Wrap|Line Numbers
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" >
  3. <head>
  4. <title>ZIP Code to City and State using XmlHttpRequest</title>
  5. <script language="javascript"  type="text/javascript">
  6. var url = "CityState.php?param="; // The server-side script
  7. function handleHttpResponse() {
  8.   if (http.readyState == 4) {
  9.     // Split the comma delimited response into an array
  10.     results = http.responseText.split(",");
  11.     document.getElementById('city').value = results[0];
  12.        document.getElementById('state').value = results[1];
  13.       document.getElementById('areacode').value = results[2];
  14.       document.getElementById('cityState').firstChild.node Value = city + ', ' + state + zip;
  15.       document.getElementById('areaCode').firstChild.node Value = areacode;
  16.   }
  17. }
  18. function updateCityState() {
  19.   var zipValue = document.getElementById("zip").value;
  20.   http.open("GET", url + escape(zipValue), true);
  21.   http.onreadystatechange = handleHttpResponse;
  22.   http.send(null);
  23. }
  24. function getHTTPObject() {
  25.   var xmlhttp;
  26.   /*@cc_on
  27.   @if (@_jscript_version >= 5)
  28.     try {
  29.       xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
  30.     } catch (e) {
  31.       try {
  32.         xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
  33.       } catch (E) {
  34.         xmlhttp = false;
  35.       }
  36.     }
  37.   @else
  38.   xmlhttp = false;
  39.   @end @*/
  40.   if (!xmlhttp && typeof XMLHttpRequest != 'undefined') {
  41.     try {
  42.       xmlhttp = new XMLHttpRequest();
  43.     } catch (e) {
  44.       xmlhttp = false;
  45.     }
  46.   }
  47.   return xmlhttp;
  48. }
  49. var http = getHTTPObject(); // We create the HTTP Object
  50. </script>
  51. <style type="text/css">
  52. <!--
  53. .style1 {
  54.     font-size: 16px;
  55.     font-weight: bold;
  56.     font-style: italic;
  57. }
  58. -->
  59. </style>
  60. </head>
  61. <body>
  62. <p>&nbsp;</p>
  63. <p>&nbsp;</p>
  64. <p class="style1"><fieldset>
  65. <legend>Computer information:</legend>
  66. <legend>
  67. <div id="cityState">&nbsp;</div>
  68. <div id="areaCode">&nbsp;</div>
  69. </legend>
  70. </fieldset></p>
  71.  
  72. <p class="style1">Schedule your services now!</p>
  73. <p>&nbsp;</p>
  74. <p>&nbsp;</p>
  75. <p>&nbsp;</p>
  76. <p>&nbsp; </p>
  77. <form action="post">
  78.   <p>ZIP code:
  79.     <input type="text" size="5" name="zip" id="zip" onblur="updateCityState();" />
  80.   </p>
  81.   City:
  82.   <input type="text" name="city" id="city" />
  83.   State:
  84.   <input type="text" size="2" name="state" id="state" />
  85. </form>
  86. </body>
  87. </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
Jul 22 '07 #8
edwire
31
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:
Expand|Select|Wrap|Line Numbers
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" >
  3. <head>
  4. <title>ZIP Code to City and State using XmlHttpRequest</title>
  5. <script language="javascript"  type="text/javascript">
  6. var url = "CityState.php?param="; // The server-side script
  7. function handleHttpResponse() {
  8.   if (http.readyState == 4) {
  9.     // Split the comma delimited response into an array
  10.     results = http.responseText.split(",");
  11.     document.getElementById('city').value = results[0];
  12.        document.getElementById('state').value = results[1];
  13.       document.getElementById('areacode').value = results[2];
  14.   }
  15. }
  16. function updateCityState() {
  17.   var zipValue = document.getElementById("zip").value;
  18.   http.open("GET", url + escape(zipValue), true);
  19.   http.onreadystatechange = handleHttpResponse;
  20.   http.send(null);
  21. }
  22. function getHTTPObject() {
  23.   var xmlhttp;
  24.   /*@cc_on
  25.   @if (@_jscript_version >= 5)
  26.     try {
  27.       xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
  28.     } catch (e) {
  29.       try {
  30.         xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
  31.       } catch (E) {
  32.         xmlhttp = false;
  33.       }
  34.     }
  35.   @else
  36.   xmlhttp = false;
  37.   @end @*/
  38.   if (!xmlhttp && typeof XMLHttpRequest != 'undefined') {
  39.     try {
  40.       xmlhttp = new XMLHttpRequest();
  41.     } catch (e) {
  42.       xmlhttp = false;
  43.     }
  44.   }
  45.   return xmlhttp;
  46. }
  47. var http = getHTTPObject(); // We create the HTTP Object
  48. </script>
  49. <style type="text/css">
  50. <!--
  51. .style1 {
  52.     font-size: 16px;
  53.     font-weight: bold;
  54.     font-style: italic;
  55. }
  56. -->
  57. </style>
  58. </head>
  59. <body>
  60. <p>&nbsp;</p>
  61. <p>&nbsp;</p>
  62. <p class="style1"><fieldset>
  63. <legend>Computer information:</legend>
  64. <legend></legend>
  65. <legend></legend>
  66. <legend>
  67. </legend>
  68. </fieldset></p>
  69.  
  70. <p class="style1">Schedule your services now!</p>
  71. <p>&nbsp;</p>
  72. <p>&nbsp;</p>
  73. <p>&nbsp;</p>
  74. <p>&nbsp; </p>
  75. <form action="post">
  76.   <p>ZIP code:
  77.     <input type="text" size="5" name="zip" id="zip" onblur="updateCityState();" />
  78.   </p>
  79.   City:
  80.   <input type="text" name="city" id="city" />
  81.   State:
  82.   <input type="text" size="2" name="state" id="state" />
  83. </form>
  84. </body>
  85. </html>

Thanks for your help!

Ed
Jul 22 '07 #9
edwire
31
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
Jul 22 '07 #10
pbmods
5,821 Expert 4TB
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.
Jul 22 '07 #11
edwire
31
Hey pbmods! it works!

Thanks a lot!

It is kind of new to me this stuff but now I love it!

Ed
Jul 22 '07 #12
edwire
31
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
Jul 22 '07 #13
pbmods
5,821 Expert 4TB
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:
Expand|Select|Wrap|Line Numbers
  1. function handleHttpResponse()
  2. {
  3.     .
  4.     .
  5.     .
  6.     document.getElementById('cityInput').value = results[0];
  7. }
  8.  
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.
Jul 22 '07 #14
edwire
31
Wonderful! Thanks for your master teaching technique!
It rocks!

Ed
Jul 22 '07 #15
pbmods
5,821 Expert 4TB
Heya, Ed.

Glad to hear you got it working! Good luck with your project, and if you ever need anything, post back anytime :)
Jul 22 '07 #16

Sign in to post your reply or Sign up for a free account.

Similar topics

9
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,...
2
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...
5
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) {
3
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...
2
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...
0
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...
4
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
1
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,...
1
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",...
0
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...
0
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...
0
isladogs
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...
0
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...
0
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...
0
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...
0
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...
0
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
0
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...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.