Reading AJAX data

[cmccully]

Hi all,

I have an AJAX script that pulls a radio group list from PHP. I would like to then read which of those options the user subsequently selects.

My AJAX script:

function showCharacteristics()
		{
		xmlhttp1=new XMLHttpRequest();
		xmlhttp1.onreadystatechange=function()
		{
		if (xmlhttp1.readyState==4 && xmlhttp1.status==200)
			{
			document.getElementById("charList").innerHTML=xmlhttp1.responseText;
			}
		}
		xmlhttp1.open("GET","ctrPanelProc.php?selection=getCharacteristics",true);
		xmlhttp1.send();
		}

My PHP script:

echo "<form id='frmShowChar' name='frmDelChar' action='' onsubmit='dellChar();'>";
        $sql = "SELECT * FROM characteristic ORDER BY characteristic ASC";
        $result = mysql_query($sql);
        while($row = mysql_fetch_array($result))
              {
              echo "<input type='radio' id='charID' name='charID' value='" . $row['characteristicID']
                  . "'/> " . $row['characteristic'] . "<br />" ;
              }
        echo "</form>";

I would like to be able to read the 'charID' value the user has selected and pass that to another function. How can I access this value? Thanks!

cmccully

[hielo]

instead of:

echo "<input type='radio' id='charID' name='charID' value='" . $row['characteristicID']
                  . "'/> " . $row['characteristic'] . "<br />" ;

try:

echo "<input onclick='window.clickedCharID=this.value' type='radio' id='charID' name='charID' value='" . $row['characteristicID']
                  . "'/> " . $row['characteristic'] . "<br />" ;

then on the function that you need to know which of the radio buttons was checked all you need to do is test to see if it the variable clickedCharID exists:

if(typeof(window.clickedCharID)!="undefined"){
 alert(window.clickedCharID);
}

[cmccully]

Thank you hielo!

Your solution worked perfectly. Do you have time to educate me a bit more? Why did I need to create a new variable from the onclick event? When I used document.getElementById("charID").value I would get a different ID number each time. Why is the charID getting garbles / changed / modified?

Thanks again for your help!

cmccully

[hielo]

>>Thank you hielo!
You are welcome!

>>Your solution worked perfectly. Do you have time to educate me a bit more?
Not really :)

Why did I need to create a new variable from the onclick event?
In an HTML document, ALL the id's MUST be unique throughout the document. Due to this requirement, getElementById('charID') should get you a reference to THE one and only node with said id. So this would be wrong:

<input type='radio' id='charID' name='charID' value="1"/>
<input type='radio' id='charID' name='charID' value="2"/>

Because now getElementById() cannot determine accurately which element you want/need. That's why I "recorded" the clicked item into a "common/global" variable. Every time you click on any of those charID buttons, the variable gets updated.

It is OK for the names to be the same, but NOT the id. Correct:

<input type='radio' id='charID1' name='charID' value="1"/>
<input type='radio' id='charID2' name='charID' value="2"/>

>>When I used document.getElementById("charID").value I would get a different ID number each time. Why is the charID getting garbles / changed / modified?
Again, it must be unique. It sounds like you were probably re-using that id for multiple elements.

[cmccully]

Thanks hielo,

That makes perfect sense. Thanks for taking the time to help me learn. Take care!

cmccully

[hielo]

My pleasure Little Grasshopper.