验证表单。 addEventListener 不听
[英]validating form. addEventListener not listening
问题描述
OK so I have a form that I check to see if the user enters in a username in the username field.
好的，所以我有一个表单，用于检查用户是否在用户名字段中输入了用户名。 On top of that i also want to know what button what clicked, really im looking to see when the logout button is clicked.最重要的是，我还想知道点击了什么按钮，我真的很想看看注销按钮何时被点击。 It seems to me that the addEventListener isn't registering the 'click' value when the form is submitted.在我看来，提交表单时 addEventListener 没有注册“点击”值。 both the buttons and the buttonLength have the right values when I run it with Firefox debugger.当我使用 Firefox 调试器运行它时， buttons和buttonLength都有正确的值。 So my question is, how do I check the addEventListener value or if its getting passed?所以我的问题是，我如何检查 addEventListener 值或者它是否被通过？ looking for some insight on what I'm doing wrong.寻找一些关于我做错了什么的见解。
<!DOCTYPE html>
<html>
<head>
<title>Not empty</title>
</head>
<body>
<script>
function ValidateForm(frm){
var buttons = document.getElementsByName('adam');
var buttonsLength = buttons.length;
for (var i = 0; i < buttonsLength; i++){
buttons[i].addEventListener('click', clickResponse, false);
};
function clickResponse(){
if(this.id == "logout"){
alert(this.id);
}else {
alert("not logout:" + this.id);
};
};
if (!frm.UserName.value) {
alert("You must enter your username.");
frm.UserName.focus();
return false;
}
return true;
}
</script>
<form method="post" action="test.html" onsubmit="return ValidateForm(this)">
<input type="input" name="UserName" value="">
<input type="password" name="Password" value="">
<button name="adam" id="login">login</button>
<button name="adam" id="sendMe">send me my password</button>
<button name="adam" id="logout">logout</button>
<form>
</body>
2 个解决方案
解决方案1
1 已采纳 2017-01-09 20:09:28
Maybe I'm wrong but I think you try to do the following:也许我错了，但我认为您尝试执行以下操作：
<!DOCTYPE html>
<html>
<head>
<title>Not empty</title>
</head>
<body>
<form method="post" name="formname" action="test.html">
<input type="input" id="username" name="userName" value="">
<input type="password" id="password" name="Password" value="">
<button type="button" name="adam" id="login">login</button>
<button type="button" name="adam" id="sendMe">send me my password</button>
<button type="button" name="adam" id="logout">logout</button>
<form>
<script>
var buttons = document.getElementsByName('adam');
var buttonsLength = buttons.length;
for(var i=0;i<buttonsLength; i++){
buttons[i].addEventListener('click', clickResponse, false);
};
function clickResponse(){
var u, p;
u=document.getElementById('username');
p=document.getElementById('password');
switch(this.id) {
case 'logout':
alert('Logout '+this.id);
break;
case 'login':
if(u.value.length==0 ||
p.value.length==0) {
alert("Please enter your unsername and password.");
if(u.length==0) {
u.focus();
} else {
p.focus();
}
} else {
alert('submit');
//document.forms.formname.submit();
}
break;
case 'sendMe':
if(u.value.length==0) {
alert("Please enter your username.");
u.focus();
return false;
} else {
alert('submit');
//document.forms.formname.submit();
}
break;
}
};
</script>
</body>
So, you need to assign listeners before click, then I guessed you want to capture click check button id (command to execute) and then check if user and pass are fullfilled depending the button clicked, if so then submit the form... I've changed your code but I think is what you're looking for.因此，您需要在单击之前分配侦听器，然后我猜您想捕获单击检查按钮 ID（要执行的命令），然后根据单击的按钮检查用户和传递是否已满，如果是，则提交表单...我已经更改了您的代码，但我认为这正是您要找的。
Hope it helps!!!希望能帮助到你！！！
解决方案2
0 2017-01-09 20:02:27
Your code is a little messy and hard to understand exactly what you need.你的代码有点乱，很难理解你到底需要什么。
That being said, you should use onclick attributes to bind the buttons to 3 separate functions.话虽如此，您应该使用onclick属性将按钮绑定到 3 个单独的功能。
Inside those functions you can get ahold of any dom nodes you need to preform login/logout/sendMe functionality.在这些函数中，您可以获得执行登录/注销/sendMe 功能所需的任何 dom 节点。
Like so:像这样：
<!DOCTYPE html> <html> <head> <title>Not empty</title> </head> <body> <script> function login(){ alert('login function'); // do what you need to here to login var username = document.getElementsByName('input-username').value; var password = document.getElementsByName('input-password').value; if (!username){ alert("You must enter your username."); }else if (!password){ alert("You must enter your password."); } } function sendMe(){ alert('sendMe function'); // sendMe functionality here } function logout(){ alert('logout function'); // logout functionality here } </script> <form method="post" action="test.html"> <input id='input-username' type="input" name="UserName" value="" /> <input id='input-password' type="password" name="Password" value="" /> <button id="login" onClick="login()">login</button> <button id="sendMe" onClick="sendMe()">send me my password</button> <button id="logout" onClick="logout()">logout</button> <form> </body>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.