双重警报窗口

Question

我同时收到一个窗体的警报提示：第一次弹出警报，然后单击“确定”，再次弹出相同的警报。 我认为我的代码在遇到“ else window.alert（sameWarning）”时应该执行一次警报，并在到达“ return false（）”时停止；但是似乎return false（）导致了两次警报。也许是因为一页上有两个表单；但是，它们有两个单独的函数名（“ signinForm（）”和“ saveSignUp（）”）并调用两个单独的表单（forms [0]和forms [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">        

Answer 1

这是因为您调用了signinForm(); 两次。

删除这些监听器之一

onclick="signinForm();"

onsubmit="return signinForm()"

当您单击提交按钮时，您调用signinForm(); 。 并且由于它是一个submit按钮，它将触发onsubmit事件，并调用return signinForm()

Answer 2

当您单击提交时，首先触发click事件（调用您的函数），然后触发一个Submit事件（再次调用您的函数）。 只需删除提交按钮的onclick即可。