Objective:
To show a new, unique set of options in a drop-down box, for each row in the table, by using AJAX and PHP.
Details:
I have a table written in PHP, where, I create the rows of the table in for loop:
Code:
<table>
foreach ($mylist as $i)
{
<tr>
<td>
echo '<select name="product[]" onchange="showItems(this.value,'.$i.')" >';
echo "<option value='APPLE'>APPLE</option>";
echo "<option value='ORANGE'>ORANGE</option>";
echo "<option value='PLUM'>PLUM</option>";
echo '</select>';
</td>
<td>
echo '<select name="sales[]" id="txtHint">';
echo '</select>';
</td>
</tr>
}
</table>
This creates a table that looks like this:
No. Product sales mode
--- ------- -------
1 (Drop-down list here) (drop-down list here)
2 (Drop-down list here) (drop-down list here)
There are N no. of table rows.
When user selects a particular option, say, "APPLE" from the drop-down list, in the Product column, for row 1, then the corresponding sales mode column for the same row 1 is updated with options using AJAX, relevant to the APPLE product selected in the first column.
That is, Based on option in Product column, the options in sales mode column will change.(And not vice-versa).
The problem I am facing is, whenever, I select a new different product,in the second row of the table, the first row's sales mode column also changes, based on the second row's Product selection.
In the first step:
No. Product sales mode
--- ---- ----------
1 Apple EXPRESS
2 (Select) (Select)
When I do this next[Choosing Orange option in the product column]:
No. Product sales mode
--- ---- ----------
1 Apple EXPRESS//This is the default option for Apple
2 Orange (select)
It becomes this:
No. Product sales mode
--- ---- ----------
1 Apple REGULAR//This is the default option for Orange
2 Orange (select)
AJAX code:
function showItems(str,val)
{
if (str=="")
{
document.getElementById("txtHint").innerHTML="";
return;
}
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","getuser.php?q="+str+"&val="+val,true);
xmlhttp.send();
}
How do I achieve this? [Fairly new to AJAX]
Appreciate your help, suggestions. Let me know, if you need further information.
