双重提醒窗口

我正在为单个窗体获得双提示提示：第一次弹出警报，然后当我单击确定时，同一个弹出窗口再次弹出。我认为我的代码应该在它碰到“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

双重提醒窗口

回答

相关问题