0

我编写了一个 JavaScript 函数以供我的button.onclick()事件调用，但该函数未被调用。相反，我的表单操作被执行。

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. 好心提醒。

4

6 回答 6

3

添加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;
}
于 2012-07-12T12:34:47.423 回答
1

由于这是一个提交按钮，默认情况下它会将表单提交到 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;
}
于 2012-07-12T12:35:02.610 回答
1

使用<input type="button" />而不是<input type="submit" />防止表单提交

于 2012-07-12T12:37:13.560 回答
1

除了使用<input type="submit" ... />生成按钮，您还可以使用<button>标签（MDN 文档）

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

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

于 2012-07-12T12:39:23.340 回答
1

当您单击提交按钮时，它提交表单是很自然的。如果你想防止这种情况发生，你应该在你的事件处理程序中返回 false。请注意，在 remove 函数末尾返回 false 是不够的，您应该编写如下内容：

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

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

于 2012-07-12T12:45:13.953 回答
-3

如果您使用的是 JavaScript，则不需要使用<form>.

于 2012-07-12T12:39:14.830 回答