Question

我想仅使用javascript管理表单，但eventlistener并不适合我。怎么了？

我的表格：

<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事件将转到表单的操作（无操作=当前网址）并重新加载页面。

如果您使用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

结果不会显示，因为谷歌不允许自己进行iframed，但你可以看到你的控制台日志打印得很好。

如果您在代码中看不到与上述相同的结果，那么我猜测您的文件的订购或方式存在问题。

Answer 3

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

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

＆＃13;

"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;
}

＆＃13;

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

＆＃13;

表单javascript提交事件

3 个答案: