淡入淡出聯系表“謝謝”司

Question

我有一個使用javascript和contact.php代碼的電子郵件提交表單

這是JavaScript

function createRequestObject() {
    var ro;
    var browser = navigator.appName;
    if(browser == "Microsoft Internet Explorer"){
        ro = new ActiveXObject("Microsoft.XMLHTTP");
    }else{
        ro = new XMLHttpRequest();
    }
    return ro;
}
var http = createRequestObject();
function sendemail() {
    var email = document.contactform.email.value;
    document.contactform.send.disabled=true; 
    http.open('get', '/contact.php?email='+email+'&action=send');
    http.onreadystatechange = handleResponse;
    http.send(null);
}
function handleResponse() {
    if(http.readyState == 4){
        var response = http.responseText;
        var update = new Array();
        if(response.indexOf('|' != -1)) {
            update = response.split('|');
            document.getElementById(update[0]).innerHTML = update[1];
        }
    }
}

這是contact.php的一部分

<?php

$to = ""; //This is the email address you want to send the email to
$subject_prefix = ""; //Use this if you want to have a prefix before the subject

if(!isset($_GET['action']))

{
die("You must not access this page directly!"); //Just to stop people from visiting contact.php normally
}

$subject = "Newsletter Sign Up"; //The senders subject
$message = trim($_GET['email']); //The senders subject
$email = ""; //The senders email address

mail($to,$subject,$message,"From: ".$email.""); //a very simple send

echo 'contactarea|<div id="thanks">thank you</div>'; //now lets update the "contactarea" div on the contact.html page. The contactarea| tell's the javascript which div to update.
?>

和HTML

<div id="contactarea">
<form name="contactform" id="contactform">
<input class ="email" type="text" name="email" id="inputbox" value="e-mail"
onfocus="if(this.value==this.defaultValue)this.value='';" onblur="if(this.value=='')this.value=this.defaultValue;"/>
<input type="submit" value="sign up" name="send" onclick="sendemail(); return false; " class="signup" >
</form>
</div>

我試圖在5秒鍾后淡出“謝謝”，但遇到了一些麻煩。

如果我將其設置為在單擊“提交”按鈕時淡入淡出，則似乎無法正常工作，因為直到單擊該按鈕后它才出現。

如果將其設置為在加載時淡入淡出，則只有在淡入淡出時間之前單擊該按鈕時，它才有效

有沒有一種方法可以淡出頁面負荷而不是div本身負荷呢？

Answer 1

嘗試

回聲'contactarea|<div id="thanks">thank you</div>';

至

echo '
contactarea|<div id="thanks">thank you</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
    setTimeout(function(){
        $("#thanks").fadeOut();
    },5000);
});
</script>
';

Answer 2

怎么樣：

function sendemail() {
var email = document.contactform.email.value;
document.contactform.send.disabled=true; 
http.open('get', '/contact.php?email='+email+'&action=send');
http.onreadystatechange = handleResponse;
http.send(null);
}

至：

function sendemail() {
var email = document.contactform.email.value;
document.contactform.send.disabled=true; 
http.open('get', '/contact.php?email='+email+'&action=send');
http.onreadystatechange = handleResponse;
http.send(null);

    setTimeout(function(){
        $(document).find("#thanks").fadeOut();
    },5000);

}