Having encountered a problem with my JavaScript script, I need some assistance. I am relatively new to coding in JavaScript and generally try to avoid it due to the complexities of debugging. The issue at hand involves a script I am working on for AJAX that is meant to add an image to a gallery. The image and gallery are both represented by unique IDs in the database. When a link is clicked, the script should run to add the image to the database. However, despite numerous attempts, the script is not functioning as expected, and identifying the point of failure in JavaScript can be quite challenging.
function addToGallery(img)
{
var e = document.getElementById("galleries2");
var gal = e.options(e.selectedIndex).value;
window.alert("Gallery Id: "+gal+" Image Id: "+img);
if (img=="")
{
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","addtogallery.php?img="+img+"gal="+gal,true);
xmlhttp.send();
}
I have tried various troubleshooting techniques, including setting up alert messages to pinpoint the source of the issue. Surprisingly, moving the alert message above or below the variable declarations produces different outcomes – indicating a potential problem within the script.
An additional challenge arises when attempting to pass multiple values using the `xhtmlrequest.open` method. While one value can be successfully passed, adding a second parameter results in only the first value being transmitted to the PHP page. This discrepancy occurs despite confirming that both variables, img and gal, are properly set.
If anyone has encountered similar challenges before, any advice or guidance would be greatly appreciated.