停止使用本机 javascript 提交表单答案

【问题标题】：Stop form submit with native javascript停止使用本机 javascript 提交表单
【发布时间】：2015-02-15 07:45:03
【问题描述】：

我需要通过原生 javascript（不是 jQuery）选择表单并阻止表单提交（preventDefault）。

诀窍是表单没有名称或 ID，并且不能分配一个。

我的 HTML：

<div id="search">
    <form method="get">
        <input type="text" name="post"/>
        <input type="submit" value="Post">
    </form>
</div>

到目前为止，我已经尝试使用document.forms[0]和document.getElementsByTagName("form")[0]来选择表单，但是返回的值是未定义的。

另一个可能的解决方案是重载提交按钮的功能，但我也没有成功。

【问题讨论】：

标签： javascript html forms submit

【解决方案1】：

使用querySelector 和一个事件监听器，它几乎就像 jQuery

document.querySelector('#search form').addEventListener('submit', function(e) {
    e.preventDefault();
});

请注意，脚本必须在元素之后，或者使用 DOM 就绪处理程序，以便元素可用。

FIDDLE

【讨论】：

我尝试了类似的方法，但它告诉我我无法读取 null 的属性。我不知道为什么它会是空的......
因为没有可用的元素，返回null，在DOM中的元素后面加上脚本，就可以了。

【解决方案2】：

简单的方法是使用 onsubmit 事件处理程序

<script>
var submitHandler = function() {
  // your code
  return false;
}
</script>

<form method="get" onsubmit="return submitHandler()">....</form>

或者更简单

<form onsubmit="return false;">

【讨论】：

对不起，我应该更清楚一点，我不能以任何方式修改标记。 @adeneo 的解决方案有效，我走在正确的轨道上，我只是忘记了必须在 HTML 页面上的标记之后包含脚本。

【解决方案3】：

在表单提交时只返回 false。

例如<form onsubmit="return false">

【讨论】：