Question

I have written a JavaScript function to be called by my button.onclick() event, but the function is not called. Instead, my form action is performed.

HTML:

<form id = "Documents" action="Uploaded.php">
<input type="submit" id="Remove1" name="Remove[1]" value="Remove first" onclick="return Remove('Remove1');">
<input type="submit" id="Remove2" name="Remove[2]" value="Remove second" onclick=" return Remove('Remove2');">
</form>

Updated JavaScript:

function Remove(currentDoc)
{
if (window.XMLHttpRequest)
      {
  xmlhttp=new XMLHttpRequest();
  }
else
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("Removemsg").innerHTML=xmlhttp.responseText;
    }
  }
xmlhttp.open("GET","functions/remove.php?Doc="+currentDoc,true);
xmlhttp.send();

    return false;
}

It calls uploaded.php rather than my remove.php. But I already defined my onclick function to call remove.php. Kindly advise.

Answer 1

add a return false; statement to function remove() for preventing form submission.

And also your onclick="Remove()" should be onclick="return Remove();"

Your JS code is also errorful

function Remove(currentDoc)
{
if (window.XMLHttpRequest)
  xmlhttp=new XMLHttpRequest();
else
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("Removemsg").innerHTML=xmlhttp.responseText;
    }
  }
xmlhttp.open("GET","functions/remove.php?Doc="+currentDoc,true);
xmlhttp.send();

    return false;
}