雙重提醒窗口

我正在爲單個窗體獲得雙提示提示：第一次彈出警報，然後當我單擊確定時，同一個彈出窗口再次彈出。我認爲我的代碼應該在它碰到「else window.alert（sameWarning）時停止警告，當它到達」return false（）「時停止警告;但是它似乎返回false（）會導致警報兩次。兩個表單在一個頁面上;然而，他們有兩個獨立的函數名稱（「signinForm（）」和「saveSignUp（）」）並調用兩個單獨的表單（表單[0]和表單[1]）？我認爲我的代碼是正確的，但我不能在這一點上找到答案。任何幫助，將不勝感激。在此先感謝！雙重提醒窗口

<script type="text/javascript"> 
//FIRST FUNCTION FOR FORMS[0] 
function signinForm(){ 

     // var sameWarning = "The required fields were not submitted for the following error(s). \n \n"; 
     var warningLogin = "The following field(s) require an entry: \n \n"; 
     var sameWarning = warningLogin; 

     var userName = document.forms[0].userName.value; 
     var pswd = document.forms[0].pswd.value; 

     if(userName == ""){ 
     sameWarning += " - First Name \n"; 
     } 

     if(pswd == ""){ 
     sameWarning += " - Password \n"; 
     } 

     if (warningLogin == sameWarning){ 
      return true; 
      } 

     else { 
      window.alert(sameWarning); 
     } 
    return false; 
    } 

//SECOND FUNCTION CALL FOR FORMS[1] 
function saveSignUp(){ 

     // var warning = "The required fields were not submitted for the following error(s). \n \n"; 
     var warning = "The following field(s) require an entry: \n \n"; 
     var same = warning; 

     var firstName = document.forms[1].firstName.value; 
     var lastName = document.forms[1].lastName.value; 
     var email = document.forms[1].email.value; 
     var phone = document.forms[1].phoneNumber.value; 

     if(firstName == ""){ 
     //firstName.style.backgroundColor="red"; 
     warning += " - First Name \n"; 
     } 

     if(lastName == ""){ 
     warning += " - Last Name \n"; 
     } 

     if(email == ""){ 
     warning += " - Email \n"; 
     } 

     if(phone == ""){ 
     warning += " - Work Phone \n"; 
     } 

     if(phone < 5){ 
      warning += " - Must be a numberssss \n"; 
      } 

     if (warning == same){ 
      return true; 
     } 

     else { 
      alert(warning);   
     } 
    return false; 
    } 

</script>

HTML

<h1>Login</h1> 
<form method="post" onsubmit="return signinForm();" action="" > 
    <input type="text" placeholder="Username/Email" name="userName"> 
    <input type="password" placeholder="Password" name="pswd" id="pswd"> 
    <input type="submit" onclick="signinForm();" value="Sign In"> 
</form> 
<h1>Sign Up!</h1> 
    <form method="post" onsubmit="return saveSignUp()" action="" > 
    <input type="text" placeholder="First Name" name="firstName"> 
    <input type="text" placeholder="Last Name" name="lastName"> 
    <input type="text" placeholder="Email" name="email"> 
    <input type="text" placeholder="Phone Number" name="phoneNumber"> 
    <input type="submit" onclick="saveSignUp();" class="button wide" value="Request an Account">

來源

2014-09-23 ryanjohnsond

這是因爲您撥打signinForm();兩次。

刪除這些聽衆

onclick="signinForm();"

onsubmit="return signinForm()"

當你點擊提交按鈕調用signinForm();之一。而且因爲它是一個submit按鈕，它會觸發onsubmit事件，並呼籲return signinForm()

來源

2014-09-23 01:31:06

是onsubmit一個特殊的事件處理程序僅用於按鈕type = submit？使用onclick和onsubmit的開發者是否有偏好？ – ryanjohnsond 2014-09-23 01:46:50

當你點擊提交，首先它觸發click事件（調用你的函數），那麼它會觸發提交事件（再打電話給你的函數）。只需刪除提交按鈕的onclick。

來源

2014-09-23 01:33:40 ryansilva

工作正常！謝謝。我不知道通過提交調用的方法調用有優先順序。所以，onclick首先，然後它自動觸發提交調用的功能呢？ – ryanjohnsond 2014-09-23 01:44:48

onsubmit和onclick之間沒有區別，它們只是在元素上註冊事件處理程序的方法。因此，當您單擊輸入時會調用「saveSignUp（）」，並且在您提交表單時會調用「return saveSignUp（）」。它正好碰巧'input type =「submit」'是一種自動提交表單的特殊類型的按鈕。 – ryansilva 2014-09-23 01:48:28

雙重提醒窗口

回答

相關問題