DIV tags don't show text from onblur

31 New Member

I'm totally lost! I've been trying for several days to make Onblur fill in the city, state after the user inputs inside a textbox a 5 digit zip code, from the the zip, city, state text boxes I want to extract the info and pu it in a separate line like this:
a) user puts a zipcode:95051
b) Onblur fills in city and state
c) a new line in the same page showing ex.
Support Services
SantaClara,CA 95051

I have a test page loaded with all the code here: http://www.echildcarem anagement.com/prototype/step6.html

The HTML code:

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('zip').firstChild.nodeValue = city + ', ' + state;

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

  }

}

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="city1"></div></legend>

<legend>

<div id="state1"></div>

</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="zip1" onblur="updateCityState();" />

  </p>

  City:

  <input type="text" name="city" id="city1" />

  State:

  <input type="text" size="2" name="state" id="state1" />

</form>

</body>

</html>

Thanks for your help!

Ed
PS pbmods has been helping, somehow it was working before now is not working? am I missing something inside the DIV tags?

Jul 23 '07 #1

Subscribe Reply

2253

gits

5,390

Recognized Expert Moderator Expert

hi ...

the only id of a div (where you want the output?) that you have in your document is 'city1' but in handleHttpRespo nse you try to getElementById( 'city') etc. so you will get an error that your elements are not found ... put all divs with the correct ids in your document, or outcomment all lines that try to get an unavailable id for testing purposes ... so: your problem are the ids! ;)

kind regards

Jul 23 '07 #2

edwire

New Member

hi ...

the only id of a div (where you want the output?) that you have in your document is 'city1' but in handleHttpRespo nse you try to getElementById( 'city') etc. so you will get an error that your elements are not found ... put all divs with the correct ids in your document, or outcomment all lines that try to get an unavailable id for testing purposes ... so: your problem are the ids! ;)

kind regards

But I'm trying to get zip, city and state info inside the textboxes from there I want to extract that information and put it in another line, if I was to remove handleHttpRespo nse you try to getElementById( 'city') then nothing works! on the DIV all I want in there is to be able to have the output from the city, state and zipcode once onblur updates the textbox, but I wan to keep the information also inside the textboxes.. I hope this is clear enough?

All I need to be able to show is when someone enters a zip number the city and state with Onblur which it does! from there i want to be able to put it somewhere like this: Support Services one line, Santa Clara, CA 95051 seconde line, call 408-445-4573 third line.

Thanks a lot!

Ed

Jul 23 '07 #3

epots9

1,351

Recognized Expert Top Contributor

with some help from firefox i was able to get your code working...fixes :

u are using the command "getElementById " but your using the name attribute instead of the id.

ie:
[HTML]<input type="text" size="2" name="state" id="state1" />[/HTML]

Expand|Select|Wrap|Line Numbers

 
document.getElementById("state").value = results[1];

//this line won't find anything, gives an error.

in your html code, make the id and name have the same value, cuz some browsers don't support the attribute id, so at least this way they are the same value so the way u call them would be different.

[HTML]<input type="text" size="2" name="state" id="state" />[/HTML]

also,

Expand|Select|Wrap|Line Numbers

document.getElementById("areacode").value = results[2];

does not exist, so it throws an error, comment it out or add a textbox with areacode as its id.

correct these errors and test it out, if there are still any problems repost the new version to that site u have above and we'll take a look.

if all is working, post back to tell us.

good luck

Jul 23 '07 #4

epots9

1,351

Recognized Expert Top Contributor

**double post....my bad

Jul 23 '07 #5

edwire

New Member

with some help from firefox i was able to get your code working...fixes :

u are using the command "getElementById " but your using the name attribute instead of the id.

ie:
[HTML]<input type="text" size="2" name="state" id="state1" />[/HTML]

Expand|Select|Wrap|Line Numbers

document.getElementById("state").value = results[1];

//this line won't find anything, gives an error.

in your html code, make the id and name have the same value, cuz some browsers don't support the attribute id, so at least this way they are the same value so the way u call them would be different.

[HTML]<input type="text" size="2" name="state" id="state" />[/HTML]

also,

Expand|Select|Wrap|Line Numbers

document.getElementById("areacode").value = results[2];

does not exist, so it throws an error, comment it out or add a textbox with areacode as its id.

correct these errors and test it out, if there are still any problems repost the new version to that site u have above and we'll take a look.

if all is working, post back to tell us.

good luck

Here is the HTML with changes:

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('zip').firstChild.nodeValue = city + ', ' + state;

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

  }

}

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="city1"></div></legend>

<legend>

<div id="state1"></div>

</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>

This is the test webpage: http://www.echildcarem anagement.com/prototype/step6.html with all the changes I'm able to show with Onblur the city, state but under " Computer Information: I want to read in line one: state, city and zip code (Santa Clara, CA 95051), in line 2: I want to show a telephone number( North Call 408-458-4855). When I input the zip code all I get now is the update inside the text boxes for city and state and NOT the DIV info? am I missing something? the more I read the more I confuse myself.

epots thanks for your help, this is driving me insane!

Ed

Jul 23 '07 #6

epots9

1,351

Recognized Expert Top Contributor

modify this:

