troubleshooting Question

passing a variable argument to the getElementById().innerHTML

Avatar of jbun
jbunFlag for United States of America asked on
PHPScripting LanguagesAJAX
4 Comments1 Solution1036 ViewsLast Modified:
What I can't get working is passing a variable to the getElementById().innerHTML.
I've read all the expert exchange answers to similar questions, and have tried numerous
workarounds, but have been unable to get the getElementbyID().innerHTML to recognize any
value I put in it other than a hardcoded 'answer0' etc.

I have some html/php code that I have been attempting to update using ajax techniques.
I have been successfull in designing the html so it scales to an array $theVal
which defines all the products, and prices based on three condition categories.

I have rows of input fields, one for each product. Everything works fine, but before
the totals of each row are displayed, an update button must be pressed to update the
entire page. So I am trying to use ajax techniques let each row update as the user enters
the quantity and chooses a conditon fair, good, or excellent. ( 3 radio buttons).

Essentially, I have a for loop that generates $i rows of inputs based on the size of

Here's the html/php:

  $i=0;   // I have simplified it here as this will be a for loop based on size of $theVal.
            // also the name of the 3 radio buttons will be changed for each row
            // I left them as "trad" for simplicity of this example.      
 <form name="f">
<input type="text" value="<?php echo $valDescrip[$i] ; ?>" size="12" readonly="readonly">

<input type="text" id="qty1" onchange="doMath();" size="6">

<input type="radio" onclick="doMath(<?php echo $theVal[$i][1].","."'answer".$i."'"; ?>)"
 id="r1" name="trad" value= "<?php echo $theVal[$i][1]; ?>" <?php if($shape[$i]==1) echo "checked"; ?>  >  
<input type="radio" onclick="doMath(<?php echo $theVal[$i][2].","."'answer".$i."'"; ?>)"
 id="r1" name="trad" value="<?php echo $theVal[$i][2]; ?>" <?php if($shape[$i]==2) echo "checked"; ?>  >  
<input type="radio" onclick="doMath(<?php echo $theVal[$i][3].","."'answer".$i."'"; ?>)"
 id="r1" name="trad" value="<?php echo $theVal[$i][3]; ?>" <?php if($shape[$i]==3) echo "checked"; ?>  >  

<div id="<?php echo "answer".$i ; ?>" style="display: inline; font-size: 16px"></div>


Here is the souce code of the above as interpreted by the browser:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
<html xmlns="">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Ajax - calculator PHP example</title>

  <script language="javascript" src="g9_ajax.js"></script>

  <form name="f">
<input type="text" value="sleepers" size="12" readonly="readonly">

<input type="text" id="qty1" onchange="doMath();" size="6">

<input type="radio" onclick="doMath(12,'answer0')" id="r1" name="trad" value= "12"   > 
<input type="radio" onclick="doMath(15,'answer0')" id="r1" name="trad" value="15"   > 
<input type="radio" onclick="doMath(20,'answer0')" id="r1" name="trad" value="20"   > 

<div id="answer0" style="display: inline; font-size: 16px"></div>


here's the .js script:

http = getHTTPObject();
function getHTTPObject(){
  var xmlhttp;
  @if (@_jscript_version >= 5)
    try {
      xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
      xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
      xmlhttp = false;
    xmlhttp = false;
  @end @*/
  if(!xmlhttp && typeof XMLHttpRequest != 'undefined'){
    try {
      xmlhttp = new XMLHttpRequest();
      xmlhttp = false;

  return xmlhttp;
 var costholder = 0;
function doMath(costEach,itemID){
  var url = "g9_backend.php?qty1=" + document.getElementById('qty1').value;
// the g9_backend.php works fine. At least using the hardcoded 'answer0' below.

  if(costEach != null)
  url += "&costEach=" + costEach;
  costholder = costEach;
  if(costEach == null)
  costEach = costholder;
  url += "&costEach=" + costEach;
 }"GET", url, true);
  http.onreadystatechange = handleHttpResponse;
function handleHttpResponse(){
  if(http.readyState == 4){
    document.getElementById('answer0').innerHTML = http.responseText;
//This works for one row as long as 'answer0' is hardcoded in the line above:

//When I use the itemID value passed as an argument it does not work:

//      document.getElementById(itemID).innerHTML = http.responseText;

//Thanks experts for any help you may supply.

Join our community to see this answer!
Unlock 1 Answer and 4 Comments.
Start Free Trial
Learn from the best

Network and collaborate with thousands of CTOs, CISOs, and IT Pros rooting for you and your success.

Andrew Hancock - VMware vExpert
See if this solution works for you by signing up for a 7 day free trial.
Unlock 1 Answer and 4 Comments.
Try for 7 days

”The time we save is the biggest benefit of E-E to our team. What could take multiple guys 2 hours or more each to find is accessed in around 15 minutes on Experts Exchange.

-Mike Kapnisakis, Warner Bros