表单 javascript 提交事件

Question

我只想使用 javascript 管理表单，但事件监听器对我不起作用。怎么了？

我的表格：

<script src="init.js"></script>
<div id="search_box">
    <form id="search_form">
        <input type="search" name="search" autofocus placeholder="Google search" id="searchbox">
        <input type="button" value=&#9679; id="searchsign">
    </form>
</div>
<script src="search.js"></script>

在 init.js 文件中：

"use strict";

function $(selector){
    return document.querySelector(selector);
}

function $$(selector){
    return document.querySelectorAll(selector);
}

在 search.js 文件中：

$('#searchsign').addEventListener('click', search);
$('#search_form').addEventListener('submit', search);

function search(){
    console.info('search function OK');
    var searchvalue = $("#searchbox").value;
    var google = "https://www.google.hu/search?site=&source=hp&q=";
    window.location = google + searchvalue;
}

Answer 1

表单的 submit 事件将转到表单的操作（无操作 = 当前 URL）并重新加载页面。

如果您使用 JavaScript 处理它，请接受事件参数并对其调用 preventDefault 以防止默认行为：

function search(e) {
    e.preventDefault();
    // ...
}

我还建议您不要让您的函数成为全局函数，或者给 search 一个不同的名称以避免在全局命名空间中发生冲突。

旁注：您需要对查询字符串参数进行 URI 编码，因此请更改您的 location 分配以使用 encodeURIComponent:

window.location = google + encodeURIComponent(searchvalue);

Working copy on JSBin （因为 Stack Snippets 在不允许我们移动到 Google 的框架中工作）

工作示例来源：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<div id="search_box">
  <form id="search_form">
    <input type="search" name="search" autofocus placeholder="Google search" id="searchbox">
    <input type="button" value=&#9679; id="searchsign">
  </form>
</div>
<script>
"use strict";
(function() { // Scoping function to avoid globals
  function $(selector) {
    return document.querySelector(selector);
  }

  function $$(selector) {
    return document.querySelectorAll(selector);
  }

  $('#searchsign').addEventListener('click', search);
  $('#search_form').addEventListener('submit', search);

  function search(e) {
    e.preventDefault();
    console.info('search function OK');
    var searchvalue = $("#searchbox").value;
    var google = "https://www.google.hu/search?site=&source=hp&q=";
    window.location = google + encodeURIComponent(searchvalue);
  }
})();
</script>
</body>
</html>

Answer 2

Code looks fine to me here

结果不会显示，因为 google 不允许自己被 iframed，但您可以看到您的控制台日志打印得很好。

如果您在代码中没有看到与上面相同的结果，那么我猜您包含文件的顺序或方式有问题。

Answer 3

如果要触发submit事件，提交按钮不要添加点击事件监听器，而是将其type改为submit。

不要忘记在提交函数中添加 e.preventDefault() 以防止默认提交行为和页面重新加载

"use strict";

function $(selector) {
  return document.querySelector(selector);
}

function $$(selector) {
  return document.querySelectorAll(selector);
}

$('#search_form').addEventListener('submit', search);

function search(e) {
  e.preventDefault();
  console.info('search function OK');
  var searchvalue = $("#searchbox").value;
  var google = "https://www.google.hu/search?site=&source=hp&q=";
    window.location = google + searchvalue;
}

<script src="init.js"></script>
<div id="search_box">
  <form id="search_form">
    <input type="search" name="search" autofocus placeholder="Google search" id="searchbox">
    <input type="submit" value=&#9679; id="searchsign">
  </form>
</div>
<script src="search.js"></script>

表单 javascript 提交事件

form javascript submit event

javascript

events

form-submit