javascript - 使用 AJAX 的登录表单未提交

Question

我在一个 wordpress 网站上创建了一个登录表单，让用户可以访问仅限成员(member)的内容。我有三个功能 login() resetPassword()和 register() .

login()和 resetPassword()在我添加第三个函数 register() 之前，表单工作正常然后所有表单都不会提交。

如果我删除 register()功能然后其他形式再次开始工作。另外，如果我将其他函数放在它们自己的 <script> 中标记然后它们按预期工作，但是 register()功能仍然无法正常运行。

我一遍又一遍地查看代码，并尝试将其放在不同的区域...我不确定是什么导致了问题。以前有没有人发生过这种情况？我该如何解决？

<script type="text/javascript">
function login()
{
    var email = document.getElementById("LoginUName").value;
    var pword = document.getElementById("LoginPWord").value;
    var xmlhttp;
    if (window.XMLHttpRequest)xmlhttp=new XMLHttpRequest(); 
    else xmlhttp=new ActiveXObject('Microsoft.XMLHTTP');
    xmlhttp.onreadystatechange=function(){document.getElementById('LoginScreen').innerHTML=xmlhttp.responseText;}
    xmlhttp.open('GET','login.php?EMail='+email+'&PWord='+pword,true);
    xmlhttp.send();
}
function resetPassword()
{
    var email = document.getElementById("ResetEMail").value;
    var xmlhttp;
    if (window.XMLHttpRequest)xmlhttp=new XMLHttpRequest(); 
    else xmlhttp=new ActiveXObject('Microsoft.XMLHTTP');
    xmlhttp.onreadystatechange=function(){document.getElementById('LoginScreen').innerHTML=xmlhttp.responseText;}
    xmlhttp.open('GET','passwordReset.php?EMail='+email,true);
    xmlhttp.send();
}
function register()
{
    var firstname = document.getElementById("RegisterFirstName").value;
    var lastname = document.getElementById("RegisterLastName").value;
    var email = document.getElementById("RegisterEMail").value;
    var pword = document.getElementById("RegisterPWord").value;
    var xmlhttp;
    if (window.XMLHttpRequest)xmlhttp=new XMLHttpRequest(); 
    else xmlhttp=new ActiveXObject('Microsoft.XMLHTTP');
    xmlhttp.onreadystatechange=function(){document.getElementById('LoginScreen').innerHTML=xmlhttp.responseText;}
    xmlhttp.open('GET','register.php?FirstName='+firstname+'&LastName='+lastname+'&EMail='+email'&PWord='+pword,true);
    xmlhttp.send();
}
</script>


<div id="LoginScreen">
<h1>Welcome to ****.</h1><br>
<h2>Please login or register below:</h2><br>
<form action="javascript: login()" method="get">
    <ul>
        <li>
            <h3>Username:&nbsp;</h3><input type="email" id="LoginUName" name="LoginUName" placeholder="Email address" />
        </li>
        <li>
            <h3>Password:&nbsp;</h3><input type="password" id="LoginPWord" name="LoginPWord" placeholder="Password"/>
        </li>
    </ul>
    <input type="submit" value="Login"/>
</form>
<br><hr><br>
<form action="javascript: resetPassword()" method="get">
    <h2>Forgot your password?</h2><br>
    Email address:&nbsp;<input type="email" id="ResetEMail" name="ResetEMail" placeholder="Email address" />&nbsp;&nbsp;<input type="submit" value="Reset" />
</form>
<br><hr><br>
<form action="javascript: register()" method="get">
    <h2>Register new user:</h2><br>
    <ul>
        <li>
            <h3>First Name:&nbsp;</h3><input type="text" id="RegisterFirstName" name="RegisterFirstName" placeholder="First Name" />
        </li>
        <li>
            <h3>Last Name:&nbsp;</h3><input type="text" id="RegisterLastName" name="RegisterLastName" placeholder="Last Name" />
        </li>
        <li>
            <h3>Email:&nbsp;</h3><input type="email" id="RegisterEMail" name="RegisterEMail" placeholder="email address" />
        </li>
        <li>
            <h3>Password:&nbsp;</h3><input type="password" id="RegisterPWord" name="RegisterPWord" placeholder="Password" />
        </li>
    </ul>
    <input type="submit" value="Register"/>
</form>

Answer 1

这只是一个语法错误。您错过了 + 符号。

你有:

    xmlhttp.open('GET','register.php?FirstName='+firstname+'&LastName='+lastname+'&EMail='+email'&PWord='+pword,true);

它需要在email 之后有一个+ 符号:

xmlhttp.open('GET','register.php?FirstName='+firstname+'&LastName='+lastname+'&EMail='+email+'&PWord='+pword,true);

这就是为什么将它放在两个单独的脚本中时它会起作用的原因。一个语法错误导致整个脚本无效。