Extract info from a textbox using Onblur

31 New Member

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

 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

Subscribe Reply

3987

pbmods

5,821

Recognized Expert Expert

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

New Member

Hi pbmods, here's the code:

the php:

Expand|Select|Wrap|Line Numbers

 <?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:

Expand|Select|Wrap|Line Numbers

 <!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>&nbsp;</p>

<p>&nbsp;</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>&nbsp;</p>

<p>&nbsp;</p>

<p>&nbsp;</p>

<p>&nbsp; </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

Jul 21 '07 #3

pbmods

5,821

Recognized Expert Expert

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

New Member

Hi pbmods here again trying to find an answer to my problem.

This is a working test page: http://www.echildcarem anagement.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

Recognized Expert Expert

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

 
<div id="cityState">&nbsp;</div>

<div id="zipCode">&nbsp;</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:

Expand|Select|Wrap|Line Numbers

 
document.getElementById('cityState').firstChild.nodeValue = city + ', ' + state;

document.getElementById('zipCode').firstChild.nodeValue = zip;

Bingo.

Incidentally, why 'firstChild'? Welcome to DOM!

Jul 22 '07 #6

edwire

New Member

Thnaks for your quick responde pbmods!
I have a question;
document.getEle mentById('zipCo de').firstChild .node Value = zip;

on this code line is there space or spaces between "firstChild.nod e" and "Value"? or is all together with out spaces?

Thanks again.

Ed

Jul 22 '07 #7

edwire

New Member

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

 <!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>&nbsp;</p>

<p>&nbsp;</p>

<p class="style1"><fieldset>

<legend>Computer information:</legend>

<legend>

<div id="cityState">&nbsp;</div>

<div id="areaCode">&nbsp;</div>

</legend>

</fieldset></p>
 
<p class="style1">Schedule your services now!</p>

<p>&nbsp;</p>

<p>&nbsp;</p>

<p>&nbsp;</p>

<p>&nbsp; </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

Jul 22 '07 #8

edwire

New Member

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

 <!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>&nbsp;</p>

<p>&nbsp;</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>&nbsp;</p>

<p>&nbsp;</p>

<p>&nbsp;</p>

<p>&nbsp; </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

Jul 22 '07 #9

edwire

New Member

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

Similar topics

10122

Client side character count - Textbox

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, possibly a custom validator with a function written in javascript. Has anyone done this? Does someone have an example? Regards

ASP.NET

1930

Reformat TextBox value prior validation

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 javascript function called on "onblur" event of the textbox. However, it seems validation happens before the onblur event, therefore if I enter "1234567890", the validator that checks the phone number is set to "Invalid" state. How can I format the...

ASP.NET

4591

Only allow enter key in MultiLine textbox

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) {

ASP.NET

1984

Textbox that clears on first click

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 press delete. Be super-cool if it could also change the textcolor as well. Any ideas on how to do this? I dont mind using another control, as long as its free (its for a charity intranet).

ASP.NET

3093

Disapearing cursor on some Readonly textbox

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 textboxes, the cursor (text cursor, not mouse cursor) disapears and when we tab to the next textbox and come back (shift-tab), not it's ok. Notice that when we navigate to each textbox, the text is automaticaly selected which is not the case for...

ASP.NET

1792

Autocomplete in textbox

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 event also based on this text box when onblur event is fired that time other fields will populate. This time this textbox should be a auto-complete . this is not happend in my page. this page has lot of onblur event's also.

ASP.NET

8684

select text in TextBox from code?

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

ASP.NET

1996

UserControls - Textbox Blur Event issue

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, so that It will validate that Textbox should not empty. I shown calendar window when user clicks the ImageButton. My problem is when user enters into Textbox and he has to fill the

ASP.NET

2612

ASP.NET 2 - TextBox control on IE 5 Mobile - onblur does not fire

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", "javascript:alert('Changed');"); Response.Attributes.Add("onfocus",

ASP.NET

9704

What is ONU?

by: marktang | last post by:

ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However, people are often confused as to whether an ONU can Work As a Router. In this blog post, we’ll explore What is ONU, What Is Router, ONU & Router’s main usage, and What is the difference between ONU and Router. Let’s take a closer look ! Part I. Meaning of...

General

10562

Problem With Comparison Operator <=> in G++

by: Oralloy | last post by:

Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers, it seems that the internal comparison operator "<=>" tries to promote arguments from unsigned to signed. This is as boiled down as I can make it. Here is my compilation command: g++-12 -std=c++20 -Wnarrowing bit_field.cpp Here is the code in...

C / C++

10319

Maximizing Business Potential: The Nexus of Website Design and Digital Marketing

by: jinu1996 | last post by:

In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven tapestry of website design and digital marketing. It's not merely about having a website; it's about crafting an immersive digital experience that captivates audiences and drives business growth. The Art of Business Website Design Your website is...

Online Marketing

10070

Discussion: How does Zigbee compare with other wireless protocols in smart home applications?

by: tracyyun | last post by:

Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each protocol has its own unique characteristics and advantages, but as a user who is planning to build a smart home system, I am a bit confused by the choice of these technologies. I'm particularly interested in Zigbee because I've heard it does some...

General

9132

AI Job Threat for Devs

by: agi2029 | last post by:

Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing, and deployment—without human intervention. Imagine an AI that can take a project description, break it down, write the code, debug it, and then launch it, all on its own.... Now, this would greatly impact the work of software developers. The idea...

Career Advice

5508

Trying to create a lan-to-lan vpn between two differents networks

by: TSSRALBI | last post by:

Hello I'm a network technician in training and I need your help. I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs. The last exercise I practiced was to create a LAN-to-LAN VPN between two Pfsense firewalls, by using IPSEC protocols. I succeeded, with both firewalls in the same network. But I'm wondering if it's possible to do the same thing, with 2 Pfsense firewalls...

Networking - Hardware / Configuration

5639

Windows Forms - .Net 8.0

by: adsilva | last post by:

A Windows Forms form does not have the event Unload, like VB6. What one acts like?

Visual Basic .NET

4282

transfer the data from one system to another through ip address

by: 6302768590 | last post by:

Hai team i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated we have to send another system

C# / C Sharp

3803

How to add payments to a PHP MySQL app.

by: muto222 | last post by:

How can i add a mobile payment intergratation into php mysql website.

PHP