Question

我正在尝试进行简单的电子邮件验证，并在验证后显示<p>和<img>。不幸的是，javascript只是在短时间内改变了样式（可见性），然后它又恢复为不可见（默认值）。我如何让它成为永久性的？

我有javascript的代码：

    function submitEmail () {
    if (window.XMLHttpRequest) {
        xmlhttp = new XMLHttpRequest();
    }
    else {
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }
    xmlhttp.onreadystatechange = function() {
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
            //stop the loading symbol
            //code to handle the return of data
            if (xmlhttp.responseText == "Correct") {
                alert("WORKED!");//email uploaded successfully
            }
            else if (xmlhttp.responseText == "Duplicate") {
                //email already added
            }
            else {
                //server error
            }
        }
    }
    var email = document.getElementById("emailInput").value;
    xmlhttp.open("POST", "http://www.studiosbt.com/Stream/addEmailToListServe.php?", true);
    xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    if (email != "" && email != "Email") {
        xmlhttp.send("email="+email);
    }
};
function subscribe(){
    //start the loading symbol
    var email = document.getElementById("emailInput").value;
    if (email != "" && email != "Email") {
        submitEmail();
        success();
    }
    else {
        alert("Input error!");//input error
    }
};
function success() {
    document.getElementById("checkBox").style.visibility = "visible";
    document.getElementById("thankYou").style.visibility = "visible";
};
function validateEmail() { 
var re = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
if (re.test(document.getElementById("emailInput").value)) {
    subscribe();
}
else {
    alert("Wrong!");
}
}

它的工作原理是它确实显示了checkBox和thankYou元素，但它们并没有停留。我该怎么办？

这是checkBox和thankYou元素的CSS代码：

#emailBox p{
color: white;
visibility: hidden;
}
#checkBox{
height: 25px;
width: 25px;
top: 45%;
right: 94%;
position: absolute;
visibility: hidden;
}

最后，这是html：

<body>

<div id="container">
<header>
    <h1>Header here</h1>
</header>
<div id="emailBox">
        <form name="emailform" id="emailform" onclick="return true;">
                    <input type="text" id="emailInput" class="emailcheck" tabindex="1" value="Email" onblur="if(this.value=='') {this.value='Email'; }" onfocus="if(this.value=='Email') { this.value='';}" name="email" autocomplete="off">

                    <input type="button" id="submit" class="emailcheck" value="Subscribe" onclick="javascript:validateEmail()">
        </form>
        <p id="thankYou">Thank you for subscribing!</p>
        <img src="Graphics/checkBox.png" id="checkBox"/>

</div>

</div>      
</body>

Answer 1

如果您不希望自己的表单提交。那么合乎逻辑的做法就是将这个小小的小调放在你的形式中。

onsubmit="return false;"

Answer 2

这很可能发生了什么：

function subscribe(){
    //start the loading symbol
    var email = document.getElementById("emailInput").value;
    if (email != "" && email != "Email") {
        submitEmail(); // this fires kicking off a page reload
        success(); // this fire showing the elements before the page is reloaded
    }
    else {
        alert("Input error!"); //input error
    }
};
// once the page is reloaded, the hidden elements are once again not visible

FIDDLE演示问题

解决方案：您需要使用ajax来阻止此

Javascript只是暂时改变

2 个答案: