javascript 如何添加事件侦听器以提交按钮
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/27328528/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to add event listener to submit button
提问by nublit
I am having many troubles with this html. I am trying to add an event listener to a submit button so that I can eventually change the document to display the form information. The problem is, when the form is filled, the button listener does nothing! (It works in jsfiddle and other things like it, but won't work as stand alone files, which leads me to believe I set my files up incorrectly somehow, possibly messed up with the script tag). I have tried many things, including moving the script tag around, trying to get event listener submit of form, and input type button but still nothing. Can anyone help here?
我在使用这个 html 时遇到了很多麻烦。我正在尝试向提交按钮添加一个事件侦听器，以便我最终可以更改文档以显示表单信息。问题是，当表单被填满时，按钮监听器什么都不做！（它适用于 jsfiddle 和其他类似的东西，但不能作为独立文件工作，这让我相信我以某种方式错误地设置了我的文件，可能与脚本标签搞砸了）。我尝试了很多东西，包括移动脚本标签，尝试让事件监听器提交表单，以及输入类型按钮，但仍然没有。有人可以帮忙吗？
My HTML:
我的 HTML：
<!DOCTYPE html>
<html>
<head>
<title>Form Project</title>
<style type="text/css" rel="stylesheet">
#but{text-align:center;}
td{text-align:right;}
span{padding=0; margin=0;float:left;}
</style>
</head>
<body>
<form id="formId">
<table border = "1">
<tr>
<th>Provide your contact information</th>
<th>Provide your login access information</th>
</tr>
<tr>
<td><label><span>First Name:</span> <input type = "text" placeholder = "Enter First Name" required/></label></td>
<td><label><span>Login ID:</span> <input type = "text" placeholder = "type a login ID" required/></label> </td>
</tr>
<tr>
<td><label><span>Middle Name:</span> <input type="text" placeholder ="type your middle name"/></label></td>
<td><label><span>Password:</span> <input type="password" placeholder ="password" required/></label></td>
</tr>
<tr>
<td><label><span>Last Name:</span> <input type="text" placeholder="Last Name" required/></label></td>
<td id="but"><label><button type="submit" id="displayButton">Display Info</button></label></td>
</tr>
<tr>
<td><label><span>Street Address:</span> <input type="text" placeholder="address" required/></label></td>
</tr>
<tr>
<td><label for ="Citylist"><span>City:</span>
<input type = "text" id ="citylist"
placeholder="Select a city" list = "cities" required/>
<datalist id= "cities">
<option value = "Bronx"/>
<option value = "Brooklyn"/>
<option value = "Queens"/>
<option value = "Manahttan"/>
<option value = "Staten Island"/>
</datalist>
</label>
</td>
</tr>
<tr>
<td><label for ="StateList"><span>State:</span>
<input type = "text" id ="State"
placeholder="Select a city" list = "states" required/>
<datalist id= "states">
<option value = "New York"/>
<option value = "New Jersey"/>
<option value = "California"/>
<option value = "Virginia"/>
<option value = "Maine"/>
</datalist>
</td>
</tr>
<tr>
<td><label><span>Zip code:</span> <input type="text" placeholder="Type your zipcode" maxlength="5" required/></label></td>
</tr>
<tr>
<td>
<label><span>Phone</span>
<input type ="tel" placeholder="(123)456-789"
pattern="\(\{3}) +\d{3}-\d{4}" required/>
</label>
</td>
</tr>
<tr>
<td>
<label><span>Email:</span>
<input type="email" placeholder="[email protected]" required/>
</label>
</td>
</tr>
<tr>
<td>
<label><span>Birth Date:</span>
<input type="date" required/>
</label>
</td>
</tr>
</table>
</form>
<script type="text/javascript" src="form.js"></script>
</body>
</html>
My JS, simplified just for eventlistener:
我的 JS，仅针对事件侦听器进行了简化：
var button = document.getElementById("displayButton");
//var form = document.getElementById("formId");
//form.addEventListener("submit",function(){console.log("something1"); return false;},false);
button.addEventListener("click", function(){console.log("something"); return false;},false);
function formDisplay(){
console.log("check");
}
It works when there the entire form IS NOT filled, but if all the required fields are filled then the console does not show up with "something".
当没有填写整个表单时它会起作用，但是如果所有必填字段都已填写，则控制台不会显示“某些内容”。
回答by mand
The reason that you don't see "something" in the console is that when the entire form is filled and the submit button is pressed it goes to the login page. This refresh the console and removes any data that was in it. In other words everything works, it's just that loading a new page removes everything that was in the console. You can check the button listener is working by replacing the call to console.log with alert. The alert call will happen AND you will see the popup whether or not the form is filled.
您在控制台中看不到“东西”的原因是当整个表单填写完毕并按下提交按钮时，它会进入登录页面。这将刷新控制台并删除其中的所有数据。换句话说，一切正常，只是加载一个新页面会删除控制台中的所有内容。您可以通过使用警报替换对 console.log 的调用来检查按钮侦听器是否正常工作。警报呼叫将发生，无论表单是否已填写，您都会看到弹出窗口。
button.addEventListener("click", function(){ alert("something"); return false; },false);
Here is a jsbin with a working example: http://jsbin.com/boxihukuni/1/edit?html,js,output
这是一个带有工作示例的 jsbin：http://jsbin.com/boxihukuni/1/edit?html,js,output
回答by Aaron Hammond
So I believe the issue that you're relating is caused by the fact that, when all required fields are filled, that the form submits.
因此，我相信您所涉及的问题是由以下事实引起的：在填写所有必填字段后，表单会提交。
If you structure the event listener instead as follows:
如果您按如下方式构造事件侦听器：
button.addEventListener("click",
function(e){
e.preventDefault();
console.log("something");
return false;
}
,false);
The form won't submit, and you should be able to do whatever you need to in the event handler (the e.preventDefault()stops the form submit).
表单不会提交，您应该能够在事件处理程序中执行任何您需要的操作（e.preventDefault()停止表单提交）。
回答by Intervalia
I would suggest using the submitevent to handle situations where the user can submit the form without clicking on the submit button.
我建议使用该submit事件来处理用户无需单击提交按钮即可提交表单的情况。
As others have stated you need to use evt.preventDefault()to stop the form from submitting.
正如其他人所说，您需要使用evt.preventDefault()来阻止表单提交。
The example below will check to see that everything is valid before it allows the form to be submitted.
下面的示例将在允许提交表单之前检查所有内容是否有效。
var form = document.getElementById("formId");
form.addEventListener("submit", function(evt) {
for(var i = 0; i < form.elements.length; i++) {
var el = form.elements[i];
if (!el.checkValidity()) {
evt.preventDefault();
console.log('Fix the form!');
return;
}
}
});#but {
text-align:center;
}
td {
text-align:right;
}
span {
float:left;
margin=0;
padding=0;
}<form id="formId">
<table border="1">
<tr>
<th>Provide your contact information</th>
<th>Provide your login access information</th>
</tr>
<tr>
<td>
<label><span>First Name:</span> <input type = "text" placeholder = "Enter First Name" required/></label>
</td>
<td>
<label><span>Login ID:</span> <input type = "text" placeholder = "type a login ID" required/></label>
</td>
</tr>
<tr>
<td><label><span>Middle Name:</span> <input type="text" placeholder ="type your middle name"/></label></td>
<td><label><span>Password:</span> <input type="password" placeholder ="password" required/></label></td>
</tr>
<tr>
<td><label><span>Last Name:</span> <input type="text" placeholder="Last Name" required/></label></td>
<td id="but"><label><button type="submit" id="displayButton">Display Info</button></label></td>
</tr>
<tr>
<td><label><span>Street Address:</span> <input type="text" placeholder="address" required/></label></td>
</tr>
<tr>
<td><label for ="Citylist"><span>City:</span>
<input type = "text" id ="citylist"
placeholder="Select a city" list = "cities" required/>
<datalist id= "cities">
<option value = "Bronx"/>
<option value = "Brooklyn"/>
<option value = "Queens"/>
<option value = "Manahttan"/>
<option value = "Staten Island"/>
</datalist>
</label>
</td>
</tr>
<tr>
<td><label for ="StateList"><span>State:</span>
<input type = "text" id ="State"
placeholder="Select a city" list = "states" required/>
<datalist id= "states">
<option value = "New York"/>
<option value = "New Jersey"/>
<option value = "California"/>
<option value = "Virginia"/>
<option value = "Maine"/>
</datalist>
</td>
</tr>
<tr>
<td><label><span>Zip code:</span> <input type="text" placeholder="Type your zipcode" maxlength="5" required/></label></td>
</tr>
<tr>
<td>
<label><span>Phone</span>
<input type ="tel" placeholder="(123)456-789"
pattern="\(\{3}) +\d{3}-\d{4}" required/>
</label>
</td>
</tr>
<tr>
<td>
<label><span>Email:</span>
<input type="email" placeholder="[email protected]" required/>
</label>
</td>
</tr>
<tr>
<td>
<label><span>Birth Date:</span>
<input type="date" required/>
</label>
</td>
</tr>
</table>
</form>