Question

我编写了一些测试代码，以查看是否可以检测到表单提交按钮的按下。

HTML

<form action="/pst" method="POST">
    Form
<input type="url" name="form_input">
<input type="submit" value="submit" />

JAVASCRIPT

<script>
                var submit = document.getElementsByTagName('input')[0];
                submit.onclick = function() {
                    alert("Button pressed!");
                }
</script>

这不起作用... 另外我还必须报告该脚本位于<body>内部。

Answer 1

var submit = document.getElementsByTagName('input')[0];

这将选择类型为url的第一个输入，而不是提交。这是因为url输入是DOM中的第一个，然后是提交输入。

更准确地定位元素。给它一个ID或使用类似的查询

document.querySelector('input[type=submit]');

此外，您可能应该在监听表单的提交事件，而不是按钮的click事件。

document.querySelector('form').addEventListener('submit', ...

Answer 2

如果引用正确的元素，它将起作用。您需要索引1，而不是0。

var submit = document.getElementsByTagName('input')[1];
submit.onclick = function() {
  alert("Button pressed!");
}

<form action="/pst" method="POST">
    Form
  <input type="url" name="form_input">
  <input type="submit" value="submit">
</form>

在学习时，先消除一些不良习惯，然后再养成习惯。.getElementsByTagName()确实有效，但是它会返回所谓的“活动”节点列表，这意味着您每次使用变量时参照列表，必须再次扫描整个文档以找到最新的匹配元素集。这样，它仅应在元素被动态添加到文档中或从文档中删除的情况下使用。另外，由于您只对一个元素感兴趣，因此在整个文档中扫描一组元素，仅丢掉其中一个引用就浪费了。

相反，请使用更合适的API，例如.querySelector()和.getElementById()。

接下来，不要使用.onclick属性来设置事件处理程序，而是使用更现代，更强大的.addEventListener() API，该API允许您为单个事件注册多个事件处理程序。

最后，请注意，单击submit按钮实际上会触发两个事件，即按钮本身的click事件和submit元素的form事件，提交按钮已绑定。通常，我们想利用表单的submit事件。

将所有内容放在一起：

// Get a reference to the form
var form = document.querySelector("form");

// Set up a submit event handler
form.addEventListener("submit", function() {
  alert("Form Submitted!");
});

// Get a reference to the textbox
var textbox = document.querySelector("input[type='url']");

// Set up a input event handler (fires every time you type in the box)
textbox.addEventListener("input", function() {
  console.log("edit - new value is:" + this.value);
});

<form action="/pst" method="POST">
    Form
  <input type="url" name="form_input">
  <input type="submit" value="submit">
</form>

Javascript-检测按下表单按钮

2 个答案: