Question

我有一个基本表单，我用它来测试一些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>

Answer 1

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

Answer 2

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

要阻止提交，您实际上需要return false onsubmit甚至是表单本身

以及隐藏字段上没有ID。

Answer 3

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

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

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

Answer 4

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

Answer 5

您可以使用

onclick="return test()"

并在函数结束时返回false。

Answer 6

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

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

为什么表单不阻止提交？

6 个答案: