Javascript - 检测表单按钮按下答案

【问题标题】：Javascript - Detect a form button pressJavascript - 检测表单按钮按下
【发布时间】：2019-02-04 04:51:19
【问题描述】：

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

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> 内。

【问题讨论】：

您将 var submit 设置为 url 输入，而不是提交按钮。要获取提交按钮，请使用document.querySelector('input[type=submit]');

标签： javascript html forms button

【解决方案1】：

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

这将选择第一个输入，类型 = url，而不是提交。这是因为 url 输入首先在 DOM 中，在提交输入之前。

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

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

另外，您可能应该监听表单的提交事件，而不是按钮的点击事件。

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

【讨论】：

在最后一段代码中......“提交”之后是什么？

【解决方案2】：

当您使用0 的索引时，您正在引用文档中的第一个input 元素，但您需要引用第二个input 元素。如果您引用正确的元素，它将起作用。你想要索引 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，它允许您为单个事件注册多个事件处理程序。

最后，请注意单击submit 按钮实际上会触发两个事件，即按钮本身的click 事件和提交按钮所绑定的form 元素的submit 事件。通常，我们希望利用表单的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>

【讨论】：

一旦将另一个输入元素添加到表单中，它就会中断（它几乎肯定会），并且您没有解释为什么这会产生任何影响。根据 Utkanos 的回答，更好的解决方案肯定是更精确地定位元素。
@Archer 我正在编辑以更全面地解释，但答案是正确的，因为它确实解释了为什么当前代码不起作用。
抱歉，我不知道您是如何改进答案的。您已经解释了很多东西，但没有解释 [0] 和 [1] 之间的区别，这就是以前的错误，并且您还给了他们处理输入值更改的代码，这与OP 在问什么。
@Archer 抱歉，我看不出你是如何改进答案的。 好的，我认为[0] 和[1] 做了什么很清楚鉴于 OP 是首先提供索引代码的那个。并且，input 事件被添加为事件处理的附加示例。
我认为这使问题过于复杂，但从未简单解释过最初的问题是什么。我们彼此不同意，这种情况就发生了。 OP 已经有了明确的答案，所以我就这样吧:)