为什么表单不阻止提交?

时间:2012-01-13 16:51:48

标签: php javascript html

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

6 个答案:

答案 0 :(得分:2)

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

答案 1 :(得分:1)

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

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

以及隐藏字段上没有ID。

答案 2 :(得分:0)

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

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

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

答案 3 :(得分:0)

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

答案 4 :(得分:0)

您可以使用

onclick="return test()"

并在函数结束时返回false。

答案 5 :(得分:0)

id =“hidden”添加到您的输入中,如下所示:

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