Problem with AJAX. Only 1 reponse div is populating

[roywebdesign]

Hey guys,

 

I'm attempting to build a large survey, one with "forked questions". For example:

 

"Does your company offer health benefits?"

If "YES" => Show these questions

If "NO" => Do nothing

 

I have it working with AJAX, when the user clicks "YES", it shows the forked questions, and if the user clicks "NO" it clears them out. Perfect.

 

The problem is when I include an additional question, its forked questions show up in the first question. My "ResponseDiv" is populating with the forked questions, however I need it to populate per question.

 

It may just be an ID issue, but I've literally been trying for about 3-4 hours now and I cannot get any WHERE id = $id to work.

 

Here is my code:

 

My AJAX code:

 

function getXMLHttp()
{
  var xmlHttp

  try
  {
    //Firefox, Opera 8.0+, Safari
    xmlHttp = new XMLHttpRequest();
  }
  catch(e)
  {
    //Internet Explorer
    try
    {
      xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
    }
    catch(e)
    {
      try
      {
        xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
      }
      catch(e)
      {
        alert("Your browser does not support AJAX!")
        return false;
      }
    }
  }
  return xmlHttp;
}

function MakeRequest()
{
  var xmlHttp = getXMLHttp();

  xmlHttp.onreadystatechange = function()
  {
    if(xmlHttp.readyState == 4)
    {
      HandleResponse(xmlHttp.responseText);
    }
  }

  xmlHttp.open("GET", "fork-select.php", true);
  xmlHttp.send(null);
}

function MakeRequest2()
{
  var xmlHttp = getXMLHttp();

  xmlHttp.onreadystatechange = function()
  {
    if(xmlHttp.readyState == 4)
    {
      HandleResponse(xmlHttp.responseText);
    }
  }

  xmlHttp.open("GET", "blank.php", true);
  xmlHttp.send(null);
}

function HandleResponse(response)
{
  document.getElementById('ResponseDiv')[removed] = response;
}

 

Then I have 2 PHP loops:

 

Here is my main one on my view page:

$query = $this->db->query('SELECT * FROM survey_new');
foreach ($query->result() as $row)
{
echo $row->id;
echo $row->question;
echo "<div id=ResponseDiv></div>";
echo "<hr>";
}

 

 

Then the final loop on my "fork-select.php" (which is called via AJAX GET)

 

$fork=mysql_query("SELECT fork FROM survey_new");
while($rows=mysql_fetch_assoc($fork)){
echo $rows['fork'];		
}

 

Thanks a lot for any help you guys can provide.

 

I've attached a screenshot of the interface, as you can see I have "YES" selected on Question 2, (id = 5), however it's forked question shows up on question 1. If I click "NO" on question 2, it'll clear out everything form question 1.

 

Additionally, here is my source code:

 

1Does your company offer Health Benefits?  <input name="blah" type="radio" value="Yes" onclick='MakeRequest();' />Yes  
<input name="blah" type="radio" onclick='MakeRequest2();' value="No" />No<div id=ResponseDiv></div><hr>5Does your company play Diablo?  <input name="blah2" type="radio" value="Yes" onclick='MakeRequest();' />Yes  
<input name="blah2" type="radio" onclick='MakeRequest2();' value="No" />No<div id=ResponseDiv></div><hr>  

 

Thanks!