Question

我编写了一个由我的button.onclick()事件调用的JavaScript函数，但是没有调用该函数。而是执行我的表单操作。

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>

更新了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;
}

它会调用uploaded.php而不是remove.php。但我已经定义了onclick函数来调用remove.php。请建议。

Answer 1

向return false;添加function remove()语句，以防止表单提交。

此外，onclick="Remove()"也应为onclick="return Remove();"

你的JS代码也是错误的

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;
}

Answer 2

由于这是一个提交按钮，因此默认情况下会将表单提交到action属性中的url。

为了防止它，你需要在函数结束时返回false：

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;
}

Answer 3

使用<input type="button" />代替<input type="submit" />来阻止表单提交

Answer 4

您也可以使用<input type="submit" ... />代码（MDN docu）

，而不是使用<button>生成按钮

<button type="button" id="Remove1" name="Remove[1]" onclick="Remove('Remove1')">Remove first</button>

这将生成一个按钮。通过设置type="button"，您可以阻止默认（type="submit"），这会触发表单提交。

Answer 5

当您单击提交按钮时，提交表单很自然。如果要阻止这种情况，则应在事件处理程序中返回false。请注意，在删除函数结束时返回false是不够的，您应该写下这样的内容：

<input type="submit" id="Remove1" name="Remove[1]" value="Remove first" onclick="return Remove('Remove1')">

并且你的删除函数应该返回false。另请注意，ajax编码中存在语义错误。你应该在调用xmlhttp对象的open（）函数后设置onReadyStateChange。访问here了解更多信息

Answer 6

如果您使用的是JavaScript，则无需使用<form>。

按钮onclick调用函数而不是表单操作

6 个答案: