驗證表單。 addEventListener not listening

好吧，我有一個表單，我檢查用戶是否在用戶名字段中輸入用戶名。最重要的是，我也想知道什麼按鈕被點擊，真的很想看看什麼時候註銷按鈕被點擊。在我看來，當提交表單時，addEventListener沒有註冊'click'值。當我使用Firefox調試器運行它時，buttons和buttonLength都具有正確的值。所以我的問題是，我如何檢查addEventListener值或者它是否通過？尋找一些有關我做錯了什麼的見解。驗證表單。 addEventListener not listening

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

來源

2017-01-09 poohbear

您在JS中擁有用戶名中的大寫，但不在html中。您將遇到的另一個問題是每次單擊按鈕時都要分配一個新的函數實例。 –

抱歉，這是我的錯誤複製和粘貼。 – poohbear

也許我錯了，但我覺得你儘量做到以下幾點：

<!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（命令執行），然後檢查用戶和通過是否滿足取決於按鈕clicke d，如果是這樣，然後提交表單...我已經改變了你的代碼，但我認爲你正在尋找。

希望它可以幫助！

來源

2017-01-09 20:09:28 ZeroWorks

所以當你說在點擊之前分配監聽器時，JS代碼必須在按鈕創建之後？ – poohbear

在您的代碼中，您在'onsubmit'事件中分配偵聽器。我已經改變了這一點，並將事件分配從功能中移出，因此必須在DOM中的按鈕之後移動腳本。也許我複雜的理解，但應該工作。 – ZeroWorks

有道理， – poohbear

你的代碼是有點亂，很難理解正是你需要的。

也就是說，您應該使用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>

來源

2017-01-09 20:02:27

驗證表單。 addEventListener not listening

回答

相關問題