DIV tags don't show text from onblur

**gits** · Jul 23 '07, 05:40 AM

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

**edwire** · Jul 23 '07, 01:00 PM

Originally posted by gits

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

**epots9** · Jul 23 '07, 01:42 PM

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]
[code=javascript]
document.getEle mentById("state ").value = results[1];
//this line won't find anything, gives an error.
[/code]

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,
[code=javascript]
document.getEle mentById("areac ode").value = results[2];
[/code]
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

**epots9** · Jul 23 '07, 01:43 PM

**double post....my bad

**edwire** · Jul 23 '07, 03:01 PM

Originally posted by epots9

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]
[code=javascript]
document.getEle mentById("state ").value = results[1];
//this line won't find anything, gives an error.
[/code]

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,
[code=javascript]
document.getEle mentById("areac ode").value = results[2];
[/code]
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:

Code:

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

**epots9** · Jul 23 '07, 03:21 PM

modify this:
[code=javascript]
function handleHttpRespo nse() {
if (http.readyStat e == 4) {
// Split the comma delimited response into an array
results = http.responseTe xt.split(",");
var city = document.getEle mentById('city' ).value = results[0];
var state = document.getEle mentById('state ').value = results[1];
document.getEle mentById('city1 ').innerHTML = city + ", " + state + ", " + document.getEle mentById('zip') .value;
document.getEle mentById('state 1').innerHTML = "North Call 408-458-4855";
}
}
[/code]

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

good luck

**edwire** · Jul 23 '07, 04:07 PM

Originally posted by epots9

modify this:
[code=javascript]
function handleHttpRespo nse() {
if (http.readyStat e == 4) {
// Split the comma delimited response into an array
results = http.responseTe xt.split(",");
var city = document.getEle mentById('city' ).value = results[0];
var state = document.getEle mentById('state ').value = results[1];
document.getEle mentById('city1 ').innerHTML = city + ", " + state + ", " + document.getEle mentById('zip') .value;
document.getEle mentById('state 1').innerHTML = "North Call 408-458-4855";
}
}
[/code]

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:

Code:

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

**edwire** · Jul 23 '07, 04:12 PM

epost9 sorry line 13 was edited from the code.

Ed

**epots9** · Jul 23 '07, 04:46 PM

Originally posted by edwire

epost9 sorry line 13 was edited from the code.

Ed

are there any improvements?

**edwire** · Jul 23 '07, 04:50 PM

nope still same, just shows the text boxes info and nothing on the DIV

I wonder if the DIV tag is wrong?

Ed

**epots9** · Jul 23 '07, 05:07 PM

Originally posted by edwire

nope still same, just shows the text boxes info and nothing on the DIV

I wonder if the DIV tag is wrong?

Ed

did u use my code from my post above 'handleHttpResp onse'?

replace yours with the one i posted.

**edwire** · Jul 23 '07, 05:17 PM

Yes I did, here is the HTML with the chnages:

Code:

<!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('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>

Ed

**drhowarddrfine** · Jul 23 '07, 05:26 PM

Validate your html for a list of errors, particularly in your forms.

**epots9** · Jul 23 '07, 05:29 PM

u are missing some:
[code=javascript]
//notice var city =
var city = document.getEle mentById('city' ).value = results[0];
//notice var state =
var state = document.getEle mentById('state ').value = results[1];
//next line is only one line long
document.getEle mentById('city1 ').innerHTML = city + ", " + state + ", " + document.getEle mentById('zip') .value;
//another line
document.getEle mentById('state 1').innerHTML = "North Call 408-458-4855";
[/code]

u didn't delcare the variables.

DIV tags don't show text from onblur

DIV tags don't show text from onblur

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment