代码之家 › 专栏 › 技术社区 › Andrew Weatherly

Javascript仅临时更改

temporary visibility html javascript

-1

Andrew Weatherly · 技术社区 · 10 年前

我正在尝试做一个简单的电子邮件验证 <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>

2 回复 | 直到 10 年前

Blane Townsend Emil Adz 10 年前

如果你不想提交你的表格。那么,合乎逻辑的做法是将这首小曲放在你的形式中。

onsubmit="return false;"

Community T.Woody 7 年前

这可能是正在发生的情况:

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 为了防止这种情况