为什么表单不阻止提交？答案

【问题标题】：Why is the form not preventing submission?为什么表单不阻止提交？
【发布时间】：2012-01-13 16:51:47
【问题描述】：

我有一个基本表单，我用它来测试一些 JavaScript 功能。我的目标是单击提交按钮并暂停提交，直到执行 javascript 函数，然后提交表单。我目前拥有的代码如下，但不会阻止提交表单，并且永远不会设置隐藏字段的值。有人可以解释为什么会这样吗？

注意我知道执行相同功能的 jQuery 方法。我专门尝试在不使用 jQuery 的情况下解决这个问题。如果您唯一的答案是“jQuery 更好”，请不要打扰。

<html>
<head>
<script type="text/javascript">
function test(){
  document.getElementById("hidden").value="hidden";

  var queryString = $('#decisionform').formSerialize(); 
  alert(queryString);

  document.getElementById("form").submit();
}
</script>
</head>

<body>

<?php
if ($_POST){
  foreach ($_POST as $key=>$value){
    echo "<b>$key</b> $value<br>";
  }
}
?>

<form action="hello.php" method="post" id="form">
<input name="first" type="text" />
<input name="second" type="text" />
<input name="third" type="text" />
<input name="hidden" type="hidden" />
<input name="submit" type="submit" value="Submit" onclick="test();return false;" />
</form>

</body>
</html>

【问题讨论】：

标签： php javascript html

【解决方案1】：

您没有 ID 为 hidden 的元素，因此 document.getElementById("hidden").value="hidden"; 将抛出错误，因为您无法在 undefined 上设置属性。该脚本将停止运行并且永远不会到达return false，因此表单将正常提交。

【讨论】：

另外，如果要避免使用 jQuery，$('#decisionform').formSerialize(); 也会引发 JavaScript 错误。

【解决方案2】：

试试<form action="hello.php" method="post" id="form" onsubmit="test(); return false;">

为了防止提交，你实际上需要有一个return false，即使是表单本身的onsubmit

以及在隐藏字段上没有 id。

【讨论】：

诚然我还没有测试过这个，但是阻止点击提交按钮的默认操作应该做同样的事情，不是吗？
我猜它可能，但我一直在提交表单时使用它，因为如果表单以另一种方式提交，你的 onclick 不会做任何事情。

【解决方案3】：

<input name="submit" type="submit" value="Submit" onclick="test();return false;" />

在这种情况下使用常规按钮，因为您的函数正在执行提交。

<input name="submit" type="button" value="Submit" onclick="test()" />

【讨论】：

【解决方案4】：

您的输入元素中缺少id 属性。修改<input name="hidden" type="hidden" />为<input name="hidden" type="hidden" id="hidden" />。

【讨论】：

【解决方案5】：

你可以使用

onclick="return test()"

并在函数结束时返回 false。

【讨论】：

【解决方案6】：

将 id="hidden" 添加到您的输入中，如下所示：

 <input name="hidden" type="hidden" id="hidden" />

【讨论】：