AJAX getElementById problem

HI all,

I have a serverside(ASP)/javascript(AJAX) script that i need to make more dynamic...

I grabbed this typical snippet and modified to my needs...however, my problem is I need to have what I hardcoded in red to be dynamic.

I have a checklist with "items" (questions to answer)
- Each item has a textarea that a user can fill in with notes pertaining to the item
- The code I have works well; however, I need it to query on demand(onclick) using ajax. the responseText is an asp generated table of records from a database. Each item has a recordset; however with current code i can only access one...in this case ...where text_id_4 (AJAX div name)is located. under this textarea is the AJAX returned id.

how do i send a parameter to the stateChanged() function to work as I click on an onclick event?

in theory i thought...
1.assign unique names and id's for looped asp recordset(textareas and AJAX id(query result under each textarea)
2. onclick pass the AJAX responseText div tag name: ie - <div id="text_id_5"></div> to the stateChanged() function

am I at least on the right track....I would appreciate any help...I assure you IF I knew what to look for (Googling) I would have...I know very little about javascript ...THANKS!


current code for AJAX (setting up to send data to server and returning data to div)

var xmlHttp

function sendTextareaData(memo,unitsectionid,checklistnumrecid,checklistrecid, checklistopt)
{ 
xmlHttp=GetXmlHttpObject()
if (xmlHttp==null)
{
alert ("Browser does not support HTTP Request")
return
} 
var url="sendtextareadata.asp"
var memo = escape(memo)
memo = memo.replace("+", "%2B");

url=url+"?memo="+memo
url=url+"&unitsectionid="+unitsectionid
url=url+"&checklistnumrecid="+checklistnumrecid
url=url+"&checklistrecid="+checklistrecid
url=url+"&checklistopt="+checklistopt
url=url+"&sid="+Math.random()
xmlHttp.onreadystatechange=stateChanged
xmlHttp.open("GET",url,true)
xmlHttp.send(null)
}

function stateChanged() 
{ 
if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")
{ 
[COLOR="Red"]var myid = "text_id_" + 4[/COLOR]
document.getElementById([COLOR="Red"]myid[/COLOR]).innerHTML=xmlHttp.responseText 

} 
} 

function GetXmlHttpObject()
{ 
var objXMLHttp=null
if (window.XMLHttpRequest)
{
objXMLHttp=new XMLHttpRequest()
}
else if (window.ActiveXObject)
{
objXMLHttp=new ActiveXObject("Microsoft.XMLHTTP")
}
return objXMLHttp
}

Code (markup):

I opted not to post the asp code...I figured the html (output) would be more beneficial for debugging/following along

html OTPUT from server (cut many items off..simply wanted to show more than one for the problem i have (2 items/AJAX divs total)

<form name="checklist">
<table class="checklist_body" cellspacing="0" cellpadding="0">
 <tr>
  <th class="checklist_body">NO.</th>
  <th class="item">ITEM</th>
  <th class="reference">REFERENCE</th>
  <th class="yes">Y</th>
  <th class="no">N</th>
  <th class="na">NA</th>
</tr>
<tr>
 <td valign="top" style="position:relative;" class="sequence">1  <img id="swap_1" style="position:absolute;bottom:0px;right:0px;background-image: url(images/plus2.gif);background-repeat:no-repeat;" src="images/transparent.gif" onclick="switchMenu('var_1');toggleImage(this, 'url(images/minus2.gif)');sendTextareaData(document.checklist.memo_1.value,1,1,1,getRadioValue(document.checklist.radio_1))">
 </td>
 <td valign="top" class="item">Do unit commanders/staff agency chiefs appoint security managers and is a copy of the appointment letter provided to the ISPM?&nbsp;</td>
 <td valign="top" class="reference">AFI 31-401, Para 1.3.3 and AETC Sup 1, Para  1.3.5.1&nbsp;</td>
 <td class="yes"><input type="radio" name="radio_1" value="Y" checked></td>
 <td class="no"><input type="radio" name="radio_1" value="N"></td>
 <td class="na"><input type="radio" name="radio_1" value="NA"></td>
</tr>
<tr id="var_1" style="display:none;">
 <td colspan="6" class="discrepancy">
  <table cellspacing="0" cellpadding="0">
   <tr>
    <td colspan="6" class="taskbar">
     <input type="button" name="add_history" value="Add to History" onclick="sendTextareaData(document.checklist.memo_1.value,1,1,1,getRadioValue(document.checklist.radio_1));document.checklist.textarea_1.value = '';">
    </td>
   </tr>
   <tr>
    <td colspan="6">
     <textarea id="textarea_1" class="discrepancy" name="memo_1" wrap="hard"></textarea>
    </td>
   </tr>
   <tr>    <td colspan="6" style="width:650px;">
     <div id="text_id_1"></div>
    </td>
   </tr>
  </td>
 </tr> 
</table>
</td>
</tr>
<tr>
 <td valign="top" style="position:relative;" class="sequence">2  <img id="swap_2" style="position:absolute;bottom:0px;right:0px;background-image: url(images/plus2.gif);background-repeat:no-repeat;" src="images/transparent.gif" onclick="switchMenu('var_2');toggleImage(this, 'url(images/minus2.gif)');sendTextareaData(document.checklist.memo_2.value,1,2,2,getRadioValue(document.checklist.radio_2))">
 </td>
 <td valign="top" class="item">Are internal operating instructions developed, and are drafts routed through the ISPM for review prior to implementation?&nbsp;</td>
 <td valign="top" class="reference">AFI 31-401, AETC Sup 1, Para 1.3.6.2&nbsp;</td>
 <td class="yes"><input type="radio" name="radio_2" value="Y"></td>
 <td class="no"><input type="radio" name="radio_2" value="N" checked></td>
 <td class="na"><input type="radio" name="radio_2" value="NA"></td>
</tr>
<tr id="var_2" style="display:none;">
 <td colspan="6" class="discrepancy">
  <table cellspacing="0" cellpadding="0">
   <tr>
    <td colspan="6" class="taskbar">
     <input type="button" name="add_history" value="Add to History" onclick="sendTextareaData(document.checklist.memo_2.value,1,2,1,getRadioValue(document.checklist.radio_2));document.checklist.textarea_2.value = '';">
    </td>
   </tr>
   <tr>
    <td colspan="6">
     <textarea id="textarea_2" class="discrepancy" name="memo_2" wrap="hard"></textarea>
    </td>
   </tr>
   <tr>    <td colspan="6" style="width:650px;">
     <div id="text_id_2"></div>
    </td>
   </tr>
  </td>
 </tr> 
</table>
</td>
</tr>
</td>
</tr>
</table>
 </form>

Code (markup):