表单javascript提交事件
[英]form javascript submit event
问题描述
I want to manage a form only with javascript, but the eventlistener doesn't worked for me. 
我只想使用javascript管理表单，但eventlistener不适用于我。 What's wrong? 怎么了？
My form: 我的表格：
<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>
In init.js file: 在init.js文件中：
"use strict";
function $(selector){
return document.querySelector(selector);
}
function $$(selector){
return document.querySelectorAll(selector);
}
in search.js file: 在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;
}
3 个解决方案
解决方案1
1 已采纳 2016-09-13 17:43:53
The form's submit event will go to the form's action (no action = the current URL) and reload the page. 表单的submit事件将转到表单的操作（无操作=当前URL）并重新加载页面。
If you're handling it with JavaScript, accept the event argument and call preventDefault on it to prevent the default behavior: 如果使用JavaScript处理，请接受event参数并对其调用调用preventDefault以防止出现默认行为：
function search(e) {
e.preventDefault();
// ...
}
I would also suggest either not making your functions globals, or giving search a different name to avoid conflicts in the global namespace. 我也建议您不要将函数设为全局，或者给search一个不同的名称，以避免全局命名空间中的冲突。
Side note: You need to URI-encode query string arguments, so change your location assignment to use encodeURIComponent : 旁注：您需要对查询字符串参数进行URI编码，因此将location分配更改为使用encodeURIComponent ：
window.location = google + encodeURIComponent(searchvalue);
Working copy on JSBin (Since Stack Snippets work in frames that don't allow us to move off to Google) 在JSBin上的工作副本 （由于堆栈代码段无法在我们无法迁移到Google的框架中工作）
Source of working example: 工作示例的来源：
<!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>
解决方案2
0 2016-09-13 17:44:38
Code looks fine to me here 代码对我来说很好
The results aren't going to show because google does not allow itself to be iframed, but you can see your console logs are printing just fine. 结果不会显示，因为google不允许对其进行格式化，但是您可以看到控制台日志可以正常打印。
If you are not seeing the same results as above in your code, then I'm guessing there is an issue with the order or manner in which you are including your files. 如果您在代码中看不到与上面相同的结果，那么我猜测包含文件的顺序或方式有问题。
.
解决方案3
0 2016-09-13 17:45:18
If you want to trigger submit event, do not add click event listener to submit button, instead change its type to submit . 如果要触发submit事件，请不要添加单击事件侦听器以提交按钮，而是将其type更改为submit 。
Do not forget to add e.preventDefault() in submit function to prevent default submit behaviour and page reloading 不要忘记在e.preventDefault()函数中添加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=● id="searchsign"> </form> </div> <script src="search.js"></script>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.