[Webinar] Streamline your web hosting managementRegister Today

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 930
  • Last Modified:

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.
      




0
jbun
Asked:
jbun
  • 2
1 Solution
 
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
 
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

Featured Post

Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now