I have a table where additional rows can be added by the user with the click of a JavaScript function.
Each row contains a drop down list, and based on the selected value, an AJAX script fetches some values to display in corresponding textfields within that same row.
Below is the HTML code snippet:
<td><div align="center">
<label>
<select name="gcno1" id="gcno1" onchange="fetch_gc(this)">
<option value="0">NIL</option>
<option value="2">1</option>
<?php while($row=mysql_fetch_array($result))
{
?>
<option value="<?php echo $row[0]; ?>"><?php echo $row[0]; ?></option>
<?php }?>
</select>
</label>
</div></td>
<td><div align="center"><input name="date1" id="date1" type="text" size="10" />
</div></td>
And here is the AJAX code I am using:
xmlhttp = new XMLHttpRequest();
var value=encodeURIComponent(document.getElementById('gcno1').value);
var parameters="param1="+value;
xmlhttp.open("POST", 'fetch_gc.php', true);
xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xmlhttp.send(parameters);
xmlhttp.onreadystatechange=function(){
if(xmlhttp.readyState == 4 && xmlhttp.status == 200)
{
var detail=xmlhttp.responseText.split('+');
alert(detail[0]);
document.getElementsByName('date1').value=String(detail[0]);
alert("life " + document.getElementById('gcno1').value);
}
}
The alert message in the AJAX code correctly displays the response text (detail[0]) but for some reason, it's not updating the textbox with the name 'gcno1' with this value. Assistance with solving this issue would be greatly appreciated.