验证表单。 addEventListener 不听

Question

好的，所以我有一个表单，用于检查用户是否在用户名字段中输入了用户名。 最重要的是，我还想知道点击了什么按钮，我真的很想看看注销按钮何时被点击。 在我看来，提交表单时 addEventListener 没有注册“点击”值。 当我使用 Firefox 调试器运行它时， buttons和buttonLength都有正确的值。 所以我的问题是，我如何检查 addEventListener 值或者它是否被通过？ 寻找一些关于我做错了什么的见解。

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

Answer 1

也许我错了，但我认为您尝试执行以下操作：

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

因此，您需要在单击之前分配侦听器，然后我猜您想捕获单击检查按钮 ID（要执行的命令），然后根据单击的按钮检查用户和传递是否已满，如果是，则提交表单...我已经更改了您的代码，但我认为这正是您要找的。

希望能帮助到你！！！

Answer 2

你的代码有点乱，很难理解你到底需要什么。

话虽如此，您应该使用onclick属性将按钮绑定到 3 个单独的功能。

在这些函数中，您可以获得执行登录/注销/sendMe 功能所需的任何 dom 节点。

像这样：

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

验证表单。 addEventListener 不听

问题描述

2 个解决方案

解决方案1
1 已采纳 2017-01-09 20:09:28

解决方案2
0 2017-01-09 20:02:27

验证表单。 addEventListener 不听

问题描述

2 个解决方案

解决方案1 1 已采纳 2017-01-09 20:09:28

解决方案2 0 2017-01-09 20:02:27

解决方案1
1 已采纳 2017-01-09 20:09:28

解决方案2
0 2017-01-09 20:02:27