Question

好的，所以我有一个表单，我检查用户是否输入用户名字段中的用户名。最重要的是，我还想知道点击了什么按钮，我真的希望看到点击退出按钮的时间。在我看来，addEventListener在提交表单时没有注册'click'值。当我使用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节点。

像这样：

＆＃13;

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

＆＃13;

验证表格。 addEventListener没有监听

2 个答案: