Search code examples
javascripthtmlvisibilitytemporary

Javascript only temporarily changing

I'm trying to do a simple email validation and have a <p> and an <img> display once you are validated. Unfortunately, the javascript is only changing the style(visibility) for a brief second, then it reverts back to invisible (the default). How do I get it to be permanent?

I have this code for the 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!");
}
}

It works in the sense that it does display the checkBox and thankYou elements briefly, but they don't stay. What do I do?

Here is the CSS code for the checkBox and thankYou elements:

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

Finally, here is the 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>
Solution

  • If you don't want your form to ever submit. Then the logical thing to do is to place this little ditty in your form.

    onsubmit="return false;"