passing a variable argument to the getElementById().innerHTML

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


Here's the html/php:

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

</div>
</body>
</form>
</html>

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Ajax - calculator PHP example</title>
</head>
<body>

  <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>
</div>
</body>
</form>
</html>

*********************************************************

here's the .js script:

http = getHTTPObject();
 
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 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;
 }
 
  http.open("GET", url, true);
  http.onreadystatechange = handleHttpResponse;
 
  http.send(null);
}
 
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.
      




jbunAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

kumaranmcaCommented:
Hi Jbun,

I have modified some code in your file little bit...its working fine...

Try the below code and give your feedback.

PHP file
g9_backend.php

<?php
echo $_REQUEST['qty1'];
?>

Html file

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Ajax - calculator PHP example</title>
</head>
 <script language="javascript">
http = getHTTPObject();
 
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 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;
 }
 
  http.open("GET", url, true);
  http.onreadystatechange = handleHttpResponse;
 
  http.send(null);
}
 
function handleHttpResponse(){
  if(http.readyState == 4){
  alert( http.responseText);
    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.
 </script>

<body>
<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"   > 
</form>
<div id="answer0" style="display: inline; font-size: 16px"></div>
</div>
</body>
</html>
0
Michel PlungjanIT ExpertCommented:

 var costholder = 0;
 var itemID;
function doMath(costEach,theItem){
  itemID=theItem


.
.
.
if (itemID && document.getElementById(itemID)) document.getElementById(itemID).innerHTML = http.responseText;
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
jbunAuthor Commented:
Thanks for responses, I can only work on this in evenings. I will try out tonight.
0
jbunAuthor Commented:
kmaranmca, sorry I forgot to include the g9_backend.php
   <?php
      $endgame= $_GET[qty1] * $_GET['costEach];

      echo $endgame;
   ?>

mplunqian: It works now. Thank you. I've been working a month trying to get this
solved.
 This is my first question to EE and am very pleased. Maybe now I can sleep at nite without going over possible solutions to this problem.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
PHP

From novice to tech pro — start learning today.