我想仅使用 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=● 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;
}
最佳答案
表单的 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=● 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>
关于javascript - 表单 javascript 提交事件，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39475970/