We help IT Professionals succeed at work.
Get Started

passing a variable argument to the getElementById().innerHTML

jbun
jbun asked
on
1,035 Views
Last Modified: 2013-12-13
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.
      




Comment
Watch Question
IT Expert
CERTIFIED EXPERT
Top Expert 2009
Commented:
This problem has been solved!
Unlock 1 Answer and 4 Comments.
See Answer
Why Experts Exchange?

Experts Exchange always has the answer, or at the least points me in the correct direction! It is like having another employee that is extremely experienced.

Jim Murphy
Programmer at Smart IT Solutions

When asked, what has been your best career decision?

Deciding to stick with EE.

Mohamed Asif
Technical Department Head

Being involved with EE helped me to grow personally and professionally.

Carl Webster
CTP, Sr Infrastructure Consultant
Ask ANY Question

Connect with Certified Experts to gain insight and support on specific technology challenges including:

  • Troubleshooting
  • Research
  • Professional Opinions
Did You Know?

We've partnered with two important charities to provide clean water and computer science education to those who need it most. READ MORE