Problem with storing values in Array from php to AJAX
index.php
<html>
<head>
<title>Main Page</title>
<script language="javascript" type="text/javascript">
function ajaxFunction()
{
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function()
{
if(xmlhttp.readyState==4)
{
var arr = new Array(xmlhttp.responseText);
alert(arr[0]);
}
}
xmlhttp.open("GET","main.php?q="+document.frm.Act.options[document.frm.Act.selectedIndex].value,true);
xmlhttp.send(null);
}
</script>
</head>
<body>
<form name="frm" id="frm" method="post">
<table>
<tbody>
<tr>
<td>
<select name="Act" id="Act" onchange="ajaxFunction()">
<option value="0" selected="selected">[Select]</option>
<?php
include("config.php");
$query = mysql_query("select * from activity");
while ($row = mysql_fetch_array($query))
{
echo'<option value="'.$row['code'].'">'.$row['act'].'</option>';
}
mysql_close($con);
?>
</select>
</td>
</tr>
</tbody>
</table>
</body>
</html>
main.php
<?php
include("config.php");
$row = mysql_fetch_array(mysql_query("SELECT * FROM activity WHERE code ='".$_GET["q"]."'"));
echo"\"".$row[2]."\",\"".$row[3]."\",\"".$row[4]."\",\"".$row[5]."\"";
mysql_close($con);
?>
The main.php returns the values in the format - "21","32","2","33"
So the javascript should store it in an array, but it shows the whole value in arr[0], where arr[0] = "21","32","2","33"
while it should be
arr[0] = "21"
arr[1] = "32"
arr[2] = "2"
arr[3] = "33"
What is the problem? What should I do to get the desired result?