Expand|Select|Wrap|Line Numbers

 
function handleHttpResponse() {

  if (http.readyState == 4) {

    // Split the comma delimited response into an array

    results = http.responseText.split(",");

    var city = document.getElementById('city').value = results[0];

      var state = document.getElementById('state').value = results[1];

      document.getElementById('city1').innerHTML = city + ", " + state + ", " + document.getElementById('zip').value;

       document.getElementById('state1').innerHTML = "North Call 408-458-4855";

  }

}

u have to use innerHTML to write into a div tag.

good luck

Jul 23 '07 #7

edwire

New Member

modify this:

Expand|Select|Wrap|Line Numbers

function handleHttpResponse() {

  if (http.readyState == 4) {

    // Split the comma delimited response into an array

    results = http.responseText.split(",");

    var city = document.getElementById('city').value = results[0];

      var state = document.getElementById('state').value = results[1];

      document.getElementById('city1').innerHTML = city + ", " + state + ", " + document.getElementById('zip').value;

       document.getElementById('state1').innerHTML = "North Call 408-458-4855";

  }

}

u have to use innerHTML to write into a div tag.

good luck

Hey epots, thanks for your help! I've updated with the new tags and still don't work? is there anything missing in the DIV tags? I've just can't figure this out?

here is the new HTML and script code:

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('zip').firstChild.nodeValue = city + ', ' + state;

      document.getElementById('city1').innerHTML = city + ', ' + state;

      document.getElementById('zip').value;

      document.getElementById('state1').innerHTML = "North Call 408-458-4855";

  }

}

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="city1"></div></legend>

<legend>

<div id="state1"></div>

</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>

thank you!

Ed

Jul 23 '07 #8

edwire

New Member

epost9 sorry line 13 was edited from the code.

Ed

Jul 23 '07 #9

epots9

1,351

Recognized Expert Top Contributor

epost9 sorry line 13 was edited from the code.

Ed

are there any improvements?

Jul 23 '07 #10

Similar topics

1523

2 text box validations cause loop trap

by: Abby Lee | last post by:

I have back to back text boxes used to create university account numbers. I'm actually creating them with a script so they can create as many account numbers as they need. <edited and cut down script> <input type="text" size="5" name="fund_1" onBlur="checkact(this)"> <input type="text" size="5" name="org_1" onBlur="checkact(this)">" ...

Javascript

5735

Are XML-style "/>" tags valid in 4.01 Transitional? I get weird answers from validators.

by: Hostile17 | last post by:

Consider the following HTML. ---------- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd"> <html> <head> <meta http-equiv=Content-Type content="text/html; charset=iso-8859-1"> <title>Untitled</title>

HTML / CSS

1722

show value in text box

by: nikou_70 | last post by:

I have a page with one text box when I search name, return value such as (address, phone...) I show these value in the table but I want to show these in text box that I have in my page. <%@ Language=VBScript %> <%

ASP / Active Server Pages

8659

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

3089

Regex Validator - detect all but certain HTML tags

by: Barry L. Camp | last post by:

Hi all... hope someone can help out. Not a unique situation, but my search for a solution has not yielded what I need yet. I'm trying to come up with a regular expression for a RegularExpressionValidator that will allow certain HTML tags: <a>, <b>, <blockquote>, <br>, <i>, <img>, <li>, <ol>, <p>, <quote>, <ul>

Visual Basic .NET

6385

XML parsing: no EndElement for combined start/end tags

by: Zytan | last post by:

I thought each XmlNodeType.Element has a matching XmlNodeType.EndElement. But, this does not occur when the XML file has the following: <example attr1="1" attr2="2" /> Even though this is syntactically the same as the following, which does show the EndElement: <example attr1="1" attr2="2">

C# / C Sharp

1108

problem with tags

by: miladhatam | last post by:

hi friends i've built a page that should show first 150 chars of every of my topics but when i wanted to do this work with SubString() it included the tags of my field of my db and very bad viewing happend i want to retrieve rendered text without any tag ... please help me ...

ASP.NET

1788

How can a php ng ban HTML tags posts?

by: V S Rawat | last post by:

I joined this ng and tried to post my first message that had a small php code (HTML and all). my newsserver aioe.net rejected the post saying "HTML Tags". My message was in text format, not in html format, but it obviously had html tags. Now, a php or a perl/ cgi or a javascript ng is always going to had html tags in posted messages....

PHP

5127

css conflicting with named anchor tags

by: azjudd | last post by:

Thank you in advance for your help on this one. I'm using named anchor tags on a FAQ page with questions listed at the top and answers below; a standard jump-to feature. However, anytime an anchor tag link is used, whether it be a question down to an answer or an answer back to the list of questions, I lose the banner div, a good portion of of...

HTML / CSS

7912

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

General

8338

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

Online Marketing

7959

The easy way to turn off automatic updates for Windows 10/11

by: Hystou | last post by:

Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows Update option using the Control Panel or Settings app; it automatically checks for updates and installs any it finds, whether you like it or not. For...

Windows Server

8216

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

General

5710

Access Europe - Using VBA to create a class based on a table - Wed 1 May

by: isladogs | last post by:

The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new presenter, Adolph Dupré who will be discussing some powerful techniques for using class modules. He will explain when you may want to use classes...

Microsoft Access / VBA

3837

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

Networking - Hardware / Configuration

3865

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

1449

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

1180

Comprehensive Guide to Website Development in Toronto: Expert Insights from BSMN Consultancy

by: bsmnconsultancy | last post by:

In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating...

General